ssr实现方案

目录

序言

一、流程

二、前端要做的事情

三、节点介绍

四、总结

---

序言

本文不是详细的实现过程，是让你最快最直接的理解ssr的真正实现方法，有前端经验的同学，能够很好的理解过程，细节根据具体项目实现

一、前端要做的事情

1.前端写模版代码，通过webpack根据环境（客户端/服务端）进行打包，打包后的产物，在node上进行运行

2.node搭建服务端，模版写好通过webpack打包能运行在node中的entry_server.js， 请求后，进行执行，进行资源加载，路由/状态管理的获取，数据的前置请求，然后最后通过vue-server-renderer的renderer函数，进行编译，生成的html返回到客户端展示

二、ssr实现流程（干货）

1.客户端请求，

2.服务端返回，node中的express做服务器，只用于返回模版

3.客户端isReady后水合，方式是app.mount('#app', true)

4.服务端返回前做的事情

        1）对于初始化需要的异步请求，需要在返回前先进行，在beforeMount中进行，

        2）服务端的路由要和客户端保持一致。

        3）服务端的状态管理，可通过window.__INITIIAL_STATE__去返回

        4）可动态注入静态资源，服务端通过webpack的minicss_extract_plugin将css提取出来，然后动态注入到link标签里，动态添加到html中返回，然后必须确保客和服务是共同的css和js资源文件

        5）vue3中的vue-server-renderer实现ssr

三、节点介绍

客户端：

在ssr中，客户端的 Vue 应用将接管服务器渲染的 HTML应用，需要创建一个客户端入口文件，让Vue在浏览器初始化并绑定在dom元素上。

entry.client.js 和 entry.server.js

理解水合hydration：服务端返回的html字符串，

router.isReady().then(() => {app.mount('#app', true);  // 第一个参数是挂载的 DOM 元素，第二个参数 true 表示启用 SSR 水合模式
});

服务端：

app.js：返回createApp函数

        createApp函数通常定义在app.js里，里面记录了router路由，还有vuex配置等。

router.js：确保客户端和服务端的路由一致。vue3里的vue-router支持ssr。

        客户端会接管服务器返回的html，所有的路由信息，vuex状态管理等所有初始状态都必须一致，确保服务端的html能够准确传递到客户端。

确保客户端和服务器端的状态同步：

window.__INITIAL_STATE__初始化，vuex的状态，服务端中html文件，会先把vuex的数据，放到window中，然后客户端接收到html中，就可以获取到store里的数据。

        替代方法：1，http请求，2，服务端赋给cookie，3，服务端通过graghQL去请求，然后返回

优化客户端和服务器端的打包：

        客户端打包：通过webpack或者vite进行打包，确保能接收返回的html文件

        服务端打包：vue中有一个vue-server-renderer工具，提供renderer方法，进行编译，然后通过webpack进行打包

处理异步数据加载：

        当应用中包含一步请求时，需要先把请求跑完，再去进行render编译，可以把请求放在beforeMount中，通过promise方法，请求完成后再去编译渲染成html返回，

可以通过webpack或者vite完成对客户端和服务端的代码打包，vite本身有一个支持ssr的包，开箱即用。

四、总结

前端在实现 SSR 时，主要的任务是：

1. 创建客户端入口文件：负责将服务器渲染的 HTML 交给客户端，并实现 hydration。
2. 确保客户端和服务器端状态一致：通过 window.__INITIAL_STATE__ 等方式，将服务器端的初始状态传递给客户端。
3. 管理路由和异步数据加载：确保路由和异步请求在客户端和服务器端都能正常工作。
4. 客户端和服务器端的打包配置：使用 Webpack 或 Vite 等工具进行打包，并确保客户端和服务器端的代码分离。
5. 优化性能：如提取 CSS、异步加载等。