前端人员必会的与技巧你学会了吗

　　现如今很多前端开发人员常用的是Vue、React这类SPA框架，如果是做管理系统非常方便，可以最大化的突出数据处理方面的优势，当然也有很多小伙伴做的是混合开发，比如uniapp、react native、taro等等，以及目前很火的flutter。
　　时至今日，PC端和H5端的门户类网站【资讯类、企业类、商城类】仍然活跃，依然要靠SEO来提升排名，但是现如今已经发展到了以Vue、React、Angular为主流的时代了，我们总不能倒退回JQuery去做开发，所以在现代框架下去做SEO优化就非常有必要了。
　　首先，先来介绍一些开发过程中，要注意的一些基本的SEO知识。
　　一、HTML标签的使用
　　不要什么都用div，尽量合理的使用ul、ol、table等，HTML5的新标准已经推出了很多年了，但是很多小伙伴还是沉醉于HTML4的标签，大家要多尝试譬如 article、main、header、footer、aside这类的语义化标签，逐步的去替换div，这样对SEO有很大的提升。
　　二、TDK
　　TDK(Title、Description、Keywords)，这三项对于一个网站来说是至关重要的，绝不能小觑。大家可以去参考一些较大的资讯网站，很多页面的TDK是不同，每个页面的TDK都和这个页面的内容有一定关系。
　　三、图片属性
　　(1)当图片未成功显示时候，仍可以显示文本，用户可以了解图片主题
　　(2)当图片成功显示的时候，鼠标以上图片，可显示图片描述
　　(3)可解决网速慢、src引用错误、浏览器禁用图像、用户使用屏幕阅读器等情况
　　(4)要定义大小、不然会造成页面重新渲染，影响加载速度
　　四、超链接
　　内链采用绝对路径，减少服务器的响应时间，
　　例如：淘宝网首页
　　不要采用
　　下面是淘宝页面截取的图片
　　五、导航栏的层级数不宜太深
　　【效果较差】/article/detail/1892.html
　　【效果较好】/article/1892.html
　　六、静态化
　　生成一个纯静态的，不包含数据交互的HTML文件，这样就需要提前在服务端将数据写入到页面中，再展现出来。静态化页面比动态化的JSP、PHP要强很多，这也是大家平时很少能看到官网地址的后缀是jsp、php的原因了。
　　但缺点也很明显，我们要将所有的数据都静态化，这个工作量是非常大的，比如我们的网站数据库里有2000篇文章，如果采用动态化，只需要写一个页面，然后在页面中获得id并发起ajax请求，就可以切换不同的文章了。但静态化就得提前生成2000个html文件，用户点击哪个就打开哪个，并且如果用户新增一篇文章，那么服务器就得再去生成一个新页面。
　　七、伪静态化
　　前面说了静态化虽好，可不能贪杯，对于数据量庞大的现代网站来说，我们没办法去真的生成几千个页面，这维护成本是极高的。那么现如今的大网站都是怎么解决这个问题的呢?答案就是伪静态化，也就是看起来像是一个静态页面，本质仍然是一个动态页面，很多后端程序员应该都做过类似处理，也就是把.jsp或.php的后缀改成.html，同时在地址栏上不要再写参数，类似：?id=1这样。但是仅仅把后缀改成.html是不够的，同时要需要在查看网页源代码时能看到网站的数据内容。
　　如何实现伪静态化
　　那么对于我们广大的前端开发者来说，前面说的5条都比较容易实现，第6条由于文件数量过于庞大，一般也不建议那么做，所以第7条是我们的方向，但如果大家用的是Vue或React，就会发现源代码里并没有生成的HTML，因为所有数据都是异步加载的，并且还有一个问题，就是首次加载白屏的问题：由于是异步加载数据，所以如果网络比较慢，第一次打开网页时会出现白屏，等待几秒后才正常显示
　　此时，SSR(Server-Side Rendering,服务端渲染)应运而生,首屏的内容在服务端提前加载好，连带页面一起加载，这样既解决了白屏问题，更能有效的达成伪静态化的目的。
　　SSR框架
　　目前SSR的主流框架：Vue方向的Nuxt.js、React方向的Next.js。
　　这两个框架技术君都使用过，用起来极为相似，据说Nuxt.js就是模仿Next.js而来的，这里拿Nuxt.js举例。
　　Nuxt路由
　　路由是根据pages文件夹里的目录结构自动生成的，目录名叫什么，路由的path就叫什么，非常方便，也可以指定动态路由，只需要在前面加下划线，比如：list/_id.vue，生成的路由path就是：list/:id。
　　Nuxt服务端数据加载
　　这是Nuxt框架的核心，之前说过，我们的网站要求在页面查看源代码时能看到网站内容，但是普通的Vue代码打包后是看不到的，因为数据是异步加载的。在Nuxt中每个Vue文件有一个 asyncData(context)函数，我们就在这个函数里去请求后台数据，请求之后通过 return 就可以将数据绑定在当前组件中，和普通的data()一样。在asyncData函数里请求的数据就会显示在网页的源代码里。
　　Nuxt打包
　　Nuxt.js分为了两种打包模式：nuxt generate和nuxt build，如果是想采用真正的静态化就使用nuxt generate，会生成一个dist目录，将所有的vue文件都生成对应的html文件，但是之前说了，如果数据很多，那么就得生成很多文件，除非数据相对比较固定就比较适合。而nuxt build打包之后，需要将：_nuxt，static，package.json,nuxt.config.js这四个文件复制出来，然后找一个新文件夹，粘贴进去，再执行npm install和npm run start启动，这样启动之后实际上还是带了一个nuxt服务器环境，运行的时候就是以动态方式运行的。只需要在nginx里面做一个地址匹配，给url后面加.html即可。
　　小结
　　本篇文章并不是Nuxt框架的教程，只是从SEO的角度给大家一个引导，如果对Nuxt框架有兴趣，可以查阅相关资料或者官方网站。