Next.js란? React와 무엇이 다른가 — SSR·SSG·ISR 패러다임 완전 이해
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. Next.js에서 SSR(Server-Side Rendering)을 구현할 때 fetch 옵션으로 올바른 것은?
💡 cache: 'no-store'는 fetch 요청이 캐시를 전혀 사용하지 않도록 하여, 매 요청마다 서버에서 새로운 데이터를 가져오는 SSR 동작을 구현합니다. cache: 'force-cache'는 SSG, next: { revalidate: N }은 ISR에 해당합니다.
Q2. ISR(Incremental Static Regeneration)의 동작 방식으로 가장 정확한 설명은?
💡 ISR은 SSG처럼 빌드 시점에 정적 HTML을 생성하지만, revalidate 시간이 지난 후 사용자 요청이 들어오면 백그라운드에서 페이지를 재생성합니다. 이를 통해 SSG의 성능과 SSR의 최신 데이터를 절충할 수 있습니다.
Q3. React(CRA) 기반 앱과 비교했을 때 Next.js의 SSG 방식이 SEO에 유리한 이유는?
💡 React CRA는 클라이언트에서 JavaScript가 실행된 후에야 콘텐츠가 렌더링되므로, 크롤러에게는 빈 HTML만 전달됩니다. 반면 Next.js SSG는 빌드 시점에 완전한 HTML을 생성하므로, 검색 엔진이 JavaScript 실행 없이도 페이지 콘텐츠를 분석할 수 있어 SEO에 유리합니다.
Q4. 실시간 주식 시세를 표시하는 페이지를 만들 때 가장 적합한 렌더링 방식은?
💡 실시간 주식 시세는 초단위로 변하는 데이터이므로, 매 요청마다 서버에서 최신 데이터를 가져오는 SSR이 가장 적합합니다. SSG나 ISR은 오래된 데이터를 보여줄 위험이 있으며, 부정확한 금융 정보는 사용자에게 큰 문제가 될 수 있습니다.
Q5. Next.js App Router에서 다음 fetch 코드의 렌더링 방식은? `fetch(url, { next: { revalidate: 3600 } })`
💡 next: { revalidate: N } 옵션은 ISR을 구현합니다. N초(여기서는 3600초 = 1시간)마다 캐시를 재검증하여 백그라운드에서 페이지를 새로 생성합니다. 이는 자주 변경되지 않지만 주기적인 업데이트가 필요한 데이터에 적합합니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.