一对一视频app开发，为什么预渲染更受欢迎？

一对一视频app开发，为什么预渲染更受欢迎？

服务器端渲染 vs 预渲染

如果你调研服务器端渲染(SSR)只是用来改善少数营销页面（例如 /, /about, /contact 等）的SEO，那么你可能需要预渲染。无需使用web服务器实时动态编译 HTML，而是使用预渲染方式，在构建时简单地生成针对特定路由的静态HTML文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。
如果你使用webpack，你可以使用prerender-spa-plugin轻松地添加预渲染。它已经被Vue应用程序广泛测试 - 事实上，作者是Vue核心团队的成员。

三种不同渲染方式的区别：

客户端渲染： 用户访问url，请求html文件，前端根据路由动态渲染页面内容。关键链路较长，有一定的白屏时间；
服务端渲染： 用户访问url，服务端根据访问路径请求所需数据，拼接成 html 字符串，返回给前端。前端接收到html时已有当前url下的完整页面；
预渲染： 构建阶段生成匹配预渲染路径的html文件（注意：每个需要预渲染的路由都有一个对应的 html）。构建出来的html文件已经有静态数据，需要ajax数据的部分未构建。

预渲染解决的问题：

SEO： 单页应用的网站内容是根据当前路径动态渲染的，html文件中往往没有内容，网络爬虫不会等到页面脚本执行完再抓取；
弱网环境： 当用户在一个弱环境中访问你的站点时，你会想要尽可能快的将内容呈现给他们。甚至是在 js 脚本被加载和解析前；
低版本浏览器： 用户的浏览器可能不支持你使用的js特性，预渲染或服务端渲染能够让用户至少能够看到首屏的内容，而不是一个空白的网页。

Vue预渲染实现流程

1.prerender-spa-plugin安装，建议使用淘宝镜像的cnpm，因为npm安装经常失败，否则会出现意向不到的问题，并且效率低，比较浪费时间。

cnpm install prerender-spa-plugin --save-dev

2. vue.config.js配置文件

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

在plugins下面，找到plugins对象，直接加到上面就行
// 预渲染配置
new PrerenderSPAPlugin({
    //要求-给的WebPack-输出应用程序的路径预渲染。
    staticDir: path.join(__dirname, 'dist'),
    //必需，要渲染的路线。
    routes: ['/login'],
    //必须，要使用的实际渲染器，没有则不能预编译
    renderer: new Renderer({
        inject: {
            foo: 'bar'
        },
        headless: false, //渲染时显示浏览器窗口。对调试很有用。  
        //等待渲染，直到检测到指定元素。
        //例如，在项目入口使用`document.dispatchEvent(new Event('custom-render-trigger'))` 
        renderAfterDocumentEvent: 'render-event'
    })
})

3. router.js配置文件，需要把vue的router模式设置成history模式

4. main.js文件的修改

在创建vue实例的mounted里面加一个事件，跟PrerenderSPAPlugin实例里面的renderAfterDocumentEvent对应上。

mounted () {
    document.dispatchEvent(new Event('render-event'))
 }

这是预渲染的基本配置，npm run build 一下，如果dist文件夹多了你想预渲染的文件夹，那么恭喜你，成功了！如果项目是用nginx做的代理，nginx还需要做一些配置，具体是：

location = / {
  try_files /home/index.html /index.html;
}

location / {
  try_files $uri $uri/ /index.html;
}

5.相关页面情况

以上就是一对一视频app开发，为什么预渲染更受欢迎？， 更多内容欢迎关注之后的文章