服务器端渲染（SSR）vuejs 前端项目

jangwoo 小马学编程 2月14日

图

现在很多公司都选择 vue 做为前端框架来开发项目，是因为 vue 吸收了 angular 的数据绑定和 react 的虚拟 dom 的等前端框架的优点。而且也避免他们的缺点。小巧且强大。借助强大生态圈可以胜任大型系统的单页应用。

今天就给大家介绍一下他的另一面用 nuxtjs 实现服务端渲染。开始之前，先为大家介绍几个概念以便于理解我们为什么要做服务器端渲染。

图

什么是服务器端渲染(SSR)？

为了良好的用户体验和前后端分离，大多前端项目都是单页应用，modern 框架基本都是构建客户端应用程序的框架。通常情况下，负责在浏览器中输出组件，进行生成 DOM 和操作 DOM 来实现用户交互。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序，这就是服务器端渲染。

图

服务器端渲染有哪些好处

1. 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

单页应用是根据路由，通过 ajax 异步的更新页面一个部门来实现应用效果，这样抓取工具是无法获取页面。

2. 对于缓慢的网络或运行缓慢的设备。可提供获取网页速度，有良好的用户体验。

由于单页应用在第一次加载时，需要将一个打包好（requirejs 或 webpack 打包）的 js 发送到浏览器后，才能启动应用。

所以这样会有些慢。如果在服务器端就预先完成渲染网页后，直接发送到，这样用户将会更快速地看到完整的渲染的页面。通常会产生更好的用户体验。

可以自己实现服务器端的渲染的 vuejs 单页应用，也可以使用 nuxtjs 来实现，自己实现 vuejs 服务器端渲染很繁琐，需要熟练掌握 webpack 等工具，框架 nuxtjs 简化了于服务端渲染的工作。

1. 准备工作

1. 需要安装 nodejs 建议 v8.9.4

如果nodejs版本过低可能在运行程序时，报 async read ... 错误

2.在终端全局安装 create-nuxt-app

npm install -g create-nuxt-app

图

2. 创建项目

使用架手架 create-nuxt-app <project name> 来创建项目

图

然后根据一步一步的提示，来配置我们的项目。

Project name 项目名称

Project description 项目说明

然后选择服务器端使用框架，这里仅支持 nodejs 的项目，也可以不选择框架，这里我们选择 none 。

图

这里选择 Universal ，因为我们做的服务端渲染，而不是单页应用。

图

axios 是一个轻便的 ajax 库。我们这里因为没有和服务器端进行数据交互，所以选择 no 不使用 axios。

这里我们项目是通过 npm 而非 yarn 来管理，您也可以选择 yarn 来管理您的项目。

安装会花费一定时间，但也就几分钟吧，然后便可看下图中的提示

只要按提示一步一步做就可以启动我们项目了。

启动后在终端看到提示，恭喜您已经成功启动了nuxt 项目

在浏览器便可以看到此画面

也可以通过nuxt 创建项目教程一步一步创建项目

创建好的项目结构如下图

我们服务器端渲染页面都在 pages 文件夹中，

现在我们要实现当用户在浏览器地址栏中输入 http://localhost:3000/about 时

会打开 about 页面，下面介绍一下在 nuxt 实现此需求的两种方式。

第一种方式，在 pages 文件夹下创建 about.vue

第二种方式，在 pages 文件夹下，创建 about 文件夹然后在 about 文件夹中创建 index.vue 文件

在 index.vue 写下内容

在浏览器中输入 localhost:3000/about ，可以看到以下面的界面

恭喜您已经实现了服务器端渲染。

我们可以在此网页单击鼠标右键，查看源代码，可以看到这页面除了about.vue 中的内容以外，还有添加许多附加内容。

我们在 pages 文件下，再创建一个 notices 文件夹然后，在此文件夹下创建 index.vue。然后输入以下内容。

添加一些样式

注意图中div 漏了些内容，

在浏览器查看一下效果

现在我们看一看在服务器端渲染页面是如何调用 vue 的 component

我们现在 components 文件下创建 Tutorial.vue ,来写一个 Tutorial 组件。

如果我们页面中要引用图片，可以将图片放到static文件夹下，

我们创建一个 component ，然后定义组件的属性 thumbnail title previewText。

我们回到 notices/index.vue 文件

可以用 import 将组件导入到 index.vue 页面然后我们就可以在服务器端页面中使用组件。

我们来实现一下当在浏览器中输入 http://localhost:3000/notices/1 显示对应页面。

我们在notices 文件夹下创建 _id 文件夹作为 notices 后面的参数。然后在 _id 文件夹下创建 index.vue

在创建好的 index.vue 中输入 $route.params.id 便可以访问到 notices/参数了

见图

看到这里，我们自然明白了我们通过id来访问列表中记录后进入该记录的详细页面，所以我们修改一下 _id/index.vue 文件。

修改 notices/index.vue 如下图，添加id作为跳到详细页面的标识。

我们在修改一下 Tutorial 组件，添加<nuxt-link>标签，然后添加跳转属性 to

然后使用 asyncData 方法异步地加载数据，再使用加载的数据来渲染列表，这里我们通过 setTimeout 来实现异步加载数据。

图 图 图