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

Posted 2021-05-01 小马学编程

现在很多公司都选择 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 文件夹中，

会打开 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 来实现异步加载数据。

今天到这里吧，随后继续