✅ 압박면접 대응 시리즈 11편: Next.js 렌더링 방식 (CSR, SSR, ISR) 차이와 선택 기준

✅ 압박면접 대응 시리즈 11편: Next.js 렌더링 방식 (CSR, SSR, ISR) 차이와 선택 기준

Next.js 면접에서 가장 자주 나오는 질문 중 하나는
**“CSR, SSR, ISR의 차이를 설명하고, 어떤 상황에서 각각을 선택할 건가요?”**입니다.
압박면접에서는 단순 정의 암기보다 실제 프로젝트 적용 경험과 선택 근거까지 반드시 물어봅니다.

---

📌 1. 기본 개념 정리

✅ CSR (Client Side Rendering)

• 모든 렌더링을 클라이언트(브라우저)에서 처리
• 초기 로딩 시 JS 번들을 다운로드 후 렌더링 시작
• SEO에 불리하지만, SPA(Single Page Application) 구현에 적합

// Next.js 기본 CSR 예시
export default function Page() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch("/api/data").then(res => res.json()).then(setData);
  }, []);
  return <div>{data ? data.value : "Loading..."}</div>;
}

---

✅ SSR (Server Side Rendering)

• 요청 시마다 서버에서 HTML을 생성해 반환
• 초기 로딩 속도 빠름, SEO 최적화 유리
• 서버 부하 ↑, 캐싱 전략 필요

export async function getServerSideProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();
  return { props: { data } };
}

---

✅ ISR (Incremental Static Regeneration)

반응형

• 정적 페이지를 미리 생성(SSG)하되, 일정 주기마다 서버에서 재생성
• 성능 + 최신성을 동시에 확보
• 대규모 콘텐츠 서비스(블로그, 뉴스)에 적합

export async function getStaticProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();
  return { props: { data }, revalidate: 60 }; // 60초마다 재생성
}

---

📌 2. 압박면접 예상 질문 & 답변 포인트

❓ Q1. CSR, SSR, ISR 중 무조건 SEO에 좋은 건 무엇인가요?

• 답변 포인트: SSR과 ISR 모두 SEO에 유리
• CSR은 SEO에 약점이 있으나, Next.js의 next/head와 프리렌더링을 활용하면 보완 가능

---

❓ Q2. 대규모 서비스에서는 어떤 방식을 선택하시겠습니까?

• 답변 포인트:
  • 실시간성 필요 → SSR (예: 주식 차트, 실시간 데이터)
  • 빈번한 업데이트 필요 → ISR (예: 뉴스, 블로그)
  • SEO 크게 중요하지 않고 빠른 UX → CSR

---

❓ Q3. 실무에서 어떤 문제를 겪었나요?

• 경험: 블로그 서비스에서 SSG만 사용했더니 최신 글 반영이 지연됨
• 해결: ISR로 전환해 캐싱 + 주기적 재생성 → 성능과 최신성 균형 확보

---

📌 3. 실무 경험 사례

• 문제 상황: 상품 상세 페이지를 CSR로 구현 → SEO 최적화 부족
• 해결 과정: SSR로 전환, 초기 HTML에 상품 데이터 삽입
• 결과: 검색 노출 20% 증가, 구글 인덱싱 속도 개선

또 다른 프로젝트에서는 뉴스 콘텐츠를 ISR로 렌더링하여
빌드 시간 단축(20분 → 3분) + 최신성 확보 성과를 경험했습니다.

---

📌 4. 면접에서 어필할 한 줄 정리

“CSR은 UX에, SSR은 SEO와 실시간성에, ISR은 성능과 최신성 균형에 강점이 있습니다.
실무에서는 블로그 서비스에 ISR을 도입해 최신성과 성능을 동시에 확보했던 경험이 있습니다.”

---

압박면접,NextJS,CSR,SSR,ISR,렌더링방식,SEO최적화,정적페이지,프론트엔드,면접준비

---