안녕하세요, 웹 프론트엔드 개발자 Garden, 오소현입니다.

최근에 친한 개발자분들과 함께 시나브로 자바스크립트 강의 스터디를 진행하게 되었어요 :)
저희의 스터디 레포는 아래와 같아요!

https://github.com/The-survivor-is-strong/sinabro-js

Next.js 렌더링과 Hydration :)

Next.js는 React 기반의 인기 있는 프레임워크로, CSR(Client-side Rendering), SSR(Server-side Rendering), SSG(Static Site Generation)과 같은 다양한 렌더링 방식을 제공합니다. 이 글에서는 Next.js의 렌더링 원리를 자세히 살펴보고, Hydration 개념과 이로 인해 발생할 수 있는 에러의 원인과 해결법까지 심도 있게 이해해 보겠습니다.

1. SSR vs CSR의 개념과 차이점

📌 SSR(Server-side Rendering)

서버에서 HTML을 미리 렌더링한 뒤 클라이언트에 전달하는 방식입니다.

• 사용자는 즉시 화면을 볼 수 있지만, JavaScript가 로드될 때까지는 상호작용이 불가능합니다.
• SEO에 유리하며 첫 페이지 로딩이 빠릅니다.
• 매 요청마다 서버에서 렌더링이 이루어지므로 서버 자원을 많이 사용합니다.

📌 CSR(Client-side Rendering)

클라이언트에서 JavaScript를 통해 렌더링하는 방식입니다.

• 처음에는 빈 화면만 보이며, 모든 리소스가 로드된 이후 화면을 볼 수 있고 상호작용 가능합니다.
• 페이지 간 이동 속도가 빠르며 서버 자원을 적게 사용합니다.
• 초기 로딩 속도가 느리며, SEO에 취약할 수 있습니다.

2. Next.js의 렌더링 방식 (SSR, SSG, CSR)

Next.js는 크게 세 가지 렌더링 방식(SSR, SSG, CSR)을 모두 사용할 수 있는 유연한 프레임워크입니다.

📌 Pre-rendering이란?

Next.js는 기본적으로 모든 페이지를 미리 렌더링(Pre-render)하는데요, 즉 사용자의 요청이 오기 전에 서버에서 HTML을 미리 생성하고 이를 클라이언트에게 전달하는 방식을 사용합니다. 사용자는 미리 만들어진 HTML 덕분에 즉시 화면을 볼 수 있어서 초기 사용자 경험이 매우 좋아집니다.

📌 SSG(Static-site Generation)

SSG 방식은 빌드 타임에 HTML을 미리 생성하고 이를 재사용하는 방식이에요. 따라서 데이터가 거의 변하지 않는 블로그나 문서, 제품 소개 페이지 등에 적합하며, 속도와 보안 측면에서도 뛰어난 성능을 제공합니다.

📌 SSR(Server-side Rendering)

SSR은 사용자의 요청마다 서버에서 HTML을 새로 만들어 전달하는 방식이에요. 주로 뉴스 사이트, 커뮤니티 게시판처럼 실시간으로 자주 업데이트되는 최신 콘텐츠가 필요한 곳에 적합합니다.

📌 Next.js는 SPA?

사실 Next.js는 SPA(Single Page Application)의 형태를 유지하면서도 CSR과 SSG를 기본으로 지원합니다. 필요한 경우 SSR을 선택적으로 적용할 수 있으며, 페이지 간 이동 시 전체 페이지를 로딩하지 않고 필요한 데이터만을 업데이트해주어 효율적인 페이지 전환과 빠른 사용자 경험을 제공해줍니다.

3. Hydration의 개념과 필요성

Next.js를 이해할 때 중요한 개념이 바로 Hydration입니다.

📌 Hydration이란?

Hydration은 서버에서 미리 렌더링된 HTML에 클라이언트에서 로드된 JavaScript를 매칭하여 상호작용 가능한(interactive) 페이지로 변환하는 과정입니다. ReactDOM.hydrate()를 이용해 기존 HTML에 이벤트 리스너를 연결해주는 방식으로 동작합니다.

🚿 Hydration의 과정

1. 서버에서 HTML을 렌더링하여 클라이언트에 전달합니다.
2. 클라이언트는 전달받은 HTML을 즉시 렌더링합니다.
3. ReactDOM.hydrate()를 통해 JavaScript를 HTML에 연결하여 인터랙션을 활성화합니다.
4. Hydration 과정이 끝나면 상호작용 가능한 웹 페이지가 됩니다.

🚀 React 18의 새로운 접근법

React 18에서는 이러한 문제를 해결하기 위해 Streaming HTML과 Selective Hydration 개념을 도입했습니다.

📌 Streaming HTML

• 서버에서 HTML을 스트리밍 방식으로 전달하여, 데이터가 준비되지 않은 부분을 제외하고 우선적으로 사용자에게 제공 가능합니다.

<Suspense fallback={<Spinner />}>
  <Comments />
</Suspense>

위처럼 데이터를 기다리지 않고, 준비가 된 부분부터 먼저 렌더링하여 사용자 경험을 개선합니다.

📌 Selective Hydration

• 클라이언트에서 특정 부분만 선택적으로 Hydration을 진행합니다.
• 이를 통해 긴 로딩 시간을 줄이고 사용자가 빠르게 상호작용을 시작할 수 있도록 돕습니다.

const Comments = lazy(() => import("./Comments.js"));
 
<Suspense fallback={<Spinner />}>
  <Comments />
</Suspense>

특정 컴포넌트를 lazy 로딩 방식으로 처리하여 JavaScript 번들의 크기를 줄이고 효율성을 높입니다.

Next.js는 다양한 렌더링 방식을 제공하며, 특히 Pre-rendering과 Hydration 개념을 통해 성능과 사용자 경험을 높입니다! React 18의 개선점은 기존 Hydration의 한계를 보완하여 더욱 효율적이고 빠른 웹 애플리케이션 개발을 가능하게 합니다. 우리는 이러한 개념을 잘 이해하고 활용함으로써 더 나은 웹 서비스를 제공할 수 있습니다!