Web Development
การแก้ปัญหา hydration error ใน Next.js (React)
ใน Next.js จะมีการทำ Pre-rendering ซึ่งเวลาเราใช้งานอาจจะเกิดปัญหา hydration error ได้ ในบทความนี้เราจะมาดูวิธีแก้กัน
21 กันยายน 2023 • 1 นาที
0

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

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 อยู่แล้ว สามารถนำไปใช้ได้เช่นกัน

import dynamic from "next/dynamic";
const NoSSR = dynamic(() => import("../components/no-ssr"), { ssr: false });
export default function Page() {
return (
<div>
<NoSSR />
</div>
);
}
คลิกเพื่อแสดงความคิดเห็น