Static과 Dynamic Rendering

렌더링 방식 개요

정적 렌더링 (Static Rendering)

• Static Site Generation (SSG): 빌드 시 HTML 파일을 생성합니다.
• Incremental Static Regeneration (ISR): 빌드 후에도 주기적으로 HTML을 업데이트할 수 있습니다.
• 장점: 빠른 응답속도, CDN 캐싱으로 인한 글로벌 배포 효율성.
• 사용 예시: 블로그, 마케팅 페이지 등 자주 변경되지 않는 콘텐츠.

동적 렌더링 (Dynamic Rendering)

• Server-Side Rendering (SSR): 매 요청마다 서버에서 HTML을 생성합니다.
• Client-Side Rendering (CSR): 클라이언트에서 JavaScript를 통해 데이터를 가져와 렌더링합니다.
• 장점: 실시간 데이터 반영, 개인화된 콘텐츠 제공.
• 사용 예시: 사용자별 데이터, 실시간 업데이트가 필요한 페이지.

---

예제 

정적 렌더링 예제 (SSG)

Next.js의 getStaticProps 함수를 사용해 빌드 시 데이터를 가져오고 페이지를 정적으로 생성하는 방법입니다.

// pages/static-example.tsx
import { GetStaticProps, NextPage } from 'next';

interface StaticProps {
  message: string;
}

const StaticExample: NextPage<StaticProps> = ({ message }) => {
  return (
    <div>
      <h1>정적 렌더링 페이지</h1>
      <p>{message}</p>
    </div>
  );
};

export const getStaticProps: GetStaticProps<StaticProps> = async () => {
  // 외부 API 호출 또는 정적 데이터 처리
  const message = '이 페이지는 빌드 시 생성되었습니다.';
  
  return {
    props: {
      message,
    },
    // ISR 예시: 10초마다 재생성
    revalidate: 10,
  };
};

export default StaticExample;

 

동적 렌더링 예제 (SSR)

getServerSideProps를 사용해 매 요청 시마다 데이터를 받아와 페이지를 렌더링합니다.

// pages/dynamic-example.tsx
import { GetServerSideProps, NextPage } from 'next';

interface DynamicProps {
  currentTime: string;
}

const DynamicExample: NextPage<DynamicProps> = ({ currentTime }) => {
  return (
    <div>
      <h1>동적 렌더링 페이지</h1>
      <p>현재 시간: {currentTime}</p>
    </div>
  );
};

export const getServerSideProps: GetServerSideProps<DynamicProps> = async () => {
  // 서버에서 현재 시간 데이터를 가져옴
  const currentTime = new Date().toLocaleString();
  
  return {
    props: {
      currentTime,
    },
  };
};

export default DynamicExample;

 

클라이언트 사이드 렌더링 예제 (CSR)

CSR은 Next.js의 기본 React 컴포넌트 렌더링 방식으로, 클라이언트에서 데이터를 가져옵니다.

보통 useEffect를 이용합니다.

// pages/csr-example.tsx
import { useEffect, useState, FC } from 'react';

const CSRExample: FC = () => {
  const [data, setData] = useState<string | null>(null);

  useEffect(() => {
    // 클라이언트에서 API 호출 예제
    const fetchData = async () => {
      const res = await fetch('/api/hello');
      const json = await res.json();
      setData(json.message);
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>클라이언트 사이드 렌더링 페이지</h1>
      <p>{data ? data : '데이터를 불러오는 중입니다...'}</p>
    </div>
  );
};

export default CSRExample;

 

---

 

• 정적 렌더링(SSG/ISR):
  • 콘텐츠가 자주 변경되지 않는 경우
  • SEO 최적화가 필요한 페이지
  • 전 세계 사용자에게 빠른 로딩 속도를 제공하고자 할 때
• 동적 렌더링(SSR/CSR):
  • 사용자별 맞춤 데이터 또는 실시간 데이터가 필요한 경우
  • 빌드 시점에 데이터를 알 수 없는 경우
  • 최신 상태의 정보를 항상 보여줘야 할 때