Next.js의 사전 렌더링(Pre-rendering) 완벽 가이드

Next.js는 React 기반 프레임워크로, 기존 React의 클라이언트 사이드 렌더링(CSR) 방식의 한계를 극복하기 위해 사전 렌더링(Pre-rendering) 기능을 제공합니다. 이 글에서는 Next.js의 사전 렌더링이 무엇인지, 그리고 이것이 어떻게 CSR의 단점을 효과적으로 해결하는지 자세히 알아보겠습니다.

렌더링의 두 가지 의미 이해하기

렌더링이라는 용어는 웹 개발에서 두 가지 다른 의미로 사용됩니다:

1. JS 실행(렌더링): JavaScript 코드를 HTML로 변환하는 과정

2. 화면에 렌더링: HTML 코드를 브라우저가 화면에 실제로 그려내는 작업

이 두 가지 개념을 구분하는 것이 중요합니다. 사전 렌더링은 첫 번째 의미의 렌더링, 즉 JavaScript를 HTML로 변환하는 작업을 서버에서 미리 수행한다는 의미입니다.

React의 CSR(Client Side Rendering) 작동 방식

React의 기본 렌더링 방식인 CSR은 다음과 같은 과정으로 작동합니다:

1. 사용자가 웹 페이지에 접속하면 브라우저를 통해 초기 접속 요청을 서버에 보냅니다.

2. 서버는 거의 비어있는 HTML 파일(예: index.html)을 브라우저에 전송합니다.

3. 브라우저는 이 HTML 파일을 렌더링하지만, 초기에는 거의 빈 화면만 표시됩니다.

4. 서버는 후속으로 모든 React 컴포넌트와 로직이 포함된 JavaScript 번들 파일을 전송합니다.

5. 브라우저는 이 JavaScript 파일을 다운로드하고 실행하여 실제 콘텐츠를 렌더링합니다.8

CSR의 장점과 단점

CSR의 장점

1. 풍부한 사용자 인터페이스: 동적이고 인터랙티브한 사용자 경험을 제공합니다.5

2. 페이지 이동이 빠르고 쾌적함: 초기 로드 후에는 필요한 데이터만 가져와 페이지를 업데이트하므로 전체 페이지를 다시 로드할 필요가 없습니다.5

3. 서버 부하 감소: 렌더링 작업이 클라이언트 측에서 이루어지므로 서버 부하가 줄어듭니다.5

4. 개발 및 유지보수 용이성: 프론트엔드와 백엔드를 분리하여 개발할 수 있습니다.3

CSR의 단점

1. 초기 로딩 시간 증가: JavaScript 번들을 다운로드하고 실행해야 하므로 초기 페이지 로드 시간이 길어집니다.58

2. SEO에 불리: 검색 엔진 크롤러가 JavaScript로 렌더링된 콘텐츠를 제대로 인식하지 못할 수 있습니다.45

3. 빈 HTML 문제: 초기에는 거의 비어있는 HTML만 제공되어 사용자가 콘텐츠를 보기까지 시간이 걸립니다.48

4. 사용자 이탈률 증가: 페이지 로딩 시간이 길어질수록 사용자 이탈률이 크게 증가합니다. 5초 이상 로딩 시 이탈률 90% 증가, 10초 이상 시 123% 증가합니다.8

Next.js의 사전 렌더링(Pre-rendering)

Next.js는 CSR의 단점을 해결하기 위해 사전 렌더링이라는 개념을 도입했습니다. 사전 렌더링은 서버 측에서 모든 React 컴포넌트를 미리 HTML로 변환한 후 브라우저에 전달하는 방식입니다.8

사전 렌더링의 작동 방식

1. 사용자가 브라우저를 통해 초기 접속 요청을 보냅니다.

2. 서버는 서버 측에서 JavaScript로 작성된 React 컴포넌트들을 직접 실행시켜 HTML로 변환합니다.

3. 변환된 HTML 파일을 브라우저에 응답으로 보냅니다.

4. 사용자는 접속하자마자 완성된 콘텐츠를 볼 수 있습니다.

5. 서버는 후속으로 React 앱 전체를 번들링한 JavaScript 파일을 브라우저로 전송합니다.

6. 브라우저에서 JavaScript가 로드되면 ‘하이드레이션(Hydration)’이라는 과정을 통해 정적 HTML이 완전한 인터랙티브 React 앱으로 전환됩니다.18

하이드레이션(Hydration)이란?

하이드레이션은 서버에서 생성된 정적 HTML을 클라이언트에서 완전히 상호작용이 가능한 React 애플리케이션으로 ‘되살리는’ 과정입니다. 서버에서 생성된 초기 HTML이 클라이언트에 전달되고 브라우저는 즉시 화면에 렌더링합니다. 이 시점에서는 페이지는 보이지만 상호작용은 불가능합니다. 이후 React의 JavaScript 코드가 실행되면서 이벤트 리스너를 연결하고, 정적인 HTML이 동적인 React 애플리케이션이 됩니다.3

Next.js의 두 가지 사전 렌더링 방식

Next.js는 두 가지 형태의 사전 렌더링을 제공합니다:

1. 정적 생성(Static Generation, SSG)

• HTML이 빌드 시점에 생성됩니다.

• 생성된 HTML은 각 요청마다 재사용됩니다.

• CDN에 캐싱되어 성능이 매우 뛰어납니다.

• 블로그 포스트, 마케팅 페이지, 제품 목록 등 자주 변경되지 않는 콘텐츠에 적합합니다.179

2. 서버 사이드 렌더링(Server-side Rendering, SSR)

• HTML이 각 요청마다 생성됩니다.

• 항상 최신 데이터를 보여줘야 하는 동적 콘텐츠에 적합합니다.

