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、异步加载等。
相关推荐
Maybyy20 分钟前
力扣242.有效的字母异位词
java·javascript·leetcode
遇到困难睡大觉哈哈24 分钟前
CSS中的Element语法
前端·css
Real_man30 分钟前
新物种与新法则:AI重塑开发与产品未来
前端·后端·面试
小彭努力中30 分钟前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts
老马聊技术33 分钟前
日历插件-FullCalendar的详细使用
前端·javascript
zhu_zhu_xia34 分钟前
cesium添加原生MVT矢量瓦片方案
javascript·arcgis·webgl·cesium
咔咔一顿操作35 分钟前
Cesium实战:交互式多边形绘制与编辑功能完全指南(最终修复版)
前端·javascript·3d·vue
coding随想2 小时前
JavaScript中的系统对话框:alert、confirm、prompt
开发语言·javascript·prompt
LuckyLay2 小时前
使用 Docker 搭建 Rust Web 应用开发环境——AI教你学Docker
前端·docker·rust