Vue 3 的服务端与异步数据获取

最近项目才上线, 打算修一下 SSR 半残的状态. 以下内容是根据实践得出的结论, 不过我还是有点迷糊, 所以分享出来给大家看一下, 如果有错误或者有什么想法可以在下面指正.

内容基于使用 setup script 的情况.

几个基本点:

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

几个建议:

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