如何解決在 React 和 Next.js 中使用客戶端渲染導致的反應水合錯誤？

Question

與React中的useEffect鉤子結合。我的目標是合併客戶端渲染，同時確保防止反應水合錯誤。

據我了解，客戶端渲染需要在客戶端瀏覽器而不是伺服器上渲染元件，從而提高效能和互動性。然而，在過渡到客戶端渲染的過程中，由於初始伺服器端渲染的 HTML 與後續用戶端渲染的元件之間不一致，可能會出現問題，導致 React-Hydration-Errors。

考慮到這種情況，我非常感謝您有效利用 useEffect 掛鉤來實現正確的客戶端渲染而不會遇到任何反應水合錯誤的指導。我正在尋求一種專業的方法來應對這一挑戰，並且非常感謝您可以分享的任何最佳實踐、策略或程式碼範例。

預先感謝您提供的寶貴幫助。

這是我的範例程式碼：

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>

useWindowSize 函數似乎觸發了反應水合錯誤

Answer 1

顯然為了解決這個問題，我只需運行npm install next@latest

#