若getServerSideProps含API缓存值，初始UI能否在Hydration前渲染？

结论：可以，初始UI会在Hydration完成前就显示内容

原因如下：

• 当你使用getServerSideProps且缓存存在有效值时，Next.js会在服务端完成页面的完整渲染：服务端执行getServerSideProps拿到缓存的data后，直接将Page组件渲染成包含所有UI内容的HTML字符串，然后把这个完整的HTML返回给浏览器。
• 浏览器收到HTML后，会立刻解析并渲染出可见的页面内容，这个过程不需要等待Hydration完成。Hydration是后续在后台进行的步骤——它的作用是把静态HTML和React虚拟DOM绑定，给页面添加交互能力（比如点击事件、状态更新），但不影响初始内容的显示。
• 结合你的代码来看：只要getCachedData('config')能返回有效数据，getServerSideProps会直接返回props，服务端瞬间生成带完整内容的HTML，浏览器拿到后马上就能显示UI，用户不会看到空白，Hydration在后台悄悄完成，完成后页面就具备交互性了。

需要注意的是：要保证服务端渲染的HTML和客户端Hydration时生成的内容完全一致，避免出现Hydration不匹配的错误。只要你的缓存数据是稳定的（24小时有效期内不会随意变动），这个问题就不会出现。

内容的提问来源于stack exchange，提问作者Gegenwind