[CS] 프론트엔드 렌더링 방식 : CSR, SSR, SSG, ISR

 

프론트엔드 렌더링 방식으로 CSR과 SSR은 많이 들어보고 접해봤지만,

나머지 ISG과 SSG는 아직 잘 몰라서 글을 작성하면서 정리해보려고 한다 !

---

🍑 CSR (클라이언트 사이드 렌더링)

 

클라이언트 사이드 렌더링(CSR)은 웹 애플리케이션의 동적인 사용자 경험을 제공하는 데 최적화된 방식이다. 이 방식에서는 브라우저가 HTML을 받은 후에 JavaScript를 통해 콘텐츠를 동적으로 생성하고 렌더링한다. 이 과정에서 사용자의 상호작용에 따라 필요한 데이터만을 서버로부터 비동기적으로 불러오게 되며, 이를 통해 사용자 경험을 크게 향상시킬 수 있다. 

 

😇 CSR의 장점

1. 높은 사용자 경험 : CSR은 클라이언트 측에서 데이터를 받아와 렌더링하기 때문에 페이지 이동 속도가 빠르고, 사용자 경험이 높다.

2. 캐싱 가능 : 클라이언트에서 캐시를 사용하여 적은 양의 데이터만 다시 요청하여 처리하는 것이 가능하다.

3. 적은 서버 부하 : CSR은 클라이언트에서 데이터를 처리하기 때문에 서버 부하가 적다. 

 

👿 CSR의 단점

1. 느린 초기 로딩 속도 : CSR은 페이지를 렌더링하기 위해 필요한 JS 파일을 먼저 다운로드 한 후에 데이터를 받아와야 한다. 이로 인해 초기 로딩 속도가 느리다.

2. 불리한 SEO : CSR에서는 초기 HTML 파일에 콘텐츠가 포함되어 있지 않기 때문에 검색 엔진이 페이지를 크롤링할 때 콘텐츠를 인식하지 못할 수 있다. 

3. 낮은 보안성 : CSR에서는 클라이언트에서 데이터를 처리하기 때문에 보안성이 낮을 수 있다. 클라이언트 측에서 데이터를 조작하거나 해킹 등의 공격이 가능하다.

 

🤔 언제 사용하면 좋을까?

seo에 크게 의존하지 않은 사이트에 사용하는 것이 좋다. 초기 로딩 속도보다 사용성이나 UX가 중요한 경우가 적합하다.

---

 

🍎 SSR (서버 사이드 렌더링)

 

서버 사이드 렌더링(SSR)은 사용자가 웹페이지에 접속하면, 서버가 웹페이지의 모든 콘텐츠를 포함한 HTML 문서를 생성해 응답을 보낸다. 그리고 브라우저에서는 이 HTML을 표시하여 사용자가 빠르게 콘텐츠를 볼 수 있도록 한다. 그리고 동시에 JS Bundle을 다운로드 받아 실행함으로써 웹페이지가 동작하게 만든다. 

 

😇 SSR의 장점

1. 빠른 초기 로딩 속도 : 서버에서 완전한 HTML을 생성하여 클라이언트에 전달하기에, 초기 로딩 속도가 빠르다. 

2. SEO에 유리함 : JS Bundle이 로드되기 전 사용자가 의미있는 콘텐츠를 볼 수 있어, SEO도 쉽게 구성할 수 있다. 

3. 높은 보안성 : SSR에서는 서버 측에서 데이터를 처리하기 때문에 보안성이 높다. 클라이언트 측에서 데이터를 조작하거나

해킹 등의 공격이 어려워진다. 

 

👿 SSR의 단점

1. 느린 페이지 이동 속도 : SSR은 페이지 이동시마다 서버에서 데이터를 받아와 렌더링해야 하기 때문에 페이지 이동 속도가 느리다. 

2. 유지보수 비용 증가 : 웹 앱을 서버에 배포한다면 다른 방식보다 SSR이 더 많은 자원을 소모하고 더 많은 부하를 보여 유지보수 비용이 증가한다. 

 

🤔 언제 사용하면 좋을까?

SEO가 중요하고, 초기 로딩 속도가 중요한 서비스에 사용하는 것이 좋다. 예를 들면 뉴스 웹사이트나, 블로그 같은 사이트가 있다. 

---

 

🍒 SSG (정적 사이트 생성)

정적 사이트 생성(SSG)은 사용자가 웹페이지에 접속할 때가 아닌, 개발자가 코드를 빌드할 때 HTML을 미리 렌더링하는 방식이다. SSR에서는 사용자가 접속할 때 서버에서 웹페이지 내 콘텐츠를 HTML의 형태로 생성해 응답했지만, SSG에서는 미리 생성된 HTML을 즉각 전달함으로써 다른 렌더링 방식보다도 빠르게 콘텐츠를 렌더링할 수 있다. 

 

😇 SSG의 장점

1. 매우 빠른 성능 : 이미 만들어진 HTML을 바로 제공하기에, 로딩 속도가 매우 빠르다. 

2. SEO에 유리함 : SSR처럼 검색 엔진이 페이지를 잘 읽을 수 있다. 

3. 높은 보안성 : 웹사이트가 미리 만들어졌기 때문에 콘텐츠가 훨씬 더 안전하다.

 

👿 SSG의 단점

1. 정적인 데이터 : build 시점에 렌더링이 되기 때문에 데이터가 정적이다. 따라서 데이터가 가변적으로 변경되는 웹사이트의 경우 적절하지 않다.

2. 힘든 관리 : 대규모 웹사이트의 경우 빌드가 매우 오래 걸리며, 관리하는 것도 번거로운 편이다. 

 

🤔 언제 사용하면 좋을까?

회사 소개 페이지나 포트폴리오 사이트처럼 내용이 거의 변하지 않는 웹사이트의 경우에만 적합하다. 약간의 동적 콘텐츠라도 포함이 되어있다면 SSG를 사용하지 않는 것이 좋다. 

---

 

🍬 ISR (점진적 정적 재생성)

점진적 정적 재생성(ISR)은 SSG와 SSR의 장점을 결합한 방식으로, 정적 페이지를 요청 시 서버에서 동적으로 갱신할 수 있도록 한다. ISR을 사용하면 정적 사이트의 이점을 유지하면서 수많은 페이지로 확장할 수 있다. 

 

😇 ISR의 장점

1. 빠른 응답 : SSG와 동일하게 ISR도 정적 페이지를 바로 제공하므로 로딩 속도가 매우 빠르다.

2. 자동 갱신 : 일정 주기마다 최신 데이터로 페이지가 자동 업데이트되어 내용이 변경되어도 사이트를 다시 배포할 필요가 없다. 

3. 유리한 SEO : 정적 HTML이 제공되므로 SEO에 유리하다. 

 

👿 ISR의 단점

1. 느린 반영 : 데이터가 변경이 되어도 일정 주기 전까지는 반영이 안되어, 예전의 콘텐츠를 보게 된다. 

 

🤔 언제 사용하면 좋을까?

콘텐츠가 동적이지만 자주 변경되지 않는 사이트의 경우 ISR을 사용하는 것이 좋다. 뉴스나 개인 웹사이트 등등이 있다.