1. SSR (Server-Side Rendering)

SSR은 서버 사이드 렌더링을 의미한다.

사용자가 페이지를 요청하면, 서버가 요청된 페이지의 HTML을 생성하고, 완성된 HTML을 클라이언트에게 전송하는 방식이다. 브라우저는 이 HTML을 렌더링 하여 사용자에게 보여준다.

특징

서버에서 모든 데이터를 준비 후 HTML을 제공하기 때문에, 페이지 로드 시 초기 콘텐츠가 완전히 준비된 상태에서 화면에 표시됨
초기 로딩 속도는 빠르지만(CSR 보다) 서버 부하가 증가할 수 있으며, 서버 응답시간이 길어질 수 있다.
SEO(검색 엔진 최적화)가 중요한 경우나 실시간 데이터가 중요한 사이트에 사용한다.
- ex) 뉴스 사이트, 소셜 미디어 등
React는 Next.js , Vue는 Nuxt.js 등을 이용함

2. CSR (Client-Side Rendering)

CSR은 클라이언트 사이드 렌더링을 의미함

사용자가 페이지를 요청하면, 서버는 빈 HTML 파일과 자바스크립트 번들을 전송해준다. 브라우저가 자바스크립트를 실행하여 데이터를 API로부터 받아와서 화면에 렌더링 함.

특징

초기 로딩 시간은 느릴 수 있다. (모든 js 및 빌드 파일을 다 불러옴), 초기 로드 후 페이지 간 이동이 매우 빠름(SSR 보다), 인터렉티브한 사용자 경험을 제공해 줌
서버 부하가 적음
SPA(Single Page Application)과 같이 페이지 간 빠른 이동이 중요한 애플리케이션에서 많이 사용됨.
- ex) 대시보드, 사용자 인터렉션이 많은 웹 애플리케이션

3. SSG (Static Site Generation)

SSG는 정적 사이트 생성을 의미함

페이지를 빌드하는 시점에 서버가 모든 페이지의 HTML을 미리 생성하여 정적 파일로 저장함. 사용자가 페이지를 요청할 때 이미 생성된 HTML 파일을 서버에서 즉시 전송한다.

특징

매우 빠른 초기 로딩 속도를 제공함. 서버에서 실시간으로 HTML을 생성할 필요가 없기 때문에 서버 부하가 적다.
그러나 실시간 데이터 반영이 어렵다. 빌드 이후 데이터 변경을 즉각적으로 반영할 수 없다.
콘텐츠가 자주 변경되지 않는 페이지에 적합
- ex) 블로그, 문서 사이트, 마케팅 페이지

4. ISR(Incremental Static Regeneration)

ISR은 점진적 정적 재 생성을 의미함

SSG처럼 정적 HTML을 미리 생성하지만, 특정 간격으로 페이지를 다시 생성하여 최신 데이터를 반영함. 예를 들면 매 10분마다 정적 페이지를 재 생성하여 서버에 최신 버전을 저장한다.

특징

SSG의 빠른 로딩 속도를 유지하면서도 실시간 데이터 업데이트가 가능하다. 필요할 때만 페이지를 재 생성하므로 서버 부하도 적당히 유지됨
최신 데이터가 필요하지만, 매 요청마다 서버에서 HTML을 생성할 필요가 없는 페이지에 적합함
- ex) 블로그, 제품페이지

각 렌더링 방식 비교

SSR
- 최신 데이터를 기반으로 서버에서 HTML을 생성하므로 실시간 데이터 제공이 필요할 때 유용
CSR
- 브라우저가 모든 렌더링을 처리하므로 인터렉티브 한 애플리케이션에 적합
SSG
- 미리 생성된 정적 페이지를 제공하여 매우 빠른 로딩 속도와 서버 부하 감소를 실현
ISR
- SSG의 장점을 유지하면서도, 일정 주기로 최신 데이터를 반영하여 업데이트가 필요한 페이지에 적합

5. Next.js의 구현 방법

