SSR, CSR, ISR

우연히 SSR, CSR에 대해서 듣게 되었는데 스스로 좀 더 알아보고 싶다는 생각이 들어서 찾아봤다. SSR, CSR, ISR은 렌더링 3인방이라고 불린다고 한다...!

---

렌더링이란?

우선 머릿속으로 이해만 하고 있던 렌더링에 대해서 알아보면, 렌더링은 보여줄 내용을 화면에 그려주는 것이다. 컴퓨터가 코드(HTML, CSS, JavaScript)를 읽고 사람이 볼 수 있는 화면으로 바꿔주는 과정이다. 쉽게 말하면 웹사이트를 열었을 때 글자, 그림, 버튼 같은 걸 눈으로 볼 수 있게 만들어주는 과정인 것이다.

SSR(Server Side Rendering)

• 서버에서 브라우저에 보일 HTML 파일을 미리 준비해서 응답해 주는 형식
• 현대의 SSR은 첫 HTML 렌더링을 서버에서 처리하고, 이후의 렌더링 사이클은 클라이언트에서 처리하는 방식

작동방식

1. 페이지 진입
2. 서버에서 pre-rending된 html파일을 가져와서 사용자에게 보여줌

장단점

📌 장점

• 초기 로딩 속도가 빠름
• SEO에 유리 (검색 엔진 크롤러는 완전히 렌더링된 페이지를 직접 볼 수 있음

📌 단점

• 서버의 부하가 더 커짐!
  (Node.js에서 전체 앱을 렌더링하기 때문에 정적 파일을 제공하는 것보다 CPU를 더 많이 사용)
• 페이지 전환 시마다 서버에 요청 필요

---

CSR(Client Side Rendering)

클라이언트에서 페이지를 렌더링하는 방식

작동방식

1. 서버가 빈 HTML과 자바스크립트 코드를 보냄
2. 브라우저가 자바스크립트를 실행
3. 자바스크립트가 데이터를 가져와 화면을 그림

장단점

📌 장점

• 초기 로딩 후 페이지 전환이 빠름
• 서버 부하 감소
• 모든 UI 처리 로직이 사용자의 기기에서 직접 실행되므로, 서버 통신 없이 즉각적인 피드백과 동적인 콘텐츠를 제공

📌 단점

• 초기 로딩 시간이 길 수 있음 (JavaScript 다운로드 및 실행 필요)
• SEO에 불리할 수 있음 (검색 엔진이 JavaScript 콘텐츠를 제대로 인식하지 못할 수 있음)

---

ISR(Incremental Static Regeneration)

• SSG 장점 + SSR 장점
  SSG : 빌드 시점에 모든 페이지를 미리 렌더링하여 정적 HTML 파일로 생성하는 방식
• 처음에는 정적인 페이지를 만들어 두고, 필요할 때마다 서버가 새로 업데이트해서 교체해주는 방식

작동 방식

1. 웹사이트 빌드 시 페이지를 미리 만들어 저장해둠
2. 주기적으로 또는 특정 조건에서 페이지를 자동으로 업데이트함
3. 사용자는 항상 저장된 페이지를 빠르게 받고, 업데이트는 뒤에서 진행됨

장단점

📌 장점

• 초기 로딩이 빠름
• SEO에 유리
• 서버 부하 감소 (모든 요청마다 렌더링하지 않음)

📌 단점

• 모든 프레임워크에서 지원하지 않음 (Next.js 등 일부 프레임워크에서 지원)
• 실시간 데이터가 필요한 경우 적합하지 않음 (페이지를 미리 만들어두기 때문)