Web Development

การแก้ปัญหา hydration error ใน Next.js (React)

ใน Next.js จะมีการทำ Pre-rendering ซึ่งเวลาเราใช้งานอาจจะเกิดปัญหา hydration error ได้ ในบทความนี้เราจะมาดูวิธีแก้กัน

21 กันยายน 20231 นาที
0
การแก้ปัญหา hydration error ใน Next.js (React)
Table of Contents

useEffect

แน่นอนว่าพอใช้ useEffect มันก็จะทำงานฝั่ง Client จากนั้นเราก็ค่อย render สิ่งที่เราอยากให้ทำงานจากฝั่ง Client เท่านั้น

React Logo
import { useState, useEffect } from "react"; export default function App() { const [isClient, setIsClient] = useState(false); useEffect(() => { setIsClient(true); }, []); return <h1>{isClient ? "This is never prerendered" : "Prerendered"}</h1>; }

next/dynamic

ถ้าใครที่ใช้ Next.js อยู่แล้ว จะมี next/dynamic ติดมากับ Next.js อยู่แล้ว สามารถนำไปใช้ได้เช่นกัน

React Logo
import dynamic from "next/dynamic"; const NoSSR = dynamic(() => import("../components/no-ssr"), { ssr: false }); export default function Page() { return ( <div> <NoSSR /> </div> ); }

คลิกเพื่อแสดงความคิดเห็น