为了解决SEO问题, 我们通常会使用SSR.
但是Vue的SSR对异步数据的渲染有不少门道, 故开一篇文章简单讲讲.
以下内容基于完全使用setup script的情况下讲述.
几个基本点:
- SSR渲染时, 生命周期钩子里只有
beforeCreate和created会被触发. 意味着你不能在其他钩子里执行获取数据的逻辑. - SSR渲染时, 响应式变量不会被触发更新, 渲染状态以逻辑执行时的数据为准. 意味着如果你使用空数据占位, 等到数据到达时更新数据的做法会在SSR时失效.
几个建议:
- 如果你在用响应式变量控制组件的加载状态(
isLoading), 替换成Suspense和Async Setup. 因为isLoading不会触发组件更新, 最后即便你获取到了数据仍然可能渲染出一个骨架屏. - 不要通过监听响应式变量的值变化来控制
Async Function的挂起状态. 同样是出于响应式变量不会更新的原因, 使用响应式变量挂起和恢复Async Function不会起作用, 如果以这种方式去控制Async Setup, 那么就会导致渲染死锁, 而且你几乎无法察觉这件事情, 因为这样做在客户端是能够正常工作的, 但是在服务端是不行的. - 如果你想往子组件里
Provide你的异步数据, 请使用注入一个Ref<Promise>, 而不是 Ref<T | undefined>, 通过Promise, 同样还是因为响应式变量不会触发更新, 你只能通过注入Promise来通知组件数据已经到达.