CSR / SSR / SSG 알아보기

ㅇㅖㅈㅣ·2024년 3월 8일

Today I Learned

목록 보기

75/93

🖥️ Next.js

Next.js의 렌더링 삼형제에 대해 정리해보기 전에 Next.js에 대해 간단히 알아보자

🔎 Next.js란?

vercel이 개발한 오픈소스 React 프레임워크

React기반의 웹 어플리케이션을 쉽게 개발할 수 있는 프레임워크로, 서버사이드 렌더링과 라우팅을 지원하여 SEO 최적화와 사용자 경험을 향상시킨다.
SSR, SSG, ISR과 같은 다양한 렌더링 방식을 제공해준다.

Next.js의 주요 특징

서버사이드 렌더링(SSR)

서버에서 페이지를 렌더링하여 초기 로딩 속도를 개선하고 SEO를 향상시킨다

라우팅(Routing)

파일 시스템 기반의 라우팅을 제공하여 개발자가 복잡한 라우팅 설정을 하지 않아도 페이지 간 이동과 네비게이션을 쉽게 구현할 수 있다. Link 컴포넌트를 사용하여 클라이언트 사이드 라우팅을 손쉽게 설정할 수 있다. 이는 코드의 구조를 단순화하고 유지 보수를 용이하게 만들어준다.

데이터 패칭(Data Fetching)

Next.js에는 효율적으로 데이터를 가져올 수 있는 다양한 방법들이 있다.
getStaticProps : 빌드 시에 데이터를 가져와 페이지에 미리 렌더링 할 수 있다. 이 방법은 정적인 데이터를 사용하는 페이지에 적합하다. 서버 측에서 실행되며, 반환된 데이터는 페이지 컴포넌트의 props로 전달된다.
getServerSideProps : 요청이 들어올 때마다 서버 측에서 데이터를 가져와 페이지를 렌더링할 수 있다. 이 방법은 매 요청마다 데이터가 변경되는 동적인 페이지에 적합하다.
ISR : 데이터를 주기적으로 업데이트할 수 있는 방식으로 정적 페이지를 유지하면서도 데이터를 최신 상태로 유지할 수 있다.

Next.js의 렌더링

CSR(Client Side Rendering)

CSR 이란?

클라이언트 측에서 렌더링을 하는 방식이다. 최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링을 하는 방식이다.
처음 로드될 때 사용자는 전체 페이지를 보기 전에 약간의 지연을 느낄 수 있는데, 이는 모든 JavaScript를 다운로드, 파싱 및 실행할 때까지 페이지가 완전히 렌더링되지 않기 때문이다.
페이지가 처음 로드된 후에는 필요한 데이터만 가져오면 되고 자바스크립트가 전체 페이지를 새로 고칠 필요 없이 페이지의 일부를 다시 렌더링할 수 있으므로 페이지 전환이 빠르다.

장점

성능향상 : 초기 요청 시에 서버에서 전체 페이지를 렌더링 할 필요가 없으므로 서버의 부담이 줄어들고 클라이언트 측에서 동적으로 처리되므로 전체적인 성능이 향상될 수 있다.
캐싱과 재사용 : 일부 데이터나 컴포넌트는 한 번 로드되면 클라이언트 측에서 캐싱되어 재사용될 수 있어 더 빠른 사용자 경험을 제공할 수 있다.

단점

SEO 문제: CSR은 초기 페이지 렌더링 시에 빈 HTML을 반환하므로 검색 엔진 최적화에 어려움이 있을 수 있다.
초기 로딩 시간 : CSR은 초기 로딩 시에 모든 필요한 리소스를 다운로드해야 하므로 초기 로딩 시간이 길어질 수 있다. 특히 많은 양의 자바스크립트 및 데이터를 사용하는 경우에는 더 큰 문제가 될 수 있다.

예시

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return <h1>Hello, Client Side Rendering!</h1>;
}

// index.js
ReactDOM.render(<App />, document.getElementById('root'));

SSR(Server Side Rendering)

SSR 이란?

서버측에서 렌더링하는 방식이다. 페이지 요청 시 서버에서 HTML을 렌더링하여 클라이언트에게 보내는 방식을 의미한다.
서버는 클라이언트에게 완전히 렌더링된 페이지를 제공하므로, 초기 로딩 시 완전한 상태로 나타난다.
페이지에 서버 측 렌더링을 사용하려면 getServerSideProps라는 비동기 함수를 내보내야 하는데, 이 함수는 요청이 있을 때마다 서버에서 호출된다.
마이페이지 처럼 데이터에 의존한 페이지에 사용할 수 있다.

장점

SEO 개선 : SSR은 초기 요청 시에 완전한 HTML을 제공하여 검색 엔진이 콘텐츠를 쉽게 인덱싱할 수 있도록 하므로 SEO를 개선할 수 있다.
초기 로딩 시간 단축 : 서버에서 페이지를 렌더링하기 때문에 초기 로딩 시간(TTV)이 단축되어 사용자 경험을 향상시킬 수 있다.

단점

서버 부하 증가 : 매 요청마다 서버에서 페이지를 렌더링해야 하므로 서버 부하가 증가할 수 있다.
클라이언트 측 인터랙티브 기능 제약 : 초기 페이지 로딩 이후에는 클라이언트 측에서 인터랙티브한 기능을 구현하기 위해 추가적인 JavaScript 로직이 필요할 수 있다.
TTV(Time to view) !== TTI(Time to interactive)

예시

import React from 'react';

function HomePage({ data }) {
  return <div>{data}</div>;
}

export async function getServerSideProps() {
  const res = await fetch('https://...'); // 외부 API 호출
  const data = await res.json();

  return { props: { data } };
}

export default HomePage;

SSG(Static Site Generation)

SSG 란?

빌드 시에 모든 페이지를 사전에 생성하여 정적 파일로 제공하는 방식이다.(최초 빌드시에만 생성이 됨)
따라서 서버에 부담을 덜 주고, 브라우저에 빠르게 콘텐츠를 제공할 수 있다.

장점

빠른 페이지 로딩 시간 : 정적 파일을 사용하기 때문에 서버 요청 없이 바로 페이지를 제공할 수 있어 초기 로딩 시간(TTV)이 매우 짧아진다.
SEO 최적화 : 빌드 시에 모든 페이지를 생성하므로 검색 엔진이 페이지를 쉽게 인덱싱할 수 있어 SEO를 향상시킬 수 있다.

단점

동적 콘텐츠 처리 어려움 : SSG는 빌드 시에 모든 페이지를 생성하므로 동적으로 변경되는 콘텐츠에 대한 처리가 어려울 수 있다.(정적인 데이터에만 사용할 수 있음)
빌드 시간 증가 : 많은 양의 페이지를 가진 프로젝트에서는 빌드 시간이 증가할 수 있으며, 이는 개발자들에게 불편함을 줄 수 있다.
빌드 후 데이터 갱신 어려움 : 콘텐츠가 변경될 때마다 전체 페이지를 다시 빌드해야 하므로 데이터 갱신이 자주 일어나는 경우에는 관리가 어려울 수 있다.

예시

import React from 'react';

function HomePage({ data }) {
  return <div>{data}</div>;
}

export async function getStaticProps() {
  const res = await fetch('https://...'); // 외부 API 호출
  const data = await res.json();

  return { props: { data } };
}

export default HomePage;