服务器端渲染(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 来实现异步加载数据。

推荐阅读更多精彩内容