Bagaimana untuk membetulkan ralat React Hydration yang disebabkan oleh menggunakan pemaparan sisi klien dalam React dan Next.js?

Question

Bersepadu dengan cangkuk useEffect dalam React. Matlamat saya adalah untuk menggabungkan pemaparan sebelah pelanggan sambil memastikan bahawa ralat penghidratan tindak balas dicegah.

Seperti yang saya fahami, pemaparan sisi klien memerlukan komponen untuk dipaparkan pada penyemak imbas pelanggan dan bukannya pelayan, sekali gus meningkatkan prestasi dan interaktiviti. Walau bagaimanapun, semasa peralihan kepada pemaparan bahagian klien, isu boleh timbul disebabkan oleh ketidakkonsistenan antara HTML yang diberikan bahagian pelayan awal dan komponen yang diberikan sebelah pelanggan seterusnya, mengakibatkan React-Hydration-Error.

Dengan mengambil kira situasi ini, saya amat menghargai panduan anda tentang menggunakan cangkuk useEffect secara berkesan untuk mencapai pemaparan sebelah pelanggan yang betul tanpa menghadapi sebarang ralat penghidratan tindak balas. Saya sedang mencari pendekatan profesional untuk cabaran ini dan sangat menghargai mana-mana amalan terbaik, strategi atau contoh kod yang boleh anda kongsikan.

Terima kasih terlebih dahulu atas bantuan berharga anda.

Ini adalah kod sampel saya:

https://nextjs.org/docs/messages/react-Hydration-error

"use client"
import Image from 'next/image';
import Link from 'next/link';
import React, { useState, useEffect } from 'react';
import { AiOutlineClose, AiOutlineMenu } from 'react-icons/ai';
import { motion, useScroll } from 'framer-motion';
import logo from '../public/logo_navbar_adobe_express.svg';
import { variants } from '../utils/motion';
import { BsArrowRightCircle } from 'react-icons/bs'
import styles from '../styles';

function useWindowSize(nav, setNav) {
  const [windowSize, setWindowSize] = useState([0, 0]);

  useEffect(() => {
    function updateWindowSize() {
      setWindowSize([window.innerWidth, window.innerHeight]);
      if (window.innerWidth >= 768 && nav) {
        setNav(false);
      }
    }

    window.addEventListener('resize', updateWindowSize);
    updateWindowSize();

    return () => window.removeEventListener('resize', updateWindowSize);
  }, [nav, setNav]);

  return windowSize;
}

const Navbar = () => {
  const [nav, setNav] = useState(false);
  const windowSize = useWindowSize(nav, setNav);
  const isMobile = windowSize[0] < 768;
  const handleNav = () => {
    setNav(!nav);
  };

  /** this hook gets the scroll y-axis **/
  const { scrollY } = useScroll();
  /** this hook manages state **/
  const [hidden, setHidden] = React.useState(false);

  /** this onUpdate function will be called in the `scrollY.onChange` callback **/
  function update() {
    if (scrollY?.current < scrollY?.prev) {
      setHidden(false);
    } else if (scrollY?.current > 100 && scrollY?.current > scrollY?.prev) {
      setHidden(true);
    }
  }

  /** update the onChange callback to call for `update()` **/
  useEffect(() => {
    return scrollY.onChange(() => update());
  }, [scrollY]); // Add scrollY as a dependency


  return (
    <motion.nav
    
      variants={variants}
      initial="hidden"
      animate={hidden ? 'hidden' : 'visible'}
      /** I'm also going to add a custom easing curve and duration for the animation **/
      transition={{ ease: [0.1, 0.25, 0.3, 1], duration: 0.6 }}
      className={`navbar-bg dark:bg-gray-900 fixed w-full z-20 top-0 left-0`}
    >
      <div className="absolute w-[20%] inset-0 gradient-01" />
      <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
        <Link href="/">
          <Image
            src={logo}
            alt="/"
            className="cursor-pointer"
            width="175"
            height="175"
          />
        </Link>

fungsi useWindowSize nampaknya mencetuskan ralat penghidratan tindak balas

Answer 1

Jelas sekali untuk membetulkan ini saya hanya menjalankan npm install next@latest