以下是首次渲染过程大致流程图, 点击查看大图
CSS 处理
现在我们已经完成了最核心的逻辑, 但是有一个问题. 我发现在后端渲染组件的时候, style-loader 会报错, style-loader 会找到组件依赖的 CSS, 并在组件加载时, 把 style 载入到 html header 中, 但是我们在服务端渲染的时候, 没有 Windows 对象, 因此 style-loader 内部代码会报错. 服务端 webpack 需要移除 style-loader, 用其他方法代替, 后来我把样式赋值给组件静态变量, 然后通过服务端渲染一并返回给前端, 但是有个问题, 我只能拿到当前组件的样式, 子组件的样式没办法拿到, 如果要给子组件再添加静态方法, 再想办法去取, 那就太麻烦了. 后来我找到了一个库 isomorphic-style-loader 可以支持我们想要的功能, 看了下它的源码和使用方法, 通过高阶函数把样式赋值给组件, 然后利用 react 的 Context, 拿到当前需要渲染的所有组件的样式, 最后把 style 插入到 HTML 中, 这样解决了子组件样式无法导入的问题. 但是我觉得有点麻烦, 首先需要定义所有组件的高阶函数和引入这个库, 然后在 router 之中需要写相关代码收集 style, 最后插入到 HTML 中. 后来我定义了一个 ProcessSsrStyle 方法, 入参是 style 文件, 逻辑是判断环境, 如果是服务端把 style 加载到当前组件的 dom 中, 如果是客户端就不处理 (因为客户端有 style-loader). 实现和使用非常简单, 如下:
ProcessSsrStyle.JS
使用:
服务端返回 HTML 的内容如下, 用户马上能够看到完整的页面样式, 而当客户端 react 同构完成后, dom 会被替换为纯 dom, 因为 ProcessSsrStyle 方法在客户端不会输出 style, 最终 style-loader 执行后 header 中也会有样式,, 页面不会出现不一致的变化, 对于用户来说这一切都是无感的.
至此, 最核心的功能已经实现, 但是在后来的开发中, 我发现事情还并没有那么简单, 因为开发环境似乎太不友好了, 开发效率低, 需要手动重启.
开发环境
先说说最初的开发环境如何工作:
NPM run dev 启动开发环境
webpack.client-dev.JS 打包服务端代码, 代码会被打包到 dist/server 中
webpack.server-dev.JS 打包客户端代码, 代码会被打包到 dist/client 中
启动服务端应用, 端口 9999
启动 webpack-dev-server, 端口 8888
webpack 打包后, 启动了两个服务, 一个是服务端的 App 应用, 端口为 9999, 一个是客户端的 dev-server, 端口为 8888,dev-server 会监听和打包 client 代码, 可以在客户端代码更新的时候, 实时热更新前端代码. 当访问 localhost:9999 时, server 会返回 HTML, 我们的 server 返回的 HTML 中的 JS 脚本路径是指向的 dev-serve 端口的地址, 如下图. 也就是说, 客户端的程序和服务端的程序被分别打包, 并且运行两个不同的端口服务.
在生产环境下, 因为不需要 dev-server 去监听和热更新, 因此只一个服务就足够, 如下图, 服务端注册静态资源文件夹:
server/App.JS
目前的构建系统, 区分了生产环境和开发环境, 现在的开发环境构建是没有什么问题的. 但是开发环境问题就比较明显, 存在的最大问题是服务端没有热更新或者重新打包重启. 这样会导致很多问题, 最严重的就是前端已经更新了组件, 但是服务端并没有更新, 所以在同构的时候会出现不一致, 就会导致报错, 有些报错会影响运行, 解决办法只有重启. 这样的开发体验是无法忍受的. 后来我开始考虑做服务端的热更新.
监听, 打包, 重启
最初我的方法是监听修改, 打包然后重启应用. 还记得我们的 client/router/pages.JS 文件吗, 客户端和服务端的路由都引入了这个文件, 所以服务端和客户端的打包依赖都有 pages.JS, 因此所有 pages 的组件相关的依赖都可以被客户端和服务端监听, 当一个组件更新了, dev-server 已经帮助我们监听和热更新了客户端代码, 现在我们要自己来处理以下如何更新和重启服务端代码. 其实方法很简单, 就是在服务端打包配置里开启监听, 然后在插件配置中, 写一个重启的插件, 插件代码如下:
当 webpack 首次运行之后, 插件会启动一个子进程, 运行 App.JS, 当文件发生变动后, 再次编译, 判断是否有子进程, 如果有杀掉子进程, 然后重启子进程, 这样就实现了自动重启. 因为客户端和服务端是两个不同的打包服务和配置, 当文件被修改, 他们同时会重新编译, 为了保证编译后运行符合预期, 要保证服务端先编译完成, 客户端后编译完成, 所以在客户端的 watch 配置里, 增加一点延迟, 如下图, 默认是 300 毫秒, 所以服务端是 300 毫秒后执行编译, 而客户端是 1000 毫秒后执行编译.
现在解决了重启问题, 但是我觉得还不够, 因为在开发的大部分时间里 pages.JS 中组件, 也就是展示端的代码更新频率会很高, 如果老是去重启编译后端的代码, 我觉得效率太低. 因此我觉得再做一次优化.
抽离 client/router/pages 单独打包
流程应该是这样的, 增加一个 webpack.server-dev-pages.JS 配置文件, 单独监听和打包出 dist/pages, 服务端代码判断如果是开发环境, 在路由监听方法中每次执行都重新获取 dist/pages 包, 服务端监听配置忽略 client 文件夹. 看起来有点懵逼, 其实最终的效果就是当 pages 中依赖的组件发生了更新, webpack.server-dev-pages.JS 重新编译并打包到 dist/pages 中, 服务端 App 不编译和重启, 只需要在服务端 App 路由中重新获取最新的 dist/pages 包, 就保证了服务应用更新了所有客户端组件, 而服务端应用并不会编译和重启. 当服务端本身的代码发生了修改, 还是会自动编译和重启. 所以最终我们的开发环境需要启动 3 个打包配置
- webpack.server-dev-pages
- webpack.server-dev
- webpack.client-dev
server/router, 如何清除和更新 pages 包
至此, 比较满意的开发环境基本实现了. 后来又觉得每次更新 CSS 都需要去重新打包后端的 pages 也没有必要, 加上同构的时候 CSS 不一致, 仅仅只有警告, 没有实质影响, 因此我在 server-dev-pages 中忽略了 Less 文件 (因为我用的 Less). 这样会导致一个问题, 因为没有更新 pages, 所以页面会刷新时会先展示旧的样式, 然后同构完成又立马变成新样式, 在开发环境中这一瞬间是可以接受的, 也不影响什么. 但是避免了无谓的编译.
没有做的事情
封装成一个更有包裹性的三方脚手架
CSS 作用域控制
封装性更强的 webpack 配置
开发环境下, 图片路径会出现不一致
最初做自己小站的目的是学习, 加上自己使用, 因此有太多个性的东西. 从自己的小站中抽离了出来, 已经删去了很多包和代码, 只为了让他人更能快速理解其中的核心代码. 代码中有很多注释都能帮助他人理解, 如果大家想使用当前库开发一个自己的小站, 是完全可以的, 也可以帮助大家更好的理解它. 如果是用于商业项目, 推荐 nextjs. CSS 没有做作用域控制, 因此如果想隔离作用域, 手动添加上层 CSS 隔离, 比如. index{ ..... } 包裹一层, 或者尝试自己引入三方包. webpack 通用的配置可以封装成一个文件, 然后在每个文件里引入, 再个性修改. 但是之前看其他代码的时候发现, 这种方法, 会增加阅读难度, 加上本身配置内容不多, 所以不做封装, 看起来更直观. 开发环境下, 图片路径会出现不一致, 比如客户端地址请求地址是 localhost...assets/xx.jpg, 而服务端是 assets/xx.jpg, 可能会有警告, 但是不影响. 因为只是一个是绝对路径, 一个是相对路径.
最后
对于这次的 ssr 服务端渲染的实现还是挺满意的, 也花费了挺多时间. 感受下加载速度吧, 欢迎访问大诗人小站, https://dashiren.cn/ . 部分页面有接口请求, 比如 https://dashiren.cn/space , 加载速度依然很快.
仓库已经准备好, 下载下来试试吧, 安装依赖后, 运行命令即可. https://github.com/zimv/react-ssr
码字不易, 点个赞吧~
来源: https://www.cnblogs.com/1wen/p/10282786.html