如何在 Gatsby 中使用 React.lazy

IT技术 node.js reactjs typescript gatsby
2021-05-05 21:56:13

React.lazy在 Gatsby 中使用时,您会在制作production( gatsby build)时出错React.lazysuspense在 Gatsby 项目中使用使用的最佳方法是什么

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>
      )}
    </>
  )
}

如果以上方法对您不起作用请尝试在 gatsbyjs.com 上遵循本指南