SSR(Server-Side Rendering)이란

페이지가 서버에서 렌더링 된후 완성된 HTML파일이 클라이언트에 전송되는 방식이다.

특징

• 초기 로딩 속도 : 서버에서 완성된 HTML을 제공하므로 초기 로딩 속도가 빠르다.

• SEO 최적화 : 검색 엔진이 페이지를 쉽게 크롤링할 수 있어 SEO에 유리하다.

• 서버 부담: 모든 요청에 대해 서버가 HTML을 생성해야 하므로, 트래픽이 많은 경우 서버에 부담이 될수있다.

작동 방식

• 사용자가 페이지를 요청하면, 서버에서 데이터를 받아 페이지를 렌더링한다.

• 서버는 완성된 HTML 파일을 클라이언트로 전송한다.

• 클라이언트는 HTML을 렌더링하고, 필요하다면 JavaScript로 페이지에 인터랙티브 기능을 추가한다.

사용 사례

• 검색 엔진 최적화가 중요한 블로그나 콘텐츠 중심의 웹사이트

• 초기 페이지 로딩 속도가 중요한 웹사이트

CSR (Client-Side Rendering)이란

브라우저에서 페이지를 렌더링하는 방식이다. 서버에서는 HTML 껍데기와 JavaScript 번들 파일을 보내고, 클라이언트가 데이터를 받아와서 브라우저에서 최종적으로 페이지를 완성한다.

특징

• 초기 로딩 속도 느림: 브라우저가 먼저 JavaScript를 다운로드하고 실행해야 하기 때문에 초기 로딩 시간이 느릴 수 있다.

• SEO 취약: 초기 HTML이 빈 상태로 로드되기 때문에 검색 엔진이 콘텐츠를 크롤링하기 어려울 수 있다.

• 빠른 인터랙션: 첫 로딩 이후에는 페이지 전환이 빠르고, 사용자 경험이 좋아진다.

작동 방식

• 서버는 기본 HTML과 JavaScript 파일을 클라이언트에 전송한다.

• 클라이언트는 JavaScript를 실행해 데이터를 요청하고 페이지를 동적으로 렌더링한다.

사용 사례

• 단일 페이지 애플리케이션(SPA)

• 실시간 데이터 업데이트가 필요한 대화형 애플리케이션

SSG (Static Site Generation)란

빌드 타임에 미리 HTML 파일을 생성하는 방식이다. 클라이언트 요청 시마다 서버에서 동적으로 페이지를 생성하지 않고, 미리 생성된 정적 파일을 클라이언트에 제공한다.

특징

• 성능 최적화 : 모든 페이지가 미리 생성되어 있기 때문에 서버 부담이 적고, 페이지 로딩 속도가 매우 빠르다.

• SEO 최적화 : 정적 HTML이 제공되므로 검색 엔진이 쉽게 크롤링을 할 수 있다.

• 동적 데이터 처리 한계 : 실시간 데이터 반영이 어렵다. 데이터가 업데이트되면 전체 사이트를 다시 빌드해야 한다.

작동 방식

• 빌드 시점에서 모든 페이지의 HTML 파일을 생성한다.

• 클라이언트가 페이지를 요청하면 미리 생성된 HTML 파일을 서버에서 제공해준다.

사용 사례

• 자주 변하지 않는 콘텐츠 중심의 웹사이트 (블로그, 문서 사이트)

• 성능과 SEO가 중요한 경우

ISR(Incremental Static Regeneration)이란

SSG의 한계를 보완한 방식으로, 미리 생성된 정적 페이지를 일정 주기마다 갱신할 수 있게 하는 방식이다. 일부 페이지를 다시 빌드하지 않고도 최신 데이터를 제공할 수 있는 방법이다.

특징

• 정적 사이트의 성능 유지 : SSG처럼 페이지를 미리 생성하여 빠르게 제공하되, 데이터가 바뀔 때만 필요에 따라 정적 페이지를 다시 생성한다.
• 동적 콘텐츠 처리 가능: 특정 주기마다 페이지를 재생성하거나 사용자의 요청이 있을 때 새롭게 빌드할 수 있기 때문에, 자주 변하는 데이터도 효과적으로 관리할 수 있다.
• 유연성 : 정적 사이트의 장점을 살리면서도 동적 데이터를 효과적으로 반영할 수 있다.

작동 방식

• 빌드 시점에 정적 페이지가 생성된다.

• 사용자가 페이지를 요청할 때, 정해진 주기(revalidate 시간)에 따라 서버는 최신 데이터를 기준으로 페이지를 갱신한다.

사용 사례

• 데이터를 자주 업데이트하지만, 실시간으로 반영할 필요는 없는 경우

• CMS와 같이 콘텐츠가 자주 변경되는 블로그나 뉴스 웹사이트