关于前端预渲染

什么时候使用预渲染

• 只有少量页面需要SEO优化
• 仅仅提高首屏的渲染速度，且首屏的几乎只有静态数据的情况

预渲染的原理：

主要是借助prerender-spa-plugin（单页面应用预渲染的插件）预渲染插件，在打包的时候进行预渲染处理。

简单理解就是，使用这个插件，它会在项目打包的过程中去启动一个无头浏览器（也就是没有图形界面的浏览器），然后加载并抓取应用程序需要预渲染的路由，然后再将结果输出到静态文件中。

如何在Vue CLI中使用预渲染

1.首先需要先去下载prerender-spa-plugin插件

npm -i prerender-spa-plugin

2.需要在vue.config.js中进行对该插件的配置（更多配置项可以到npm官网上查看这个插件的使用方法说明）：

// 引入插件
const PrerenderSPAPlugin = require('prerender-spa-plugin');
module.exports = {
    configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') return;
    return {
        plugins: [
            new PrerenderSPAPlugin({
                // 生成文件的路径，也可以与webpakc打包的一致。
                // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
                staticDir: path.join(__dirname,'dist'),
                // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
                // 如果只是渲染首页，可以使用hash路由，但是如果要渲染其他页面，则一定要将路由改为history模式。
                routes: ['/'],
                // 这个很重要，如果没有配置这段，也不会进行预编译。
                renderer: new Renderer({
                    inject: {
                        foo: 'bar'
                    },
                    // 是否开启无头浏览器，设置为false会在打包的时候看到浏览器弹出渲染路由。
                    headless: false,
                    // 注意要在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                    renderAfterDocumentEvent: 'render-event'
                })
            })
        ],
    };
  }
    
}

3.记得在amin.js里配置好

new Vue({
  router,
  store,
  render: h => h(App),
  mounted () {
    // 记得要与配置文件里的renderAfterDocumentEvent: 'render-event'对应上事件名。
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

4.预渲染的时候主要碰到的报错问题就是跟路径有关，注意要检查一下路径，如果预渲染出来的页面显示文件引用路径错误的问题，可以试试在配置文件里配置publicPath属性

module.exports = { 
	publicPath: './'
}

关于服务端渲染（SSR）

比如像同样是写下面这样的一个页面

像传统的服务端渲染，就比如说用PHP写的页面，可以在服务器就把页面渲染成HTML字符串，也就是在服务器已经做好了页面渲染的工作，然后再将这个渲染好后的页面返回给客户端浏览器，这样浏览器拿到页面后就可以直接进行解析。在网页点击鼠标右键，查看网页源代码如下：

但是像单页面应用，则是将渲染的工作交给了客户端浏览器，就比如说用vue写同样的结构，看它的源代码，一眼看过去会发现它只有短短的几行，因为它的页面结构主要是通过js进行生成的，所以像html，css这样的代码在源代码里显示就会很少。所以也就不能一眼就见到像上面写的这两个h1标签了，搜索引擎也很难识别出有两个h1标签。

把渲染的工作交给浏览器处理的好处就是可以大大减少服务器渲染页面的压力，但是如果要做SEO优化，那就是服务端渲染会比较好。因为要做SEO优化，就得让搜索引擎对页面的源代码可以进行爬取和识别，而恰恰现在的搜索引擎识别网页代码对html和css的识别很好，但是却对js的识别非常不友好。所以如果是传统的服务端渲染，做SEO优化完全没问题，但是对于主要使用js生成页面结构的单页面应用来说，SEO优化就非常不友好了。

关于对Vue的服务端渲染原理的理解

SSR渲染就是在服务端渲染，就是说将一个组件或页面在服务端渲染成HTML字符串，然后返回给浏览器，最后将静态标记"激活"为客户端上完全可交互的应用程序。
Vue的SSR渲染主要是在服务端使用node的vue-server-renderer库创建一个渲染器，利用渲染器将vue实例转换为HTML字符串返回（插入到<!--vue-ssr-outlet-->）。
它在构建Vue应用的时候，是分别（通过客户端入口和服务端入口）打包了客户端应用程序和服务端应用程序。
然后服务端用于服务器渲染，客户端则是发送给浏览器，用来混合静态标记。
然后它在服务端渲染出来的HTML中它的一个根元素上是标记了一个data-server-rendered为true特殊属性。
Vue在浏览器端接管由服务端发送的静态HTML的时候，就是通过这个属性知道这部分HTML是由Vue在服务端渲染的。
因为这是已经在服务器端渲染好了HTML，所以它就会使用这些现有的DOM元素，然后以激活模式进行挂载。
也就是所谓的客户端激活，变为由Vue管理的动态DOM。

（来自博主的一些碎碎念= =：如果要用vue写代码然后又要做服务端渲染，最好在一开始的时候就确定好有要做服务端渲染的需求，这样一开始在技术选型的时候就可以直接使用Nuxt去构建代码。不然在项目后期或者是项目已经完成好的时候才有seo优化的需求，性价比高的就是做预渲染来优化了，如果一定要这个时候做服务端渲染，改动的工程量真的巨大~）

参考文章：
vue做seo优化
Vue SSR指南