Next.js에서 SSR, SSG, CSR의 이해(렌더링 방식)

Next.js는 다양한 렌더링 방식을 지원하여 SEO, 성능, 사용자 경험을 최적화할 수 있습니다. 이 글에서는 최신 Next.js 13 버전을 기준으로 SSR(서버 사이드 렌더링), SSG(정적 사이트 생성), CSR(클라이언트 사이드 렌더링)의 개념과 사용 시 유의사항을 알아보겠습니다.

---

목차

1. SSR(서버 사이드 렌더링)
2. SSG(정적 사이트 생성)
3. CSR(클라이언트 사이드 렌더링)
4. Next.js에서의 렌더링 방식 선택 기준

---

1. SSR(서버 사이드 렌더링)

SSR(Server Side Rendering)은 페이지 요청이 있을 때 서버에서 HTML을 생성하여 클라이언트로 전달하는 방식입니다. 사용자가 페이지에 접속할 때마다 서버에서 HTML을 렌더링하므로 사용자에게 최신 데이터를 제공하는 데 유리합니다.

장점

• SEO에 최적화: SSR을 통해 완성된 HTML이 전달되므로 검색 엔진이 페이지 내용을 빠르게 인식할 수 있습니다.
• 최신 데이터 제공: 페이지 요청마다 서버에서 데이터를 가져와 렌더링하므로, 실시간 데이터 업데이트가 중요한 페이지에 적합합니다.

단점

• 높은 서버 부담: 페이지 요청 시마다 서버에서 렌더링을 수행하므로, 트래픽이 많을 경우 서버 부담이 높아질 수 있습니다.
• 로딩 지연: 서버에서 페이지를 렌더링한 후 응답하므로 클라이언트에 화면이 표시되기까지의 초기 로딩 시간이 다소 길 수 있습니다.

코드 예시

Next.js에서 SSR을 구현하기 위해 getServerSideProps 함수를 사용합니다.

// pages/example-ssr.js
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

export default function ExampleSSR({ data }) {
  return <div>{data.title}</div>;
}

코드 예시(TypeScript)

getServerSideProps 함수에서 API로부터 데이터를 받아오는 경우, GetServerSideProps 타입을 사용해 정의할 수 있습니다.

// types.ts
export interface Data {
  title: string;
  // 다른 필요한 속성들을 추가할 수 있습니다.
}

// pages/example-ssr.tsx
import { GetServerSideProps } from 'next';
import { Data } from '../types';

interface SSRProps {
  data: Data;
}

export const getServerSideProps: GetServerSideProps<SSRProps> = async () => {
  const res = await fetch('https://api.example.com/data');
  const data: Data = await res.json();

  return { props: { data } };
}

const ExampleSSR: React.FC<SSRProps> = ({ data }) => {
  return <div>{data.title}</div>;
}

export default ExampleSSR;

---

2. SSG(정적 사이트 생성)

SSG(Static Site Generation)은 빌드 시점에 미리 HTML 파일을 생성하는 방식입니다. 주로 변경이 적은 콘텐츠에 적합하며, 요청 시 서버가 아닌 CDN에서 바로 HTML 파일을 제공하기 때문에 빠른 응답 속도를 자랑합니다.

장점

• 성능 최적화: 모든 페이지가 사전에 생성되어 CDN을 통해 제공되므로 빠른 로딩 속도를 자랑합니다.
• 비용 효율적: 서버에서 별도의 렌더링이 필요하지 않아 서버 비용이 낮아질 수 있습니다.

단점

• 실시간 데이터 반영 어려움: 빌드 시점에 콘텐츠가 고정되므로, 실시간 데이터를 제공하기는 어렵습니다. 따라서 자주 변경되지 않는 페이지에 적합합니다.

코드 예시

Next.js에서 SSG를 사용하려면 getStaticProps 함수를 사용합니다.

// pages/example-ssg.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

export default function ExampleSSG({ data }) {
  return <div>{data.title}</div>;
}

코드 예시(TypeScript)

getStaticProps 함수에서도 타입을 정의하여 정적 데이터를 타입 안전하게 사용할 수 있습니다.

// pages/example-ssg.tsx
import { GetStaticProps } from 'next';
import { Data } from '../types';

interface SSGProps {
  data: Data;
}

export const getStaticProps: GetStaticProps<SSGProps> = async () => {
  const res = await fetch('https://api.example.com/data');
  const data: Data = await res.json();

  return { props: { data } };
}

const ExampleSSG: React.FC<SSGProps> = ({ data }) => {
  return <div>{data.title}</div>;
}

export default ExampleSSG;

---

3. CSR(클라이언트 사이드 렌더링)

CSR(Client Side Rendering)은 브라우저에서 JavaScript를 통해 콘텐츠를 렌더링하는 방식입니다. Next.js는 SSR과 SSG를 기반으로 하지만, 특정 컴포넌트는 CSR을 활용하여 렌더링할 수 있습니다.

장점

• 비동기 데이터 로딩 가능: 사용자가 페이지에 접속한 후 필요한 데이터를 비동기로 로딩하므로 초기 로딩 시간 동안 UI는 즉시 보여줄 수 있습니다.
• 상호작용 높은 페이지에 유리: 사용자 상호작용이 많거나 실시간 업데이트가 필요한 경우 CSR을 통해 효율적으로 구현할 수 있습니다.

단점

• SEO 문제: 초기 HTML에 콘텐츠가 없고 JavaScript로 로딩되기 때문에 SEO에 불리할 수 있습니다.
• 초기 로딩 지연: JavaScript가 로드되어야 화면이 완성되므로 초기 로딩이 느려질 수 있습니다.

코드 예시

CSR을 사용하려면 useEffect를 통해 데이터를 로딩할 수 있습니다.

// components/ExampleCSR.js
import { useState, useEffect } from 'react';

export default function ExampleCSR() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const res = await fetch('https://api.example.com/data');
      const result = await res.json();
      setData(result);
    }
    fetchData();
  }, []);

  return <div>{data ? data.title : 'Loading...'}</div>;
}

---

4. Next.js에서의 렌더링 방식 선택 기준

1. SEO와 최신 데이터가 중요한 경우: SSR

• 데이터가 자주 변경되며 검색 엔진 최적화가 필요한 페이지에 적합합니다.

2. 고정된 콘텐츠와 높은 성능이 요구되는 경우: SSG

• 게시글, 블로그 등 자주 변경되지 않는 콘텐츠에 이상적입니다.

3. 사용자 상호작용이 많고 실시간 업데이트가 필요한 경우: CSR

• 대시보드나 사용자 인터페이스가 복잡한 애플리케이션에 적합합니다.