리액트 주특기 플러스. (7)

Next.js 렌더링 퀴즈: 오답 노트와 해설

오늘은 Next.js의 렌더링 방식과 관련된 퀴즈를 풀며 배운 내용을 정리해보려고 한다.
렌더링 방식에 따라 동작이 달라지는 코드를 이해하는 것은 Next.js를 활용한 개발에서 매우 중요한 요소다.
이번 글에서는 내가 틀린 문제와 그 이유를 중심으로 해설을 덧붙여 작성했다.

문제 1: force-dynamic과 SSR

export default function QuizPage3() {

  return (

    <>

      <div>QuizPage3</div>

    </>

  );

}

export const dynamic = "force-dynamic";

 

질문

위 코드의 렌더링 방식으로 옳은 것은?

정답: SSR

나의 답: SSG

오답 이유

코드 하단에 작성된 export const dynamic = "force-dynamic";를 보지 못했다.
force-dynamic은 Route Segment Config로, 페이지를 SSR 방식으로 강제 설정한다.

해설

1. dynamic = "force-dynamic":
   • 해당 설정이 적용되면, 페이지는 SSR로 렌더링된다.
   • 사용자가 요청할 때마다 서버에서 컴포넌트를 실행하고, 결과를 브라우저로 전달한다.
2. SSR이 적합한 상황:
   • 데이터 최신성: 페이지 데이터가 항상 최신 상태여야 할 때.
   • 검색엔진 최적화(SEO): 검색엔진에 실시간 데이터가 노출되어야 할 때

문제 2: cookies() 함수와 SSR

import { cookies } from "next/headers";

export default function QuizPage5() {

  const token = cookies().get("token")?.value;

return (

  <>

<div>QuizPage5</div>

<p>token: {token}</p>

</>

);

}

 

질문

위 코드의 렌더링 방식으로 옳은 것은?

정답: SSR

나의 답: SSG

오답 이유

cookies()와 같은 dynamic function을 사용하는 경우, 페이지는 SSR로 렌더링된다.
이 기본 원칙을 기억하지 못해 SSG로 답을 작성했다.

해설

1. cookies() 함수의 특징:
   • Next.js dynamic function 중 하나로, 서버에서 실행된다.
   • 브라우저 쿠키 정보를 읽기 위해 서버에서만 동작 가능.
2. 렌더링 방식의 결정:
   • cookies()와 같은 dynamic function이 포함된 경우, 자동으로 SSR로 렌더링된다.
3. SSR이 필요한 이유:
   • 쿠키는 클라이언트에서만 접근 가능하므로, 서버에서 처리 후 HTML을 생성해야 한다.
   • 이 과정은 클라이언트에서 실행할 수 없는 작업을 서버에서 처리하기 위한 것이다.

문제 3: 클라이언트 컴포넌트와 초기 데이터

질문

다음 코드의 컴포넌트는 어떤 컴포넌트이고, 빌드 타임에 적용되는 데이터는?

 

정답: Client Component, "a"

나의 답: Client Component, "b"

 

오답 이유

초기 상태값 "a"가 빌드 타임에 적용된다는 사실을 간과했다.
최초 렌더링 시, React의 라이프사이클 메서드(useEffect)는 서버에서 실행되지 않는다.

 

해설

1. 빌드 타임 데이터:
   • 클라이언트 컴포넌트도 서버에서 프리렌더링을 진행한다.
   • React 라이프사이클 메서드(useEffect)는 클라이언트에서만 실행되므로, 초기 상태값인 "a"로 프리렌더링이 완료된다.
2. 클라이언트 컴포넌트의 특징:
   • 클라이언트 컴포넌트는 초기 렌더링을 서버에서 처리하지만, 이후 동작은 브라우저에서 실행된다.
   • 클라이언트 상호작용을 위해 React의 라이프사이클 메서드를 클라이언트에서 실행한다.
3. 오답 이유 보충:
   • 내가 "b"라고 답을 작성했던 이유는 useEffect가 실행된 이후의 상태가 반영된다고 생각했기 때문이다.
   • 하지만 프리렌더링 시점에서는 초기 상태값만 사용된다는 점을 기억해야 한다.

교훈과 정리

1. force-dynamic은 SSR을 강제한다

dynamic = "force-dynamic"을 사용하면 해당 페이지는 반드시 SSR로 렌더링된다.
이를 통해 항상 최신 데이터를 제공할 수 있다.

2. dynamic function 사용 시 SSR

cookies()와 같은 dynamic function을 사용하면 페이지는 자동으로 SSR로 처리된다.
이는 서버에서만 접근 가능한 데이터를 처리하기 위한 Next.js의 기본 동작이다.

3. 초기 상태와 클라이언트 컴포넌트

• 클라이언트 컴포넌트는 초기 상태값을 서버에서 프리렌더링한다.
• React의 라이프사이클 메서드는 클라이언트에서만 실행되므로, 빌드 타임에는 적용되지 않는다.