Next.js：在客户端水合之前执行异步代码

Question

我需要在客户端动态加载dayjs区域设置。在服务器上，我可以只需要它并且它可以工作，但它总是会导致水合作用不匹配，因为客户端上没有办法等到

import(`dayjs/locale/${locale}.js`)

实际上完成了。我可以以某种方式告诉 next 在开始在客户端上重新水化之前等待导入（因为服务器渲染的 html 实际上是正确的并且使用正确的区域设置渲染）？

Answer 1

我知道已经太长了，可能您找到了解决方案，但这里是我编写的自定义挂钩，它接受回调作为参数，并且在渲染组件之前仅调用一次。并且还返回您在回调中返回的任何内容。

代码很简单。你可以阅读并理解它，甚至改进它。

代码就在这里。要点页面

如果链接将来被破坏，则打字稿代码：

const useComponentWillMount = <T>(cb: () => T): T => {
    const isMountedRef = useRef(false)
    const resultRef = useRef<T>()

    if (!isMountedRef.current && typeof window !== "undefined") {
        resultRef.current = cb()
    }

    isMountedRef.current = true

    return resultRef.current
}