Vue 服务端渲染 & 预渲染

• 服务端渲染 or 预渲染

• 区别

• 如何使用预渲染

• 如何搭建一个预渲染开发环境

• Tip

• 写在最后

简介

---

关于 Vue 的 SPA 说的已经太多太多了，它为我们带来了极速的开发体验，极强的开发效率。可能唯一有些许不足的就是，当我们对 SEO 很在乎的时候，我们如何去处理 SEO 的需求。

关于 SEO ，Vue 也有现成的解决方案： Vue 服务端渲染

那么

---

什么是服务端渲染

服务端将完整的页面 html 输出到客户端显示，与 SPA （Single-Page-Application）使用 js 渲染页面不同。

为什么使用服务端渲染

• 更好的 SEO

• 更快的内容到达时间

服务端渲染 or 预渲染

就像官网所说的，如果你调研服务器端渲染(SSR)只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要 预渲染，一个典型的预渲染使用场景可能类似 这个网站。

区别

服务端渲染和预渲染的使用场景还是有较明显的区别的。预渲染的使用场景更多是我们所说的静态页面的形式，比如说这个网站。服务端渲染适用于大型的、页面数据处理较多且较为复杂的、与服务端有数据交互的功能型网站，一个明显的使用场景就是电商网站。

如果你想阅读我写的 Vue 服务端渲染，请移步：手把手教你 Vue 服务端渲染

如何使用预渲染

---

预渲染的核心是使用 prerender-spa-plugin，如何使用它呢？我们还是以这个网站的源代码中的 webpack 配置为例：

new PrerenderSPAPlugin({

staticDir: path.join(__dirname, ‘dist’),

routes: [ ‘/’, ‘/home’, ‘/infomation’, ‘/ticket’, ‘/scenery’, ‘/about’ ],

renderer: new Renderer({

headless: false,

renderAfterDocumentEvent: ‘render-event’

})

}),

我们需要简单的配置一下，项目所有的路由，最终生成后有几个页面，都是以这个配置为依据，而不是你在 vue-router 中配置的路由。

最基础也最核心的配置项也就这几行代码，当然，如果你有更多的需求配置项，你可以去 github 上查看文档，文档中也有很详细的介绍。

如何搭建一个预渲染开发环境

---

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。