渲染成功开始 加载图⽚片资源 图⽚片加载成功 ⻚页⾯面可交互 服务端渲染 (SSR) 是什什么？ 渲染: HTML + CSS + JS + Data -> 渲染后的 HTML 服务端： 所有模板等资源都存储在服务端 内⽹网机器器拉取数据更更快 ⼀一个 HTML 返回所有数据 浏览器器和服务器器交互流程 ⽤用户层现 客户端渲染 vs 服务端渲染 ����� ����� �� ����(HTML 友好 SSR 代码实现思路路 服务端 客户端 ·使⽤用 react-dom/server 的 renderToString ⽅方法将 React 组件渲染成字符串串 ·服务端路路由返回对应的模板 ·打包出针对服务端的组件 webpack ssr 打包存在的问题 浏览器器的全局变量量 (Node.js 中没有 document, window) 样式问题 (Node.js ⽆无法解析 忽略略掉 CSS 的解析 ·⽅方案⼆二：将 style-loader 替换成 isomorphic-style-loader 如何解决样式不不显示的问题？ 使⽤用打包出来的浏览器器端 html 为模板 设置占位符，动态插⼊入组件 ⾸首屏数据如何处理理？ 服务端获取数据 替换占位符 当前构建时的⽇日志显示 展示⼀一⼤大堆⽇日志，很多并不不需要开发者关注 统计信息 stats 如何优化命令⾏行行的构建⽇日志

标签 将 CSS 代码插入到 DOM 中 如果开启了 CSS Module，则直接导出成一个 对象，否则导出 CSS 代码 Vite 打包流程 – CSS 资源打包策略 Vite 打包流程 –模板打包策略 @vue/compiler-dom 编译 template，然后返回给浏览器

const json = JSON.stringify(source) .replace(/\u2028/g, ‘\\u2028 ' ) // 为了安全起见, ES6模板字符串的问题 .replace(/\u2029/g, '\\u2029'); return `export default ${json}`; }; src/demo