服务端渲染 SSR 原理和实现

文章目录

CSR 优缺点
SSR
Server + Client 同构
Hydrate 水合（客户端激活）
数据的获取和初始化
预加载资源
避免应用单例
避免全局副作用代码

CSR 优缺点

优点

整个网站打包进 JavaScript 里，当 JavaScript 下载完毕后，相当于网站的页面资源都被下载好了。这样在跳转新页面的时候，不需要向服务器再次请求资源（ JavaScript 会直接操作 DOM 进行页面渲染），从而让整个网站的使用体验上更加流畅

缺点

在 JavaScript 体积较大的情况下，会有白屏问题
因为会先下载一个空的 HTML，然后才通过 JavaScript 进行渲染，这个空的 HTML 会导致某些搜索引擎无法通过爬虫正确获取网站信息，从而影响网站的搜索引擎排名

SSR

优点

HTML 在服务器端就已经渲染好了，浏览器拿到就可以渲染，减少白屏时间
服务器端渲染拥有良好的首屏性能和 SEO

缺点

每次跳转页面都要向服务器重新请求，意味着用户每次切换页面都要等待一小段时间
SSR 相比 CSR 会占用较多的服务器端资源

// 以 vue 为例
import { renderToString } from 'vue/server-renderer'
import { createSSRApp } from 'vue'// 一个计数的 vue 组件
function createApp() {// 通过 createSSRApp 创建一个vue实例return createSSRApp({data: () => ({ count: 1 }),template: `<button @click="count++">{{ count }}</button>`,});
}const app = createApp();// 通过 renderToString 将 vue 实例渲染成字符串
renderToString(app).then((html) => {// 将字符串插入到 html 模板中const htmlStr = `<!DOCTYPE html><html><head><title>Vue SSR Example</title></head><body><div id="app">${html}</div></body></html>`;console.log(htmlStr);
});

Server + Client 同构

开始的步骤和 SSR 相同，将生成的 HTML 字符串返回给客户端，同时将 CSR 需要的 JavaScript 也一并发送给客户端
客户端在接收到 SSR 生成的 HTML 后，页面还会再执行一次 CSR 的流程
客户端只有请求的第一个页面是在服务器端渲染的，其它页面则都是在客户端进行的
这样就同时兼顾首屏、SEO和用户体验的网站

Hydrate 水合（客户端激活）

服务器执行应用的初始渲染，生成静态 HTML，并将其发送给客户端，这一步其实发送的是静态的模版（ Dehydrate 脱水）
客户端加载额外的 JavaScript 代码，并在已有的静态 HTML 上绑定事件监听器等，使页面变得可交互
SSR 的瓶颈也就取决于 Hydrate 的过程

数据的获取和初始化

挂载到 window 上或者 Vuex、Pinia 等其它方案

const htmlStr = `<!DOCTYPE html><html><head>...// 将数据格式化成json字符串，放到script标签中<script>window.__INITIAL_DATA__ = ${JSON.stringify(initData)}</script></head>...</html>
`;

组件中获取数据

function createApp() {return createSSRApp({data: () => ({ count: 1 }),template: `<button @click="count++">{{ count }}</button>`,// 自定义一个名为 asyncData 的函数asyncData: async () => { // 在处理远程数据并 return 出去const data = await getSomeData()return data; },async mounted() {// 如果已经有数据了，直接从 window 中获取if (window.__INITIAL_DATA__) {// 有服务端数据时，使用服务端渲染时的数据this.count = window.__INITIAL_DATA__;window.__INITIAL_DATA__ = undefined;return;} else {// 如果没有数据，就请求数据this.count = await getSomeData();}}});
}

预加载资源

在打包过程中生成 manifest
- 作用是将打包后的模块 ID 与它们关联的 Chunk 和资源文件进行映射
依靠这个 manifest 获取资源的路径，然后创建 Link 标签拼接到 HTML 模板中即可

避免应用单例

服务器端返回给客户端的每个请求都应该是全新的、独立的应用程序实例，避免直接将对象或变量创建在全局作用域，否则它将在所有请求之间共享，在不同请求之间造成状态污染

避免全局副作用代码

比如 vue 服务器端渲染只会执行 beforeCreate 和 created 生命周期，应该避免在这两个生命周期里产生全局副作用的代码
例如使用 setInterval 设置定时器。在纯客户端的代码中，我们可以设置一个定时器，然后在 beforeDestroy 或 destroyed 生命周期中将其销毁。但是在 SSR 期间并不会调用销毁钩子函数，所以定时器将永远保留下来，最终造成服务器内存溢出

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/26383.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！