Next.js 신입 프레임워크 기술면접

SSR은 getServerSideProps를 사용하며 매 요청마다 서버에서 페이지를 생성하므로 항상 최신 데이터를 보여줄 수 있지만 응답 속도가 상대적으로 느립니다. SSG는 getStaticProps를 사용하며 빌드 시점에 페이지를 생성하므로 가장 빠르지만 데이터가 정적이어야 합니다. ISR은 SSG와 유사하지만 revalidate 옵션을 통해 특정 시간 간격으로 페이지를 재생성할 수 있어 정적 페이지의 성능과 동적 데이터 갱신을 모두 활용할 수 있습니다. CSR은 클라이언트에서 useEffect나 SWR 등을 통해 데이터를 가져오며, SEO가 중요하지 않거나 사용자별 개인화된 데이터를 보여줄 때 적합합니다. 실시간 데이터가 필요하면 SSR, 블로그나 문서는 SSG, 상품 목록처럼 주기적으로 변경되는 데이터는 ISR, 대시보드나 마이페이지는 CSR이 적합합니다.

Next.js는 pages 폴더의 파일 구조가 그대로 URL 경로가 되는 파일 기반 라우팅을 제공합니다. [id].js는 단일 동적 세그먼트를 받는 파일로, /posts/1이나 /posts/abc 같은 URL과 매칭되며 useRouter의 query.id로 값을 가져올 수 있습니다. [...slug].js는 Catch-all Routes로 여러 세그먼트를 배열로 받을 수 있어 /docs/a/b/c 같은 URL을 모두 매칭하며 query.slug는 ['a', 'b', 'c'] 형태의 배열이 됩니다. [[...slug]].js는 Optional Catch-all Routes로 [...slug].js와 동일하지만 세그먼트가 없는 경로도 매칭되어 /docs와 /docs/a/b 모두 처리할 수 있습니다. 이러한 동적 라우팅은 블로그 포스트, 상품 상세 페이지, 다단계 문서 구조 등을 구현할 때 유용합니다.

동적 라우팅 페이지에서 SSG를 사용하려면 빌드 시점에 어떤 경로들을 미리 생성할지 알려줘야 하므로 getStaticPaths가 필요합니다. getStaticPaths는 paths 배열에 생성할 경로 목록을 반환하고, getStaticProps는 각 경로에 대한 데이터를 가져와 페이지를 생성합니다. fallback: false는 paths에 없는 경로는 404를 반환하며, 모든 경로를 빌드 시점에 생성할 때 사용합니다. fallback: true는 paths에 없는 경로도 요청 시 생성하며, router.isFallback으로 로딩 상태를 보여줄 수 있어 경로가 많을 때 유용하지만 초기 로딩 UI를 구현해야 합니다. fallback: 'blocking'은 true와 유사하지만 페이지가 생성될 때까지 서버에서 대기하므로 SSR처럼 동작하며, 로딩 UI 없이 완성된 페이지를 바로 보여줍니다. 상품 수가 많은 전자상거래 사이트에서 인기 상품만 미리 생성하고 나머지는 요청 시 생성하는 전략에 활용됩니다.