Next.js 에서는 위 네 가지 (SSR, CSR, SSG, ISR)을 모두 구현할 수 있다.

SSR

Next.js 에서 getServerSideProps 를 이용하여 SSR을 설정할 수 있다.

getServerSideProps는 각 요청마다 호출되며 데이터를 받아 서버에서 HTML을 생성한다.

예시

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  
  return {
    props: {
      data,
    },
  };
}

function Page({ data }) {
  return <div>{data.title}</div>;
}

export default Page;

CSR

CSR은 Next.js에서 기본으로 지원하는 렌더링 방식이다. 페이지에서 getStaticProps 또는 getServerSideProps를 사용하지 않으면 Next.js는 CSR을 사용한다.
예시

import { useEffect, useState } from 'react';

function Page() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  if (!data) return <div>Loading...</div>;

  return <div>{data.title}</div>;
}

export default Page;

SSG

SSG는 Next.js의 getStaticProps 와 getStaticPaths 함수를 사용하여 SSG를 설정한다.
getStaticProps : 이 함수는 페이지의 정적 데이터를 가져오는 역할을 한다. 빌드 시점에 실행되며, 데이터를 받아 HTML을 미리 생성한다.

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  
  return {
    props: {
      data,
    },
  };
}

function Page({ data }) {
  return <div>{data.title}</div>;
}

export default Page;

getStaticPaths : 동적 경로가 필요한 경우 사용된다. 예를 들어 블로그 포스트의 경우, 여러 개의 동적 경로를 정적으로 생성해야 한다.

export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  
  const paths = posts.map(post => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();
  
  return {
    props: {
      post,
    },
  };
}

function Post({ post }) {
  return <div>{post.title}</div>;
}

export default Post;

ISR

ISR은 SSG와 비슷하지만 페이지를 정적으로 생성 후 일정 주기로 재 생성할 수 있는점이 다르다
Next.js에서는 getStaticProps 에 revalidate 옵션을 추가하여 ISR을 설정한다.
revalidate : 이 옵션은 페이지를 일정 시간 후에 다시 생성하도록 설정한다. 예를 들면 revalidate: 10 이면 페이지가 10초마다 재생성된다.
예시

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  
  return {
    props: {
      data,
    },
    revalidate: 10, // 10초마다 페이지를 재생성
  };
}

function Page({ data }) {
  return <div>{data.title}</div>;
}

export default Page;

요약

SSG: getStaticProps와 getStaticPaths를 사용해 빌드 시점에 정적 페이지를 생성.
SSR: getServerSideProps를 사용해 요청 시마다 서버에서 페이지를 생성.
CSR: 기본적으로 Next.js에서 제공되며, 클라이언트에서 데이터를 가져와 렌더링.
ISR: getStaticProps와 revalidate를 사용해 정적 페이지를 일정 간격으로 재 생성.

'개발 > Next.js' 카테고리의 다른 글

[Next.js] Next.js 시작하기 (1) (0)	2022.10.12

나태한 개발자에서 부지런한 개발자로

SSR, CSR, SSG, ISR 특징 및 Next.js 적용 방법

목차

1. SSR (Server-Side Rendering)

특징

2. CSR (Client-Side Rendering)

특징

3. SSG (Static Site Generation)

특징

4. ISR(Incremental Static Regeneration)

특징

각 렌더링 방식 비교

5. Next.js의 구현 방법

SSR

CSR

SSG

ISR

요약

'개발 > Next.js' 카테고리의 다른 글

댓글

티스토리툴바

SSR, CSR, SSG, ISR 특징 및 Next.js 적용 방법

목차

1. SSR (Server-Side Rendering)

특징

2. CSR (Client-Side Rendering)

특징

3. SSG (Static Site Generation)

특징

4. ISR(Incremental Static Regeneration)

특징

각 렌더링 방식 비교

5. Next.js의 구현 방법

SSR

CSR

SSG

ISR

요약

'개발 > Next.js' 카테고리의 다른 글

관련글

댓글

티스토리툴바