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

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