Zapic's Blog
Vue 3 中的服务端渲染(SSR)与异步数据获取
2022-04-08
编程
查看标签

为了解决SEO问题, 我们通常会使用SSR.
但是Vue的SSR对异步数据的渲染有不少门道, 故开一篇文章简单讲讲.

以下内容基于完全使用setup script的情况下讲述.

几个基本点:

  1. SSR渲染时, 生命周期钩子里只有beforeCreatecreated会被触发. 意味着你不能在其他钩子里执行获取数据的逻辑.
  2. SSR渲染时, 响应式变量不会被触发更新, 渲染状态以逻辑执行时的数据为准. 意味着如果你使用空数据占位, 等到数据到达时更新数据的做法会在SSR时失效.

几个建议:

  1. 如果你在用响应式变量控制组件的加载状态(isLoading), 替换成SuspenseAsync Setup. 因为isLoading不会触发组件更新, 最后即便你获取到了数据仍然可能渲染出一个骨架屏.
  2. 不要通过监听响应式变量的值变化来控制Async Function的挂起状态. 同样是出于响应式变量不会更新的原因, 使用响应式变量挂起和恢复Async Function不会起作用, 如果以这种方式去控制Async Setup, 那么就会导致渲染死锁, 而且你几乎无法察觉这件事情, 因为这样做在客户端是能够正常工作的, 但是在服务端是不行的.
  3. 如果你想往子组件里Provide你的异步数据, 请使用注入一个Ref<Promise>, 而不是Ref<T | undefined>, 通过Promise, 同样还是因为响应式变量不会触发更新, 你只能通过注入Promise来通知组件数据已经到达.