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