node.js - วิธีการใช้ React.lazy ใน Gatsby

เมื่อใช้ React.lazy ใน Gatsby คุณจะได้รับข้อผิดพลาดเมื่อสร้าง production (gatsby build) วิธีที่ดีที่สุดในการใช้ React.lazy และ suspense ในโปรเจกต์ Gatsby คืออะไร

คำตอบ #1

React.lazy และ Suspense ยังคงไม่พร้อมสำหรับการเรนเดอร์ด้านเซิร์ฟเวอร์ แต่ยังสามารถใช้งานได้โดยการตรวจสอบให้แน่ใจว่ารหัสถูกเรียกใช้งานบนฝั่งไคลเอนต์เท่านั้น แม้ว่าวิธีแก้ปัญหานี้จะด้อยกว่าการใช้ loadable-components ซึ่งสามารถทำงานได้ทั้งฝั่งเซิร์ฟเวอร์และไคลเอนต์ แต่ก็ยังเป็นทางเลือกในการจัดการแพ็กเกจที่ใช้เฉพาะฝั่งไคลเอนต์ โดยไม่ต้องเพิ่มการพึ่งพา โปรดจำไว้ว่ารหัสต่อไปนี้อาจทำงานผิดพลาดได้หากเรียกใช้งานโดยไม่มีการตรวจสอบ 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 หากข้างต้นไม่สามารถใช้ได้กับคุณ