5. Next.js

Q29. React와 Next.js의 차이는 무엇인가요?

React는 UI를 구성하는 라이브러리이고, Next.js는 React를 기반으로 라우팅, 서버 렌더링, 서버 측 기능 등 애플리케이션 구성을 제공하는 프레임워크입니다. 프로젝트에서 필요한 렌더링 방식과 서버 기능, 배포 환경을 기준으로 Next.js 사용 여부를 판단합니다.

---

Q30. CSR, SSR, SSG, ISR의 차이는 무엇인가요?

CSR은 브라우저에서 JavaScript를 실행해 UI를 구성하는 방식입니다. SSR은 요청 시 서버에서 HTML을 생성하고, SSG는 빌드 시 미리 생성합니다. ISR은 미리 생성한 결과를 재검증 정책에 따라 갱신합니다. 데이터 변경 빈도, 개인화 여부, 초기 로딩 요구에 맞춰 선택합니다.

 

예를 들어, 공개 소개 페이지는 정적 생성, 사용자별 화면은 요청 시 처리, 실시간 상호작용은 클라이언트 데이터 조회를 조합할 수 있습니다.

---

Q31. Server Component와 Client Component는 어떻게 다른가요?

Server Component는 서버에서 실행되며 데이터 접근이나 서버 전용 로직에 적합합니다. Client Component는 상태, 이벤트 핸들러, 브라우저 API 등 상호작용이 필요한 부분에 사용합니다. App Router의 페이지와 레이아웃은 기본적으로 Server Component이고, 필요한 경계에 'use client'를 선언합니다.

 

주의할 점은 Client Component도 초기 페이지 로드에서는 서버에서 HTML을 미리 렌더링할 수 있다는 것입니다. "Client Component는 항상 브라우저에서만 렌더링된다"는 답변은 부정확합니다.

---

Q32. 하이드레이션이란 무엇인가요?

서버에서 생성된 HTML에 클라이언트의 React가 연결되어 이벤트와 상태 기반 상호작용이 가능해지는 과정입니다. 서버와 브라우저의 초기 렌더 결과가 다르면 hydration mismatch가 발생할 수 있습니다. 시간, 난수, 브라우저 저장소처럼 환경에 따라 달라지는 값의 처리에 주의합니다.

---

Q33. Next.js의 캐싱과 React Query의 캐싱은 같은가요?

서로 다른 계층의 캐시입니다. Next.js는 서버 데이터나 렌더링 결과 등의 캐시를 관리하고, React Query는 QueryClient의 서버 상태 캐시를 관리합니다. 데이터를 변경했을 때 어떤 계층이 화면의 데이터를 제공하는지 확인하고 해당 캐시를 갱신해야 합니다.

 

Next.js의 캐시 기본 동작은 버전과 설정에 따라 달라집니다. "fetch는 항상 기본 캐시된다"처럼 단정하지 말고, 프로젝트에서 사용한 버전과 캐시 정책으로 설명하세요.