小网站关键词搜什么海口网页设计公司排名
目录
序言
一、流程
二、前端要做的事情
三、节点介绍
四、总结
序言
本文不是详细的实现过程，是让你最快最直接的理解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、异步加载等。