[Next.js] SSR 렌더링 HTML 매칭 에러 해결 방법

Hong·2024년 1월 22일

• ERROR

Expected server HTML to contain a matching <div> in <div>.

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

SSR(Server-Side-Rendering)이 적용된 상태에서 클라이언트 측에서 hydrate 할 때 초기 상태 불일치로 인해 발생한다. 즉 SSR(Server-Side-Rendering)과 CSR(Client-Side-Rendering)을 동시 진행한다.

hydrate란?

서버에서 초기 렌더링되어 클라이언트로 전송되면, 클라이언트에서는 해당 HTML과 관련된 JavaScript 코드를 재사용하고 초기 렌더링된 상태를 가져와서 이를 유지하는 과정을 "Hydration"이라고 한다.

• 해결 방법

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

위 방법과 같이 useEffect를 사용해서 렌더링 후 상태를 업데이트해주어 초기 렌더링에서 서버와 클라이언트의 일관성을 유지시켜줘야 한다.