페이지 렌더링 방식 (CSR, SSR, SSG, ISR)

SSR, CSR, SSG, LSR: 렌더링 방식 비교와 예시

웹 애플리케이션의 렌더링 방식은 크게 네 가지로 나뉩니다: SSR, CSR, SSG, 그리고 LSR. 각각의 작동 방식, 장단점, 그리고 API 호출 방식을 포함하여 자세히 설명합니다.

---

1. SSR (Server-Side Rendering)

작동 원리

1. 클라이언트가 서버에 요청을 보냄.
2. 서버는 필요한 데이터를 API로 가져와 HTML을 생성.
3. 완성된 HTML을 클라이언트로 전송.
4. 클라이언트에서 JavaScript가 로드되어 인터랙션 가능한 애플리케이션이 활성화.

장점

• SEO 최적화: 완성된 HTML이 서버에서 제공되므로 검색 엔진 크롤러가 페이지를 쉽게 읽을 수 있음.
• 빠른 초기 콘텐츠 제공: 데이터가 포함된 HTML을 제공하여 초기 로딩이 빠름.
• 유연성: 요청마다 데이터를 동적으로 가져와 최신 상태 유지.

단점

• 서버 부하 증가: 요청마다 HTML을 생성해야 하므로 서버 리소스가 많이 소모됨.
• 지연된 사용자 인터랙션: 초기 로드 후 JavaScript가 실행되기 전까지 애플리케이션이 비활성 상태.

예시: Next.js getServerSideProps

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

  return { props: { data } }; // 데이터를 페이지 컴포넌트로 전달
}

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

export default Page;

---

2. CSR (Client-Side Rendering)

작동 원리

1. 브라우저가 빈 HTML과 JavaScript를 로드.
2. 클라이언트 측에서 JavaScript가 실행되어 HTML을 생성.
3. 필요한 데이터를 API로 호출하여 페이지를 렌더링.

장점

• 빠른 사용자 인터랙션: JavaScript가 실행되면 애플리케이션이 즉시 반응 가능.
• 서버 부하 감소: 서버는 HTML 템플릿과 JavaScript만 제공하며 데이터 로드는 클라이언트가 수행.
• 유연성: 클라이언트 측에서 데이터 관리와 UI 업데이트를 자유롭게 처리 가능.

단점

• SEO 제한: 검색 엔진 크롤러가 JavaScript를 실행하지 못하면 빈 HTML만 읽을 수 있음.
• 느린 초기 로드: JavaScript와 데이터가 모두 로드될 때까지 사용자에게 콘텐츠가 보이지 않음.

예시: React의 API 호출

import { useEffect, useState } from 'react';

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

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

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

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

export default Page;

---

3. SSG (Static Site Generation)

작동 원리

1. 빌드 시 필요한 데이터를 가져와 정적 HTML 파일을 생성.
2. 생성된 HTML은 CDN(Content Delivery Network)을 통해 제공.
3. 클라이언트에서 JavaScript가 로드되면 인터랙티브 기능 활성화.

장점

• 최고의 성능: 정적 파일을 제공하므로 서버 부하가 거의 없음.
• SEO 친화적: 정적 HTML이므로 검색 엔진 크롤러가 쉽게 인덱싱 가능.
• 빠른 배포: 미리 생성된 파일을 사용하므로 요청 처리 속도가 빠름.

단점

• 동적 데이터 제약: 정적 HTML은 빌드 시점에 생성되므로, 실시간 데이터 갱신이 어려움.
• 긴 빌드 시간: 대규모 데이터나 페이지가 많을 경우 빌드 시간이 길어질 수 있음.

예시: Next.js getStaticProps

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

  return { props: { data } }; // 정적 데이터로 페이지 생성
}

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

export default Page;

---

4. LSR (Lazy Server-Side Rendering)

작동 원리

1. 서버에서 일부 정적 데이터를 제공.
2. 추가 데이터는 클라이언트에서 비동기로 가져옴.
3. 필요한 시점에 데이터를 가져와 사용자 경험 최적화.

장점

• 효율적인 데이터 로드: 초기 로드 시 필요한 데이터만 가져와 성능 최적화.
• SEO와 인터랙션의 균형: 초기 HTML은 서버에서 제공되고, 나머지는 클라이언트에서 처리.
• 최적화된 서버 부하: 초기 HTML 생성에 필요한 데이터만 처리하므로 서버 리소스를 절약.

단점

• 구현 복잡성: 클라이언트와 서버 간 데이터 동기화 및 로드 타이밍을 조정해야 함.
• SEO 제한: 클라이언트에서 비동기로 가져온 데이터는 크롤러가 인식하지 못할 수 있음.

예시: Next.js getStaticProps + CSR

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

  return { props: { staticData } }; // 정적 데이터 제공
}

const Page = ({ staticData }) => {
  const [dynamicData, setDynamicData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/dynamic-data')
      .then((res) => res.json())
      .then((data) => setDynamicData(data));
  }, []);

  return (
    <div>
      <h1>{staticData.title}</h1>
      {dynamicData ? <p>{dynamicData.detail}</p> : <p>Loading dynamic data...</p>}
    </div>
  );
};

export default Page;

---

비교표: SSR, CSR, SSG, LSR

특성	SSR	CSR	SSG	LSR
초기 로드 속도	빠름	느림	매우 빠름	중간
SEO 친화성	매우 좋음	낮음	매우 좋음	중간
실시간 데이터 갱신	가능	가능	불가능	가능
서버 부하	높음	낮음	매우 낮음	중간
구현 복잡성	중간	낮음	중간	높음
적합한 사용 사례	동적 콘텐츠, SEO 필요한 웹앱	대화형 SPA	정적 콘텐츠 중심의 웹사이트	초기 속도와 SEO가 중요한 앱

---

API 호출 방식 비교

1. SSR:
   • 서버에서 API 호출 → 클라이언트로 HTML과 데이터를 함께 전달.
   • 예: getServerSideProps 사용.
2. CSR:
   • 클라이언트에서 API 호출 → JavaScript로 데이터 렌더링.
   • 예: useEffect에서 API 호출.
3. SSG:
   • 빌드 시 API 호출 → 정적 HTML로 변환.
   • 예: getStaticProps 사용.
4. LSR:
   • 초기 데이터는 서버에서 제공 → 추가 데이터는 클라이언트에서 호출.
   • 예: getStaticProps + 클라이언트 데이터 로드.

---

결론

• SSR: SEO와 동적 콘텐츠가 중요한 애플리케이션.
• CSR: 대화형 SPA 및 사용자 중심 애플리케이션.
• SSG: 정적 콘텐츠가 주를 이루는 고속 웹사이트.
• LSR: SEO와 성능을 동시에 고려해야 하는 애플리케이션.