렌더링(Rendering)방식 이해하기 : CSR, SSR, SSG, ISR

렌더링(Rendering)은 데이터와 템플릿(또는 컴포넌트)을 결합하여 사용자에게 화면에 보여지는 결과물을 생성하는 프로세스를 말합니다.
쉽게 말하자면 웹 사이트가 웹 브라우저에 표시되는 과정을 말합니다
다양한 종류의 렌더링 방식은 웹 애플리케이션의 동작과 성능에 영향을 미칩니다. 
웹사이트가 어떤 렌더링방식으로 렌더링될까요?
4가지(CSR, SSR, SSG, ISR)방식에 대해 알아보겠습니다.

---

CSR (Client-Side Rendering):
설명: 페이지를 초기에 비어있는 상태로 렌더링하고, 클라이언트 측에서 JavaScript를 사용하여 데이터를 가져와 페이지를 완성하는 방식.
장점:
동적 데이터 처리: 클라이언트에서 동적으로 데이터를 가져와 렌더링 할 수 있다.
사용자 경험 향상: 페이지 로딩 후에 추가 데이터를 가져오므로 더 빠른 초기 로딩이 가능하다.
단점:
SEO 문제: 초기 렌더링이 비어있어 검색 엔진 최적화에 문제가 있을 수 있다.
초기 로딩 지연: 페이지가 비어있는 상태로 로딩되므로 초기에는 렌더링이 지연될 수 있다.

---

SSR (Server-Side Rendering):
설명: 매 요청마다 서버에서 페이지를 렌더링하고 클라이언트에게 HTML을 전송하는 방식.
장점:
동적 데이터 처리: 매 요청마다 서버에서 최신 데이터를 가져와 렌더링 할 수 있다.
SEO 최적화: 검색 엔진이 콘텐츠를 수집하기 용이하다.
단점:
성능 이슈: 매 요청마다 서버에서 처리하므로 서버 부하가 증가할 수 있다.
초기 로딩 속도: 첫 요청에서는 렌더링 시간이 걸려 초기 로딩이 느릴 수 있다.

---

SSG (Static Site Generation):
설명: 빌드 시점에 페이지를 렌더링하고 그 결과를 정적 파일로 저장하는 방식. 모든 사용자에게 동일한 페이지를 제공.
장점:
빠른 초기 로딩: 정적 파일을 서빙하므로 초기 로딩이 빠르다.
서버 부하 감소: 정적 파일을 CDN에 캐싱하여 서버 부하를 줄일 수 있다.
단점:
동적 데이터 어려움: 모든 페이지가 빌드 시점의 데이터를 사용하므로 동적인 데이터에는 적합하지 않다.
빌드 시간 증가: 데이터 양이 많거나 업데이트가 빈번한 경우 빌드 시간이 길어질 수 있다.

---

ISR (Incremental Static Regeneration):
설명: 빌드 시점에 미리 렌더링된 페이지를 제공하면서, 특정 간격으로 페이지를 다시 빌드하여 갱신된 데이터를 가져오는 방식.
장점:
최신 데이터 사용: 일정 간격 동안에만 페이지를 갱신하여 최신 데이터를 사용할 수 있다.
정적 파일 캐싱: 빌드 시점에 생성된 정적 파일을 캐싱하여 성능을 향상시킬 수 있다.
단점:
일정 간격 동안의 지연: 갱신 주기에 따라 최신 데이터 반영에 일정한 지연이 발생할 수 있다.
설정에 따른 복잡성: 적절한 갱신 주기를 설정하는 것이 중요하며, 설정이 잘못될 경우 성능 문제가 발생할 수 있다.