"서버에서 렌더링한 HTML이 클라이언트와 일치하지 않아 하이드레이션에 실패했습니다...."

Next.js를 사용하여 애플리케이션을 구축했다면 위의 오류나 이와 유사한 오류가 발생했을 것입니다. 이를 수화 오류라고 합니다.

Next.js를 처음 시작할 때 이 오류가 발생했지만 무엇을 해야할지 몰랐고 당시에는 내 코드에 실제로 영향을 미치지 않았기 때문에 검색할 생각도 없었습니다. 면접관이 Next.js의 수화 오류를 해결하려면 어떻게 해야 하는지 질문을 받기 전까지는 말이죠. 이제는 면접관이 나를 끌어내리려는 경우가 아니라 무심하고 순전히 무지한 경우이기 때문에 어이가 없었습니다. 나는 당신이 다음 인터뷰에서 나처럼 되지 않기를 바랍니다. 그럼 이제 수분공급에 대해 이야기해보겠습니다.

수화는 정적 HTML에 Javascript를 추가하여 대화형으로 만드는 프로세스입니다. 따라서 일반적으로 웹페이지가 서버에서 렌더링되면 클라이언트에 도달하기 전에 상호작용성과 이벤트 핸들러가 손실됩니다. React는 클라이언트에서 컴포넌트 트리를 구축하는 일을 담당합니다. HTML이 서버 측에서 렌더링될 때 손실된 상호 작용 및 이벤트 핸들러를 추가하기 때문에 이를 하이드레이션이라고 합니다. React는 이를 실제 서버측에서 렌더링된 DOM과 비교합니다. React가 이를 채택할 수 있도록 동일해야 합니다.

우리가 가지고 있는 페이지와 클라이언트 측에서 우리가 가져야 한다고 생각하는 페이지가 일치하지 않으면 "수화 오류"가 발생합니다. 일반적인 수화 오류 원인으로는 잘못된 HTML 요소 중첩, 렌더링에 사용된 다른 데이터, 브라우저 전용 API 사용, 부작용 등이 있습니다.

원인이 무엇이든, 표시되는 오류 메시지를 읽고 원인을 파악해야 합니다. 가능한 해결책은 다음과 같습니다.

1. useEffect를 사용하여 클라이언트에서만 실행합니다.
수화 불일치를 방지하려면 구성 요소가 초기 클라이언트 측 렌더링에서와 마찬가지로 서버 측에서도 동일한 콘텐츠를 렌더링하는지 확인하십시오. useEffect 후크를 사용하여 의도적으로 클라이언트에 콘텐츠를 렌더링할 수 있습니다. 아래 예를 참조하세요.

import { useState, useEffect } from 'react'

export default function App() {
  const [isClient, setIsClient] = useState(false)

  useEffect(() => {
    setIsClient(true)
  }, [])

  return 
{isClient ? 'This is never prerendered' : 'Prerendered'}
}

2. 특정 구성 요소에서 서버 측 렌더링을 비활성화합니다.
특정 구성 요소에 대해 Next.js의 사전 렌더링 비활성화 기능을 사용할 수 있습니다. 이렇게 하면 수화 불일치를 방지할 수 있습니다. 아래 예를 참조하세요.

import dynamic from 'next/dynamic'

const NoSSR = dynamic(() => import('../components/no-ssr'), { ssr: false })

export default function Page() {
  return (
    

      
    
  )
}

3. 수분 공급 억제 경고 사용
타임스탬프와 같이 서버와 클라이언트에서 콘텐츠가 필연적으로 달라지는 경우가 있습니다. 당신이 할 수 있는 일은 요소에 억제HydrationWarning={true}를 추가하여 수화 불일치 경고를 침묵시키는 것입니다.

따라서 이 세 가지 방법을 사용하면 다음에 Next.js를 구축할 때 하이드레이션 오류가 나타날 때 이를 해결할 수 있습니다.

프로그래밍에 대한 더 많은 놀라운 콘텐츠를 보려면 내 페이지를 구독하는 것을 잊지 마세요.