目录
序言
本文不是详细的实现过程,是让你最快最直接的理解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 时,主要的任务是:
- 创建客户端入口文件:负责将服务器渲染的 HTML 交给客户端,并实现 hydration。
- 确保客户端和服务器端状态一致 :通过
window.__INITIAL_STATE__
等方式,将服务器端的初始状态传递给客户端。 - 管理路由和异步数据加载:确保路由和异步请求在客户端和服务器端都能正常工作。
- 客户端和服务器端的打包配置:使用 Webpack 或 Vite 等工具进行打包,并确保客户端和服务器端的代码分离。
- 优化性能:如提取 CSS、异步加载等。