[ Next.js ] CSR과 사전 렌더링, 어떻게 다를까 ?

1. Client Side Rendering (CSR)

클라이언트 측에서 모든 렌더링을 처리하는 방식

 

 

🧩 작동 방식

1. 브라우저가 서버에 초기 요청을 보냅니다.
2. 서버는 빈 HTML 파일(index.html)을 브라우저에 응답합니다.
3. 브라우저는 HTML을 화면에 렌더링하지만, 아무 콘텐츠도 없는 상태입니다.
4. 이후, 서버는 React 앱 전체가 번들링된 JS 파일을 브라우저로 전송합니다.
5. 브라우저는 JS 파일을 실행해 리액트 앱을 구동하고 컴포넌트를 렌더링합니다.
6. 이때 비로소 사용자는 화면을 볼 수 있습니다.

 

✔️ CSR의 장점

• 초기 로딩 이후 빠른 페이지 전환
• 모든 컴포넌트가 JS 번들에 포함되어 있기 때문에, 이후 페이지 이동 시 서버와의 추가 통신 없이 빠르게 전환됩니다.
• SPA(Single Page Application) 구조로 부드러운 사용자 경험 제공

 

 

javascript 번들 파일에는 초기 접속 요청이 들어온 페이지에 필요한 컴포넌트 뿐만 아니라, 사이트 내부에서 접근할 수 있는 모든 페이지에 필요한 컴포넌트가 다 들어있습니다. 즉, 이 웹사이트에 필요한 전체 코드가 다 여기에 포함이 되어 있다는 것입니다. 

 

만약, 이 초기 접속 이후에 사용자가 웹페이지의 링크나 버튼을 클릭해서 페이지를 이동하게 되더라도 서버에게 새로운 페이지를 요청할 필요가 없습니다. 왜냐하면, 이미 브라우저는 리액트 앱을 가지고 있고, 그 리액트 앱에는 결국 모든 페이지에 필요한 컴포넌트가 다 포함이 되어 있기 때문입니다.

 

 

따라서, 이렇게 페이지 이동 요청이 들어오게 되더라도 그냥 브라우저가 자체적으로 서버로부터 받은 리액트 앱을 실행해서 현재 이동해야 되는 페이지에 맞도록 적절히 컴포넌트를 갈아끼우면 되기 때문에 굉장히 빠른 속도로 쾌적하게 페이지 이동이 이루어지게 됩니다. 

 

그래서, 클라이언트 사이드 렌더링이라는 방식을 채택함으로써 초기 접속 요청 이후에 페이지 이동을 매우 빠르고 쾌적하게 제공한다는 장점을 가지고 있습니다. 

 

 

✔️ CSR의 단점

• 초기 로딩 속도(FCP)가 느림
  • HTML만 먼저 받아오기 때문에 빈 화면 상태가 길어질 수 있습니다.
  • JS 파일을 받고 실행하기까지 시간이 걸립니다.
• SEO에 불리함
• 콘텐츠가 JS로 렌더링되므로, 검색 엔진 크롤러가 내용을 제대로 읽지 못할 수 있습니다.

 

 

🌟 FCP (First Contentful Paint)

브라우저가 첫 번째 콘텐츠를 화면에 그리는 시점입니다. 이 시점이 늦어질수록 사용자의 이탈률이 대폭 증가합니다.

 

 

---

2. 사전 렌더링

서버에서 미리 HTML을 만들어 보내는 방식

 

 

🧩 작동 방식

1. 사용자가 초기 요청을 보냅니다.
2. 서버가 리액트 컴포넌트를 실행해 완성된 HTML을 미리 생성합니다.
3. 이 HTML을 브라우저에 응답하고, 브라우저는 즉시 콘텐츠를 렌더링합니다.

 

 

  4. 이후, 서버는 JS 번들 파일 (React 앱)을 브라우저에 전송합니다.

  5. 브라우저는 이 JS를 실행하고, 기존 HTML과 연결하여 상호작용이 가능한 페이지로 변화시킵니다.

이때, 기존의 HTML로만 렌더링했기 때문에 아무런 상호작용도 발생할 수 없었던 이 웹페이지에 js 코드들이 마치 메마른 땅에 비가 내리듯이 쏟아져서 이제 상호작용까지 가능해진 완성된 페이지로 거듭나게 됩니다.

 

 

이렇게 HTML과 자바스크립트를 연결하는 과정이 마치 메말라 있던 HTML 요소들에 자바스크립트라는 물을 뿌려주는 것과 비슷하다고 해서 수화 (Hydration) 라고 합니다. 즉, 하이드레이션 과정까지 거치게 되면 최종적으로는 웹페이지가 비로소 상호작용까지 가능해지는 상태가 됩니다. 이때, 이렇게 상호작용까지 가능해진 시점을 TTI (Time To Interactive)라고 부릅니다.

 

 

클라이언트 서버 렌더링과 같이 브라우저가 서버에게 별도의 페이지를 추가로 요청하지 않고, 직접 브라우저 측에서 자바스크립트 코드(리액트 앱)를 실행해서 컴포넌트를 교체하는 방식으로 페이지 이동이 효율적으로 진행됩니다. 

 

 

💡 렌더링의 의미

 

 

✔️ 사전 렌더링의 장점

• 빠른 초기 렌더링 속도 (FCP 향상) - 사용자는 즉시 콘텐츠를 볼 수 있습니다.
• SEO에 유리 - HTML에 이미 콘텐츠가 들어있기 때문에 검색엔진에 잘 노출됩니다.

 

✔️ 사전 렌더링의 단점

• 첫 요청에만 빠름
• 이후의 상호작용(페이지 이동 등)을 위해서는 여전히 JS 번들이 필요합니다.
• 복잡한 구현 시, 빌드 타임 비용 증가
• 많은 페이지를 사전 렌더링할 경우 빌드 시간이 길어질 수 있습니다.

💡 Hydration (수화)
: 서버에서 미리 렌더링된 HTML 요소에 클라이언트 측 JS를 연결하여 동적인 인터랙션이 가능하도록 만드는 과정입니다.