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、异步加载等。
相关推荐
264玫瑰资源库13 分钟前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端24 分钟前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED30 分钟前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪1 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程1 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常1 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴1 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中1 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木2 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师2 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt