服务端渲染

同构应用

环境区分

服务端和客户端所处环境有些许区别,打包时要根据不同环境打包出对应的资源

路由代码

  • 服务端从请求对象中获取路径,需要先从请求对象中提取出路径之后再通过上下文传递进应用之中
  • 客户端从全局路由对象中获取路径进行匹配

打包

  • 服务端的依赖可以直接从依赖中获取,而客户端则需要把所有依赖打包到对应的 chunk
  • 服务端不关心样式问题,而客户端需要加载对应的样式
  • 分环境进行打包时,会导致部分资源重复打包和覆盖

注水和脱水

服务端渲染时可能会通过接口请求数据,并保存准备好的数据状态,避免客户端做重复的请求

  • 脱水:服务端返回 HTML 时需要把数据状态通过字符串的形式保存在 HTML 字符串中。
  • 注水:客户端通过 HTML 中格式化后的数据初始化状态。

服务端请求

  • 通过配置文件的方式统一声明服务端需要请求的数据
  • 通过组件静态方法统一处理请求(需要框架遍历每个组件的属性去请求数据)

请求认证

服务端请求时不会自动携带客户端传递来的信息(例如 cookie) ,需要手动把请求中的字段提取出来放入服务端的请求中

样式处理

服务端渲染时不需要样式,但是客户端渲染时需要处理样式问题,若通过外部引入会造成在客户端样式的抖动

meta tags 处理

客户端和服务端渲染时有时需要动态修改 head 里的信息(SEO)

404 处理

当服务端匹配不到页面时,应该返回一个 404 的状态码和对应的内容

安全问题

上述注水和脱水过程中容易存在 script 脚本注入的风险,在序列化之前需要对对象做转义

性能优化

  • 缓存
  • 单服务改为服务集群
  • 服务压力过大时改成客户端渲染
  • 升级 Nodejs