Server Side Rendering(SSR) — 요청마다 새로운 데이터
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. Next.js App Router에서 특정 페이지를 SSR(매 요청마다 렌더링)로 만들기 위한 방법으로 올바른 것은?
💡 App Router에서 SSR은 `dynamic = 'force-dynamic'` export 또는 fetch의 `cache: 'no-store'` 옵션으로 활성화합니다. `getServerSideProps`는 Pages Router 방식입니다.
Q2. Server Component에서 요청 쿠키를 읽는 올바른 방법은?
💡 `'next/headers'`의 `cookies()` 함수로 서버에서 요청 쿠키를 읽습니다. 이 함수는 Server Component와 Route Handler에서만 사용할 수 있으며, Client Component에서는 사용 불가합니다.
Q3. SSR 페이지에서 3개의 독립적인 API를 호출할 때 가장 효율적인 방법은?
💡 독립적인 API들은 `Promise.all`로 병렬 호출해야 합니다. 순차 호출 시 각 API의 응답 시간이 합산되지만, 병렬 호출 시 가장 느린 API의 응답 시간만 기다립니다.
Q4. SSR 페이지에서 `searchParams`를 props로 받으면 어떤 일이 발생하는가?
💡 `searchParams`를 페이지 컴포넌트에서 사용하면 Next.js가 해당 페이지를 자동으로 동적 렌더링으로 처리합니다. URL 파라미터는 요청마다 다를 수 있기 때문입니다.
Q5. 느린 SSR 페이지의 사용자 경험을 개선하는 가장 적합한 방법은?
💡 `Suspense`로 컴포넌트를 감싸면 느린 부분이 로드되는 동안 빠른 컴포넌트를 먼저 스트리밍으로 전송합니다. 사용자는 빈 화면 대신 부분적으로 완성된 페이지를 즉시 볼 수 있습니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.