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字符串，

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

复制代码

服务端：
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、异步加载等。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。