学习 Vue

第 13 章 使用 Vue 进行服务器端渲染 使用 Vue 进行服务器端渲染

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：[e-mail]

在上一章中，我们学习了如何设置 Vue 应用程序的完整 CI/CD 管道。我们还学习了如何使用 Netlify 为生产部署应用程序。现在，用户可以通过网络访问我们的应用程序了。至此，我们几乎完成了学习 Vue 的旅程。本章将探讨使用 Vue 的另一个方面，即使用 Nuxt.js 进行服务器端渲染和静态网站生成 。

Vue 中的客户端渲染

默认情况下，Vue 应用程序是用于客户端渲染的，其中包含占位符index.html 文件、JavaScript 文件（通常由 Vite 分块编译，以优化性能）以及 CSS、图标、图片等其他文件，从而实现完整的 UI 体验。在初始加载时，浏览器会向服务器发送index.html 文件请求。作为回报，服务器将提供原始占位符文件（通常只有一个带有唯一 id 选择器的元素app ，供 Vue 引擎挂载应用程序实例，还有一个指向包含主代码的所需 JavaScript 文件的script 标签。浏览器接收到 HTML 文件后，就会开始解析并请求额外的资源，如所需的main.js 文件，然后执行它来相应地渲染其余内容（图 13-1）。

图 13-1. 渲染客户端 Vue 应用程序的流程

至此，应用程序完成初始化，用户可以开始与其交互。Vue 将通过内置路由系统动态处理用户的视图更改请求。但是，如果右键单击页面并选择查看页面源代码，则只能看到原始根index.html 文件的代码，而看不到当前的用户界面视图。这种行为可能会造成问题，尤其是在创建需要良好搜索引擎优化（SEO）的网站或应用程序时。¹(SEO) 时尤其如此。

此外，由于需要下载重量级 JavaScript 文件、网络速度慢、浏览器绘制内容（First Paint）所需时间等因素，在向用户显示任何内容之前加载和执行 JavaScript 代码的过程会导致用户等待时间过长。因此，整个过程会导致较慢的交互时间（TTI）和较慢的首次绘制时间（FPG）。²(TTI) 和缓慢的首次内容绘制 (FCP)。³(FCP）。所有这些因素都会影响应用程序的整体性能和用户体验，而且通常很难解决 。

在这种情况下，可能有比客户端渲染应用程序更好的选择，比如服务器端渲染，我们接下来将探讨服务器端渲染。

服务器端渲染（SSR）

顾名思义，服务器端渲染（SSR）是一种将服务器端的所有内容编译成可完全运行的 HTML 页面，然后按需交付给客户端（浏览器）的方法，而不是在浏览器上执行 。

要开发一个本地 SSR Vue 应用程序，我们需要一个本地服务器来与浏览器通信并处理所有数据请求。我们可以通过安装 Express.js⁴作为我们项目的依赖关系，使用以下命令 ：

yarn add express

安装完成后，我们可以直接在项目根目录下创建server.js 文件，使用例 13-1中的代码设置本地服务器 。

例 13-1. 本地服务器的server.js 文件

import express from 'express'

const server = express() 

server.get('/' ...