• 사용자별 맞춤형 콘텐츠, 실시간 데이터가 필요한 페이지에 유용합니다.179

사전 렌더링의 장점

1. 향상된 초기 로딩 속도: 사용자는 JavaScript가 로드되기 전에도 콘텐츠를 볼 수 있습니다.68

2. SEO 최적화: 검색 엔진 크롤러가 완전히 렌더링된 HTML을 쉽게 인덱싱할 수 있습니다.16

3. 사용자 경험 개선: 콘텐츠가 더 빨리 표시되어 사용자 이탈률을 줄일 수 있습니다.8

4. 접근성 향상: JavaScript가 비활성화된 환경에서도 기본 콘텐츠를 볼 수 있습니다.1

Next.js에서 사전 렌더링 확인하기

Next.js의 사전 렌더링이 실제로 작동하는지 확인하는 방법은 다음과 같습니다:

1. 브라우저에서 JavaScript를 비활성화합니다.

2. Next.js로 만든 페이지에 접속합니다.

3. 콘텐츠가 여전히 표시된다면, 사전 렌더링이 제대로 작동하고 있는 것입니다.

반면, 일반 React 앱(Next.js 없이)에서는 JavaScript를 비활성화하면 “You need to enable JavaScript to run this app”과 같은 메시지만 표시됩니다.1

언제 어떤 렌더링 방식을 선택해야 할까?

정적 생성(SSG)이 적합한 경우

• 마케팅 페이지, 블로그 포스트, 제품 목록 등 빌드 시점에 미리 렌더링할 수 있는 페이지

• 사용자 요청 전에 미리 렌더링할 수 있는 페이지

• SEO가 중요한 페이지56

서버 사이드 렌더링(SSR)이 적합한 경우

• 사용자별 맞춤형 대시보드와 같이 요청 시점의 데이터가 필요한 페이지

• 자주 업데이트되는 데이터를 표시하는 페이지

• 사용자 인증이 필요한 페이지56

클라이언트 사이드 렌더링(CSR)이 적합한 경우

• 사용자 대시보드와 같은 높은 상호작용이 필요한 페이지

• 실시간 데이터를 다루는 애플리케이션

• SEO가 중요하지 않은 비공개 페이지45

하이브리드 렌더링 접근법

Next.js의 강점 중 하나는 같은 애플리케이션 내에서 다양한 렌더링 방식을 혼합하여 사용할 수 있다는 점입니다. 예를 들어:

• 마케팅 페이지와 블로그 포스트는 정적 생성(SSG)으로

• 제품 상세 페이지는 서버 사이드 렌더링(SSR)으로

• 사용자 대시보드는 클라이언트 사이드 렌더링(CSR)으로

이렇게 각 페이지의 특성에 맞는 렌더링 방식을 선택하여 최적의 성능과 사용자 경험을 제공할 수 있습니다.2

결론

Next.js의 사전 렌더링은 React의 CSR 방식이 가진 초기 로딩 속도와 SEO 문제를 효과적으로 해결합니다. 정적 생성(SSG)과 서버 사이드 렌더링(SSR)이라는 두 가지 사전 렌더링 방식을 통해 개발자는 각 페이지의 특성에 맞는 최적의 렌더링 전략을 선택할 수 있습니다.

사전 렌더링은 초기 페이지 로드 속도를 개선하고, SEO를 최적화하며, 사용자 경험을 향상시키는 등 많은 이점을 제공합니다. Next.js는 이러한 사전 렌더링 기능을 쉽게 구현할 수 있도록 하여, 개발자가 더 나은 웹 애플리케이션을 만들 수 있도록 돕고 있습니다.

자주 묻는 질문 (FAQ)

Q1: Next.js의 사전 렌더링과 React의 CSR 중 어떤 것이 더 좋은가요?

A: 두 방식 모두 장단점이 있습니다. 사전 렌더링은 초기 로딩 속도와 SEO에 유리하고, CSR은 높은 상호작용이 필요한 애플리케이션에 적합합니다. 프로젝트의 요구사항에 따라 선택하거나 하이브리드 접근법을 사용하는 것이 좋습니다.

Q2: Next.js에서 사전 렌더링을 비활성화할 수 있나요?

A: Next.js는 기본적으로 모든 페이지를 사전 렌더링하지만, 특정 컴포넌트나 페이지 부분을 클라이언트 사이드에서만 렌더링하도록 설정할 수 있습니다. 이를 위해 useEffect 훅이나 dynamic import를 사용할 수 있습니다.

Q3: 하이드레이션(Hydration)이 실패하면 어떻게 되나요?

A: 하이드레이션이 실패하면 React는 서버에서 렌더링된 HTML과 클라이언트에서 렌더링하려는 내용 사이의 불일치를 감지하고 경고를 표시합니다. 심각한 경우 페이지가 제대로 작동하지 않을 수 있습니다.

Q4: Next.js의 사전 렌더링이 항상 SEO에 유리한가요?

A: 대체로 그렇습니다. 사전 렌더링은 검색 엔진 크롤러에게 완전히 렌더링된 HTML을 제공하므로 SEO에 유리합니다. 그러나 SEO 최적화는 렌더링 방식 외에도 메타 태그, 구조화된 데이터, 콘텐츠 품질 등 다양한 요소에 영향을 받습니다.

Q5: Next.js의 사전 렌더링이 서버 부하를 증가시키나요?

A: 정적 생성(SSG)은 빌드 시점에 HTML을 생성하므로 서버 부하를 증가시키지 않습니다. 오히려 CDN에 캐싱되어 서버 부하를 줄일 수 있습니다. 반면, 서버 사이드 렌더링(SSR)은 각 요청마다 HTML을 생성하므로 서버 부하가 증가할 수 있습니다.