案例：服务端渲染待办事项

学习完本章服务端渲染的内容之后，我们可以将第 9 章基于 Vite 的待办事项系统改造成支持服务端渲染。

功能描述

主要功能和上一节的待办事项系统功能一致，在此基础上添加服务端渲染功能，主要改造如下：

  • 根据本章 Vite 服务端渲染的改造步骤，依次添加对应的文件和逻辑进行改造。

  • 由于之前我们采用本地 LocalStorage 存储，在服务端无法使用，因此将这部分逻辑移除。

案例完整代码

这里举几个改造源码的例子。

例如，修改 main.js 引入 SSR 支持，代码如下：

import App from './App.vue'
import { createSSRApp } from 'vue'
import { createRouter } from './router/router'
import { createStore } from './store/store'
export function createApp() {
    // 如果使用服务端渲染，则需要将createApp替换为createSSRApp
    const app = createSSRApp(App)
    // 路由
    const router = createRouter()
    // store
    const store = createStore()
    app.use(router)
    app.use(store)
    // 将根实例以及路由暴露给调用者
    return { app, router }
}

注意，如果应用使用了 Vuex，也要在这里进行引入，同时如果需要借助 store 来展示 Node.js 端获取的首屏数据，则这里需要进一步改造（本案例暂不涉及这部分改造）。

将 store.js 的本次存储逻辑关于 dataUtils 相关的代码移除，对于服务端渲染来说，这些原本存在浏览器端的数据就更合适在 Node.js 端通过 HTTP 请求从后端数据库获取了，所以这里使用浏览器端就不合适了，将这部分逻辑进行移除，如果读者对后端数据库相关的内容比较了解，也可以深入改造这部分逻辑。

其他相关的改造内容可以参考本节的步骤，将对应文件依次添加上去即可，例如 server.js、entry-client.js、entry-server.js 等，内容基本不需要改变。

本案例完整源码：/案例源码/Vue.js服务端渲染。

小结与练习

本章讲解了 Vue.js 服务端渲的染相关知识，主要内容包括：服务端渲染概述、Vite 服务端渲染改造、如何编写通用代码以及预渲染相关知识，最后简单介绍了基于 Vue 的服务端渲染框架 Nuxt.js。

服务端渲染在一定程度上优化了页面性能，提升了用户体验，但是也提升了项目的整体复杂度，但笔者认为了解服务端渲染有助于提升前端工程师的综合能力，因为除了了解 Vue 在客户端浏览器运行的机制外，也可以学习 Vue 与 Node.js 结合的后端知识，同时还能掌握一些服务器运维知识，从而得到整体的锻炼和提升。

下面来检验一下读者对本章内容的掌握程度。

  • 服务端渲染和客户端渲染的优劣分别是什么？

  • ssr-manifest.json 文件的作用是什么？

  • 在服务端渲染中创建 Node.js 后端服务的核心作用是什么？

  • 预渲染和服务端渲染的区别是什么？