Vue.js设计与实现阅读笔记（十二）

服务端渲染

18.同构渲染

18.1CSR、SSR以及同构渲染

	SSR	CSR	同构渲染
SEO	友好	不友好	友好
白屏问题	无	有	无
占用服务端资源	多	少	中
用户体验	差	好	好

18.2将虚拟DOM渲染为HTML字符串

将标签渲染为字符串时，需要考虑：

• 自闭合标签的处理。对于自闭合标签，无须为其渲染闭合标签部分，也无须处理其子节点。
• 属性名称的合法性，以及属性值的转义。
• 文本子节点的转义。

18.3将组件渲染为HTML字符串

渲染组件时，需要考虑：

• 服务端渲染不存在数据变更后的重新渲染，所以无须调用reactive函数对data等数据进行包装，也无须使用shallowReactive函数对props数据进行包装。正因如此，也无须调用beforeUpdate和updated钩子。
• 服务端渲染时，由于不需要渲染真实DOM元素，所以无须调用组件的beforeMount和mounted钩子。

18.4客户端激活的原理

在同构渲染过程中，组件的代码会分别在服务端和浏览器中执行一次。在服务端，组件会被渲染为静态的HTML字符串，并发送给浏览器。浏览器则会渲染由服务端返回的静态的HTML内容，并下载打包在静态资源中的组件代码。当下载完毕后，浏览器会解释并执行该组件代码。当组件代码在客户端执行时，由于页面中已经存在对应的DOM元素，所以渲染器并不会执行创建DOM元素的逻辑，而是会执行激活操作。激活操作可以总结为两个步骤：

• 在虚拟节点与真实DOM元素之间建立联系，即vnode.el = el。这样才能保证后续更新程序正确运行。
• 为DOM元素添加事件绑定。

18.5编写同构的代码

在通过Vite搭建的同构项目中，可以使用环境变量import.meta.env.SSR来判断当前代码的运行环境。
编写同构的组件代码时要注意：

• 注意组件的生命周期。beforeUpdate、updated、beforeMount、mounted、beforeUnmount、unmounted等生命周期钩子函数不会在服务端执行。即，只执行beforeCreate和created钩子函数。
• 使用跨平台的API。由于组件的代码既要在浏览器中运行，也要在服务器中运行，所以编写组件代码时，要额外注意代码的跨平台性。通常在选择第三方库的时候，会选择支持跨平台的库，例如使用Axios作为网络请求库。
• 特定端的实现。无论在客户端还是在服务端，都应该保证功能的一致性。例如，组件需要读取cookie信息。在客户端，可以通过document.cookie来实现读取；而在服务端，则需要根据请求头来实现读取。所以，很多功能模块需要为客户端和服务端分别实现。
• 避免交叉请求引起的状态污染。状态污染既可以是应用级的，也可以是模块级的。对于应用，应该为每一个请求创建一个独立的应用实例。对于模块，应该避免使用模块级的全局变量。这是因为在不做特殊处理的情况下，多个请求会共用模块级的全局变量，造成请求间的交叉污染。
• 仅在客户端渲染组件中的部分内容。这需要自行封装<ClientOnly>组件，被该组件包裹的内容仅在客户端才会被渲染。