门户网站html下载,广东省广州市白云区人和镇,宝安中心是富人区吗,wordpress主题搜索引擎目录 序言
一、流程
二、前端要做的事情
三、节点介绍
四、总结 序言
本文不是详细的实现过程#xff0c;是让你最快最直接的理解ssr的真正实现方法#xff0c;有前端经验的同学#xff0c;能够很好的理解过程#xff0c;细节根据具体项目实现 一、前端要做的事情
1.…目录 序言
一、流程
二、前端要做的事情
三、节点介绍
四、总结 序言
本文不是详细的实现过程是让你最快最直接的理解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资源文件 5vue3中的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里的数据。 替代方法1http请求2服务端赋给cookie3服务端通过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、异步加载等。
