Question

在盖茨比使用React.lazy时，制作production（gatsby build）时会出错，使用React.lazy和suspense的最佳方法是什么在盖茨比项目中

Answer 1

React.lazy和Suspense尚未准备好进行服务器端渲染，但是仍然可以通过检查代码是否仅在客户端上执行来使用它们。尽管此解决方案不如可加载组件（可在服务器端和客户端上都可以使用），但它仍提供了处理仅客户端包的替代方法，而没有增加依赖性。请记住，如果在没有isSSR防护的情况下执行以下代码，则它们可能会中断。

import React from "react"
const ClientSideOnlyLazy = React.lazy(() =>
  import("../components/ClientSideOnly")
)
const MyPage = () => {
  const isSSR = typeof window === "undefined"
  return (
    <>
      {!isSSR && (
        <React.Suspense fallback={<div />}>
          <ClientSideOnlyLazy />
        </React.Suspense>
      )}
    </>
  )
}

如果上述方法不适合您，请尝试关注this guide on gatsbyjs.com

如何在盖茨比中使用React.lazy

1 个答案: