[기술 면접] 2026-04-21 — CSR vs SSR vs SSG

오늘의 면접 주제

 

Next.js App Router 확산으로 렌더링 방식의 차이를 설명하는 질문이 프론트엔드 면접에서 더 자주 나온다.

핵심 한 줄 요약

CSR, SSR, SSG는 "언제 HTML을 만들고 어디서 그리느냐"의 차이이며, 성능·SEO·운영 방식의 선택 기준이 된다.

면접 질문 & 모범 답변

Q1. CSR, SSR, SSG는 무엇인가요?

기본 답변: CSR은 브라우저에서 JavaScript가 실행된 뒤 화면을 그리는 방식입니다. SSR은 서버가 요청마다 HTML을 만들어서 먼저 내려줍니다. SSG는 빌드 시점에 HTML을 미리 만들어 두고 그대로 제공합니다.
심화 포인트: 세 방식은 UI를 그리는 위치보다 "HTML 생성 시점"이 더 중요한 구분 기준입니다.

Q2. 각 방식은 어떻게 동작하나요?

기본 답변: CSR은 처음엔 빈 HTML이나 최소한의 뼈대만 받고, 이후 JS가 데이터를 받아 화면을 완성합니다. SSR은 요청이 오면 서버가 데이터 조회 후 HTML을 만든 뒤 응답합니다. SSG는 배포 전에 HTML을 생성하므로 요청 시 별도 계산이 거의 없습니다.
심화 포인트: 사용자는 결국 HTML, CSS, JS를 모두 받지만, 처음 의미 있는 화면이 언제 보이느냐가 체감 성능을 크게 바꿉니다.

Q3. SEO 관점에서 왜 차이가 나나요?

기본 답변: 검색 엔진은 HTML에 본문이 바로 들어 있으면 페이지 내용을 더 쉽게 수집합니다. 그래서 일반적으로 SSR과 SSG가 CSR보다 SEO에 유리합니다. CSR도 가능은 하지만, 크롤러가 JS 실행까지 기다려야 해서 불리할 수 있습니다.
심화 포인트: SEO는 단순히 렌더링 방식만의 문제가 아닙니다. 메타 태그, canonical, 응답 속도, 콘텐츠 안정성도 함께 봐야 합니다.

Q4. 실무에서 어떤 기준으로 선택하나요?

기본 답변: 자주 바뀌지 않는 소개 페이지나 블로그는 SSG가 적합합니다. 사용자별 맞춤 화면이나 요청마다 데이터가 달라지는 페이지는 SSR이 자연스럽습니다. 로그인 후 대시보드처럼 SEO가 중요하지 않고 상호작용이 많은 화면은 CSR도 충분히 좋습니다.
심화 포인트: 한 서비스에서 하나만 고르는 경우는 드뭅니다. 페이지 성격별로 섞어서 쓰는 것이 실무에 가깝습니다.

Q5. 각 방식의 단점은 무엇인가요?

기본 답변: CSR은 초기 화면 노출이 늦어질 수 있고 SEO에 불리합니다. SSR은 요청마다 서버 계산이 필요해 비용과 지연이 늘 수 있습니다. SSG는 빌드 이후 데이터가 바뀌면 화면이 오래된 정보일 수 있습니다.
심화 포인트: 성능은 항상 평균값이 아니라 병목 지점으로 결정됩니다. SSR이 무조건 빠르지도 않고, SSG가 무조건 좋은 것도 아닙니다.

Q6. ISR은 무엇이고 왜 필요한가요?

기본 답변: ISR은 SSG의 빠른 응답과 정적 배포 장점을 유지하면서, 일정 주기나 조건에 따라 페이지를 다시 생성하는 방식입니다. 즉 "미리 만들어 두되, 너무 오래되면 다시 만든다"에 가깝습니다.
심화 포인트: 뉴스 목록이나 상품 페이지처럼 트래픽은 많고 데이터는 가끔 바뀌는 화면에서 특히 유용합니다.

Q7. Next.js App Router에서는 이 개념이 어떻게 보이나요?

기본 답변: App Router에서는 Server Component가 기본이라 서버에서 데이터를 가져오는 흐름이 더 자연스럽습니다. 다만 모든 페이지가 자동으로 SSR인 것은 아닙니다. fetch의 캐시 옵션과 revalidate 설정에 따라 정적 생성, 동적 렌더링, 재생성이 달라집니다.
심화 포인트: Next.js는 페이지 단위보다 데이터 패칭 단위로 렌더링 전략을 세밀하게 조절하게 만든 점이 중요합니다.

Q8. 면접에서 "어떤 방식이 최고인가요?"라고 물으면 어떻게 답하나요?

기본 답변: 최고인 방식은 없고 요구사항에 따라 달라진다고 답하는 것이 맞습니다. SEO, 초기 로딩, 데이터 변경 주기, 서버 비용, 사용자 상호작용을 함께 보고 선택해야 합니다.
심화 포인트: 좋은 답변은 정의 암기보다 "왜 이 페이지에 이 방식이 맞는가"를 상황에 맞게 설명하는 답변입니다.

꼬리 질문 대비

CSR에서도 SEO를 개선하려면 어떤 보완이 필요할까요?
SSR 페이지에서 서버 부하가 커지면 어떤 식으로 완화할 수 있을까요?
SSG와 CDN은 왜 같이 자주 언급될까요?
Next.js에서 revalidate와 cache: 'no-store'는 어떤 차이가 있나요?
로그인 후 마이페이지는 왜 SSG보다 SSR이나 CSR이 더 자연스러울까요?

헷갈리기 쉬운 포인트

SSR은 서버에서 HTML을 만든다는 뜻이지, JavaScript가 아예 없는 뜻은 아닙니다. 이후 hydration은 여전히 일어날 수 있습니다.
SSG는 무조건 최신 데이터를 보여주는 방식이 아닙니다. 빌드 시점 기준 결과라는 점을 먼저 이해해야 합니다.
CSR이 나쁜 방식은 아닙니다. SEO가 덜 중요하고 인터랙션이 많다면 오히려 구현이 단순하고 적합할 수 있습니다.

면접관 시각

이 주제에서는 용어를 외웠는지보다 선택 기준을 이해했는지를 봅니다. 특히 "페이지 성격에 따라 왜 다른 전략이 필요한가"를 설명하면 실무 감각이 있다고 판단합니다. Next.js App Router를 말할 때도 기능 이름만 나열하지 않고, 캐시와 데이터 갱신 방식까지 연결하면 좋은 평가를 받습니다.