ssr实现方案

devtools/2024/12/24 7:02:43/

目录

序言

一、流程

二、前端要做的事情

三、节点介绍

四、总结


序言

本文不是详细的实现过程,是让你最快最直接的理解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、异步加载等。


http://www.ppmy.cn/devtools/144923.html

相关文章

[Effective C++]条款38-39 复合和private继承

本文初发于 “天目中云的小站”,同步转载于此。 条款38 : 通过复合塑膜出has-a或"is-implemented-in-terms-of" 在条款32中我们认识了public继承意味着is-a, 本条款将会认识两个新的关系, 均可通过"复合"这一操作实现出来. 复合 所谓复合, 就是…

漏洞检测工具:允许TRACE方法漏洞

允许TRACE方法漏洞 漏洞定义 TRACE方法是HTTP协议中定义的一种调试方法,主要用于测试或诊断Web服务器连接。Web服务器在配置时未正确禁用HTTP TRACE方法,从而允许客户端向服务器发送TRACE请求,并导致服务器返回可能包含敏感信息的响应。 漏…

无人零售及开源 AI 智能名片 S2B2C 商城小程序的深度剖析

摘要:本文聚焦无人零售这一新兴零售模式及其发展浪潮中崛起的开源 AI 智能名片 S2B2C 商城小程序。深入阐述无人零售的发展态势,细致剖析其驱动因素、现存问题,全面详细介绍小程序的功能特性、应用优势以及对无人零售的潜在价值,旨…

基于Java Web的“使用Ajax实现无刷新实时显示公告信息”实验

1.实验目的 学习和掌握jQuery获取网页元素对象的格式。使用JDBC进行数据库的连接以及使用Statement对象执行SQL查询语句。掌握使用Properties类加载Properties文件中参数的方式。使用<jsp:UseBean>标签创建对象。使用$.get方法向服务器发送请求以及获取服务器中的数据。…

Wux weapp 组件库的 bug—— wux-picker选择器组件无法正确初始化到选定的value

options的value为Number&#xff0c;组件无法正常使用 解决方案&#xff0c;修改picker-view/utils.js中的getIndexFromValue函数&#xff0c;如下&#xff1a; export function getIndexFromValue(value, col [], fieldNames DEFAULT_FIELD_NAMES) {//return getRealIndex(…

MFC/C++学习系列之简单记录2——thread和Release

MFC/C学习系列之简单记录2——thread和Release 前言MFC的Release版本发布Thread的相关知识简单举例使用 引用学习总结 前言 针对最近用到得东西进行记录&#xff01; MFC的Release版本发布 基于VC 6.0平台进行Release版本生成。 Project——>SettingSetting For——>W…

BigBlueButton视频会议 vs 华为云会议的详细对比

BigBlueButton视频会议 vs 华为云会议的详细对比 作者&#xff1a;BBBEasy中国区团队&#xff0c;Github地址&#xff1a;https://github.com/lihaiya/bbbeasy BigBlueButton与华为云会议是两款功能强大且各具特色的视频会议系统。以下是对这两者的详细对比&#xff0c;包括功…

UniApp 应用心得与总结(Android)

UniApp属于跨平台的应用开发框架&#xff0c;在实际的业务应用中给予了开发者友好的体验。其优点主要体现在完善的开发文档&#xff0c;强大的兼容性与参与人数众多丰富的社区资源。经过一段时间的业务运用与体验&#xff0c;我实现了从 零到一的 N 的运用与开发。这篇文章主要…