728x90
728x90

 

Hydration 에러 해결하는 방법 (Next.js 15)

들어가며

  • Next.js 15에서 생성한 프로젝트에서 아래와 같은 Hydration 에러가 발생할 경우 해결하는 방법을 정리해본다.

Console Error

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used

- A server/client branch 'if (typeof window !== 'undefined')'.
- Variable input such as 'Date.now()' or 'Math.random()' which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

 

 

해결 방법

  • @/app/layout.tsx@ 파일의 @<html>@ 요소에 @suppressHydrationWarning@ 속성을 추가해준다.

 

/app/layout.tsx
import type { Metadata } from 'next';

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html
      lang='en'
      suppressHydrationWarning   // 추가
    >
      <body>
      </body>
    </html>
  );
}

 

  • 그래도 동일한 오류가 발생할 경우, 웹 브라우저에 아래와 같은 확장(Extension) 프로그램이 설치되어 있는지 확인한다.
    • 설치되어 있을 경우, 웹 브라우저에서 해당되는 확장 프로그램이 항상 실행되지 않도록 설정해준다.
1 - ColorZilla
2 - Wappalyzer
3 - Urban VPN
4 - LastPass
5 - Hacker Vision
6 - WhatFont
7 - Video Speed Controller for HTML videos
8 - Glot
9 - AI Grammar Checker & Paraphraser – LanguageTool
10 - Grammarly
11 - Invert
12 - Dashlane
...

확장 프로그램이 클릭되었을 때만 실행되도록 설정하는 모습 (Google Chrome)

 

(참고) Hydration

  • 클라이언트에서 렌더링된 리액트 애플리케이션이 서버에서 렌더링된 HTML과 일치하도록 동기화하는 과정
  • Hydration 오류는 서버에서 렌더링된 HTML과 클라이언트에서 리액트가 렌더링한 HTML이 일치하지 않을 때 발생한다.

 

참고 사이트

 

From the nextjs community on Reddit

Explore this post and more from the nextjs community

www.reddit.com

 

Understanding Hydration in Next.js

Next.js is renowned for its robust capabilities in constructing server-side rendered (SSR) and...

dev.to

 

728x90
728x90
저작자표시 비영리 변경금지

'Framework > Next.js' 카테고리의 다른 글

[Next.js] <Link> 컴포넌트 클릭 시, 최상단으로 스크롤 되는 현상 막는 방법  (0) 2024.12.20
[Next.js] 렌더링 방식 정리 (CSR(Client Side Rendering), SSR(Server Side Rendering), SSG(Static Site Generation), ISR(Incremental Static Regeneration))  (14) 2024.11.14
[Next.js] 테마 토글 기능 설정하기 (with shadcn/ui)  (0) 2024.11.05
[Next.js] 갑자기 "'next'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다." 오류가 발생할 때 해결 방법  (0) 2024.10.30
[Next.js] 환경 변수 사용 방법  (1) 2024.10.29
[Next.js] 폴더 구조 및 동적 경로 설정하기  (0) 2024.10.16
[Next.js] 정적 생성(Static Generation)과 서버사이드 렌더링(Server-side Rendering)  (0) 2024.08.08
[Next.js] 메타데이터(Metadata) 추가하기  (0) 2024.08.07

티스토리툴바