[Next.js] CSR, SSR, SSG, ISR

1. CSR (Client Side Rendering)

• HTML, CSS, JS 파일을 브라우저가 받아서, 브라우저에서 JavaScript가 실행되며 화면을 구성함.
• 특징:
  • 초기 로딩이 느림 (JS 다운로드 → 실행 → 렌더링까지 시간 소요)
  • 첫 화면은 <div id="root"></div> 같은 빈 HTML만 존재
  • 이후 페이지 전환은 빠름 (SPA 구조: 새로고침을 하지 않고, 화면만 교체해주는 방식) 
• 장점:
  • 사용자 경험(UX) 향상 (페이지 전환이 빠름)
  • 프론트엔드 개발에 유연.

2. SSR (Server Side Rendering)

• 설명: 사용자의 요청이 들어오면, 서버에서 HTML을 완성해서 보내줌.
• 대표 프레임워크: Next.js, Nuxt.js, Ruby on Rails 등
• 특징:
  • 초기 로딩 빠름 (브라우저가 HTML 그대로 받아서 바로 렌더링)
  • 크롤러도 내용을 바로 읽을 수 있어 SEO에 강함
• 장점:
  • 첫 화면 렌더링 속도 빠름
  • SEO에 매우 유리함.

3. SSG(Static Stie Generation)

• 설명: 빌드시 페이지를 미리 생성한다
• SSR 과 CSR 의 장점을 합쳐 놓았음. 
• 페이지가 이미 만들어져 있기 때문에, 페이지 전환이 빠르고 엘리먼트 밀림 현상도 없음. 

 

4. ISR(Incremental Static Regeneration)

• 설명: 빌드시 페이지를 미리 생성하고, 일정 시간마다 재 생성한다. 
• SSG 장점 + 비교적 최신 정보를 가져와 페이지를 정적 생성할 수 있다. 
• 페이지가 이미 만들어져 있기 때문에, 페이지 전환이 빠르고 엘리먼트 밀림 현상도 없음.