什么是 SSR
SSR 即服务端渲染，它的基本工作流程是将 Vue 组件同步渲染到服务器，返回给客户端一个已经渲染好的 HTML 页面。相较于传统的 CSR（客户端渲染）模式，SSR 可以带来更好的首屏渲染速度和 SEO 优化。
Nuxt.js 简介
Nuxt.js 是一个开源的基于 Vue.js 的 SSR 框架，具有简单易用、扩展性强、开箱即用等特点。它提供了一系列可以自定义的配置和约定，开发者可以使用预设的目录结构和命名规则来规范化项目代码组织。
如何使用 Nuxt.js 实现 SSR
首先需要安装 Nuxt.js：在终端中执行 npm i nuxt。
创建 Nuxt.js 项目
在终端中执行 npx create-nuxt-app <project-name> 来创建一个新的 Nuxt.js 项目，项目目录结构如下：
-- -------------------- ---- ------- --- ----- -- ------- ------------------- --- ------ -- ------------------ --- ---------- -- -- ------ -- --- ------- -- --------- --- ---------- -- ----- --- ----- -- -- ------ ----- --- ------- -- ---- --- ------ -- ----------- ------- --- ----- -- -- ---- --------- --- --------- --- -------------- -- -- ------- ----- --- ----------------- --- ------------
使用 Nuxt.js 提供的模板和组件库
Nuxt.js 提供了模板和一些组件库可以使用，例如 Vuetify 和 Bootstrap。通过在 nuxt.config.js 配置文件中添加对应的模块名即可使用。例如：
-- -------------------- ---- -------
-------------- - -
-------- -
-- -- -------
------------------
-- -- --------- ---
--------------------
--
-------- -
-- ------ ------- --
--
------------- -
-- ------ ------- --
--
-自定义路由
Nuxt.js 提供了自定义路由的配置，配置在 nuxt.config.js 文件中:
-- -------------------- ---- -------
-------------- - -
-- -----
------- -
-------------------- -------- -
-------------
----- ---------
----- ----------
---------- ------------------ -------------------
--
-
-
-后端 API
在使用 SSR 的时候，Nuxt.js 需要通过后端 API 获取数据，从而构建 HTML 页面。如何访问后端 API 常见的有两种方式：
1.使用 Node.js 的 http 模块来发送 HTTP 请求，使用 res.write() 方法向前端推送数据。
2.使用开源的 HTTP 客户端 axios 来发送请求。
export default {
asyncData({ params, $axios }) {
return $axios.$get(`https://api.example.com/users/${params.id}`)
}
}预渲染
由于 SSR 在处理后端渲染时，体验依赖于服务端的性能，如果在高并发场景下，或者某些路由对性能要求较高的情况下，可以通过预渲染的方式进行优化。预渲染的过程在构建时进行，将预渲染好的内容存储到已编译资源的目录中，当客户端在访问页面时，直接将预渲染好的内容展示出来，从而减轻了服务端的压力。
预渲染只需要在 nuxt.config.js 中添加以下配置：
-- -------------------- ---- -------
-------------- - -
-- ----------
--------- -
------- -
---------
---------
--------
-
-
-总结
本文介绍了如何使用 Nuxt.js 实现 Vue.js 的 SSR，包括创建 Nuxt.js 项目、使用 Nuxt.js 提供的模板和组件库、自定义路由、后端 API 和预渲染。通过阅读本文，您能够更好地理解 SSR 的意义和优势，并掌握使用 Nuxt.js 实现 SSR 的技巧。
附上示例代码：https://github.com/muyuuuu/vue-nuxt-ssr
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65aadc20add4f0e0ff470fac