跳到主要内容

服务端渲染总结问题

谈谈服务端渲染中，遇到的难点？

SSR渲染安全问题​

  • 数据泄露问题
  • 避免将敏感信息暴露在HTML中
    • 任何人都可以通过查看源代码看到HTML结构内容

什么页面需要混合渲染？​

  • 混合渲染是指在同一个页面中，部分内容使用服务端渲染(SSR)，部分内容使用客户端渲染(CSR)，结合两者的优势

  • 系统中涉及到公共的内容数据 → SSR（SEO友好，可缓存）

  • 个性化内容 → CSR（性能好，用户体验佳）

  • 混合渲染 → 基础内容、 公共内容 SSR + 个性化数据CSR

什么页面不需要服务端渲染？​

  • 不需要SEO页面

  • 交互性强，需要实时数据更新

    • 实时数据，服务端渲染没有意义
    • 因为首先是服务端渲染，服务端渲染完之后，再发送给客户端，等到客户端渲染时，数据已经过时了

  • 用户个性化内容数据，不适合服务端渲染

    • 如果使用服务端渲染，那么每个用户个性化数据，都涉及到SSR，造成服务端压力大

什么页面需要服务端渲染？​

  • 首屏页面, 提高首屏渲染速度
  • seo页面，需要搜索引擎抓取内容

ssr阶段获取数据问题​

  • 注意在ssr服务端渲染阶段，无法获取本地缓存中的数据，比如如果要请求接口数据，请求头相关配置放在了浏览器的本地缓存，比如token放在了本地缓存中， 那么在ssr阶段是无法获取的，需要放在cookie中，cookie在服务端就可以获取到

  • SSR 的 Cookie 读取是从请求头读取，而不是从浏览器读取

    • Cookie 是通过 HTTP 请求头自动携带的

    • 在服务端阶段，server 端代码可直接用 req.headers.cookie 读取

主题切换问题​

  • 主题切换应该放在用 Cookie 做 SSR 同步，不要放在localStorage
  • 刷新页面的时候，是走服务端渲染，是无法读取localStorage的，但是可以读取cookie
  • 放在cookie中做主题切换，就可以避免首次渲染/刷新阶段 出现闪烁问题
  • 或者在ssr阶段，设置html的属性主题类型，比如data-theme