[Next.js] 주요 렌더링 패턴

 

 

Next.js에서 주요 렌더링 방식은 4가지로 나눌 수 있다. 각 패턴별로 프로젝트의 성능이나 데이터, 사용자 경험 최적화를 위해 고려해야 할 부분들이 있는데, 자신이 진행할 프로젝트에서 요구되는 사항에 따라 적절한 방식을 선택하면 된다.

	렌더링 시점	속도	데이터	활용
SSG	빌드타임	빠름	고정형 데이터	마케팅 페이지
SSR	요청 시	느림(서버 요청)	최신 데이터	실시간 데이터
CSR	클라이언트 실행 시	느림(초기에)	클라이언트에서 처리	검색 결과
ISR	빌드 타임, 주기적인 재생성	빠름	조정 가능	뉴스, 전자상거래 등

 

 

SSG(Static Site Generation)

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

  return {
    props: { data },
  };
}

 

SSG는 첫 페이지의 로딩 시간이 짧고 사용자가 빠르게 페이지를 접할 수 있다는 장점이 있다. 검색 엔진 최적화에도 유리하다.

• 정적 HTML 파일을 빌드 타임에 생성
• 빌드 시에 한 번 생성
• 자주 변하지 않는 내용을 다루는 프로젝트에 적합(마케팅 페이지 등)

 

SSR(Server-Side Rendering)

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

  return {
    props: { data },
  };
}

 

SSG, ISR처럼 렌더링 주체가 서버이다. 다만 사이트의 콘텐츠가 변경될 때 전체 사이트를 다시 빌드하는데, 이 과정에서 오랜 시간이 걸리며 서버에 가하는 부하가 커질 수 있다.

• 매 요청마다 HTML을 서버에서 동적으로 생성
• 사용자가 페이지를 요청하면 서버에서 데이터를 가져와서 렌더링
• 실시간 데이터를 다루는 프로젝트에서 사용 가능

 

CSR(Client-Side Rendering)

import { useEffect, useState } from "react";

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

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

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

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

 

React를 통한 SPA 방식을 배운 사람들에게 익숙한 방식이다. 브라우저에서 자바스크립트를 이용해 동적으로 페이지를 렌더링하며, 클라이언트가 곧 렌더링 주체이다.

• 브라우저에서 JavaScript를 실행하여 데이터를 가져오고 페이지 렌더링
• 초기에는 빈 HTML
• 사용자와의 Interaction이 많은 웹 애플리케이션에 적합

 

ISR(Incremental Static Regeneration)

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

  return {
    props: { data },
    revalidate: 10, // 10초마다 재생성하기
  };
}

 

SSG처럼 정적 페이지를 제공하면서도 임의로 설정한 주기에 따라 페이지를 재생성할 수 있는 방식이다. 콘텐츠가 변경되어도 서버 재생성을 통해 비교적 최신 데이터를 유지할 수 있다.

• SSG + 동적인 컨텐츠 업데이트
• 주기마다 정적 페이지 재생성, 변경된 데이터 반영

 

---

 

Next.js 서버 컴포넌트 타입 에러

 

Next.js에서 제공하는 기본 로딩 UI를 적용해보던 중에 알 수 없는 이유로 서버 컴포넌트에서 에러가 발생했다. 작성했던 코드를 검토해보면 서버 컴포넌트에서 useState, useEffect Hook을 사용하거나 async 함수를 사용할 때 타입 에러를 뱉는 것 같았다.

 

그래서 이게 뭔데

 

 

[NextJS] Async Server Component TypeScript Error 해결하기

 

 

Next.js 13에서 데이터를 페칭하려고 async 함수 형태의 서버 컴포넌트를 작성하면 사용할 수 없다면서 빨간 에러를 띄운다. 흔한 타입스크립트 이슈라는데 다른 수강생들도 겪은 문제일까? 이전 버전의 타입스크립트는 리액트 컴포넌트가 JSX만 반환한다고 이해했기 때문에 발생하는 것이라고 한다.

 

 

해결법은 대충 두 가지였는데, 우선 주석을 추가해주는 방법이 있다.

{/* @ts-expect-error Async Server Component */}

 

 

다른 방법도 있다. 타입스크립트 5.1버전업과 함께 서버 컴포넌트에서 Promise를 반환하는 경우에 대한 타입이 별도로 추가되었다고 한다. 튜터님 감사합니다 정말 몰랐어요 최신 버전을 사용하지 않은 죄가 깊다 공식 문서에서도 관련된 내용을 찾아볼 수 있었는데, Typescript, @types/react의 버전을 각각 5.1.3, 18.2.8 이상으로 올려주면 된다.

npm install @types/react@latest typescript@latest

 

 

이제 오류 없이 코드를 작성할 수 있다.