node.js - 如何在 Gatsby 中使用 React.lazy

Question

如使用 React.lazy在 Gatsby 中制作 production 时会出错( gatsby build )，最好的使用方法是什么 React.lazy和 suspense在 Gatsby 计划中

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 , 如果以上对你不起作用