SPA와 CSR
- 리액트로 만든 애플리케이션은 주로 SPA(Single Page Application)와 CSR(Client Side Rendering) 방식을 사용함.
SPA(Single Page Application)란?
- 하나의 페이지에서 모든 기능과 렌더링을 수행하는 방식. ↔ MPA(Multi Page Application)
- 장점
- 전체 페이지를 다시 로드하지 않고 필요한 부분만 업데이트하므로 빠른 상호작용과 반응성을 제공함.
- 이어지는 페이지 로드 없이 원활한 애플리케이션 간 이동이 가능하기에 쾌적한 사용자 경험을 제공함.
- 클라이언트에서 처리되는 동적 렌더링과 로직으로 서버 부하 감소.
- 웹과 모바일 앱 간 공통 코드를 재사용할 수 있어 개발 효율성이 좋음.
- 단점
- 필요한 모든 코드를 한 번에 로드해야 하기에 초기 로딩 속도가 느림.
- 클라이언트 측에서 동적 렌더링을 수행하기 때문에 검색엔진이 페이지를 올바르게 인덱싱하지 못할 수도 있음. (SEO 문제)
CSR(Client SIde Rendering)란?
- 클라이언트측(사용자)에서 자바스크립트를 사용해 웹 페이지의 UI를 동적으로 렌더링하는 방식. ↔SSR(Server SIde Rendering)
- SPA와 CSR은 동일한 개념은 아님. SPA와 MPA는 페이지를 몇 개 쓰는지의 차이. CSR과 SSR은 어디서 렌더링을 하느냐의 차이임. 서로 비교 대상이 아님. 하지만 특징과 빠른 상호작용과 사용자 경험 개선 등과 같은 장점, 초기 로딩 시간이 상대적으로 느리며 검색엔진 최적화에 문제가 있을 수 있다는 단점이 비슷함.
- 렌더링 방식에는 CSR 말고도 SSG, ISG, SSR 등으로 구분할 수 있음.
SSG(Static Site Generation)란?
- 정적 웹사이트를 생성하는 방식. HTML, CSS, JS 파일 등의 정적 컨텐츠를 미리 생성함. 이렇게 생성된 정적 파일들은 웹페이지 로딩 시 서버에서 바로 전달되기 때문에 페이지 로딩 속도가 빠르고 서버 부하를 줄일 수 있음. 렌더링하는 주체자가 Client가 아닌 Server. 빌드할 때 렌더링함.
- 장점
- 빠른 페이지 로딩. (정적 데이터 존재, 서버측 추가 처리 X)
- 서버 부하 감소. (정적 데이터 이미 생성되어 있음, 서버측 추가 처리 X)
- 보안성. (정적 데이터 전달에만 집중.)
- SEO 최적화. (정적 데이터 이미 생성되어 있어 검색 엔진이 쉽게 인덱싱 가능.)
- 단점
- 동적 데이터 제한. (빌드할 때 렌더링 되므로 데이터가 정적임.)
- 빌드 시간 증가. (각 페이지를 미리 생성.)
- 실시간 업데이트 어려움. (변경 사항 발생 시 빌드 필요.)
- 이러한 특징으로 SSG는 주로 블로그, 포트폴리오 등 동적 기능이 제한적인 웹 사이트를 만들기에 적합함.
ISR(Incremental Static Regeneration)란?
- 기본적으로 SSG와 동일한 원리이나 페이지 업데이트가 필요한 경우 일부 변경된 페이지만 다시 생성해 웹 사이트를 최신 상태로 유지할 수 있음. 지속적 업데이트가 필요한 정적 페이지를 효과적으로 관리할 수 있음. 렌더링하는 주체자가 Client가 아닌 Server. 주기적으로 렌더링함.
- 장점
- SSG와 동일함.
- +데이터가 주기적으로 업데이트 됨.
- 단점
- 주기적이긴 하나 실시간 데이터는 아님.
- ISR은 SSG와 SSR의 장점이 합쳐진 방식이지만 특정 주기로 렌더링이 되기 때문에 콘텐츠가 업데이트 된 후 웹 사이트를 재방문해도 이전의 콘텐츠를 볼 수 있음. 따라서 동적 기능이 있지만 자주 변경되지 않는 웹 사이트를 만들기에 적합함.
SSR(Server Side Rendering)란?
- 사용자의 요청에 따라 서버에서 HTML을 생성하여 동적 콘텐츠를 포함한 완성된 HTML 페이지를 클라이언트에 전달하는 방식. 렌더링하는 주체자가 Client가 아닌 Server. 요청 시 렌더링함.
- 장점
- SSG와 동일함. (CDN에 캐시가 안되는 것 제외 → 차후 공부 필요함.)
+데이터가 주기적으로 업데이트됨.→ 실시간 데이터를 사용함.
- 단점
- SSG, ISR에 비해 초기 구동이 느림. (CSR보다는 빠름.)
- 서버 부하 증가. (요청이 들어올 때마다 서버에서 HTML을 생성하므로.)
- 상대적으로 보안을 유지하기 어려움.
- SSR은 서버 비용을 크게 증가시킬 가능성이 있으므로 매우 빈번하게 변경되고 SEO에 크게 의존하는 매우 동적인 콘텐츠를 포함하고 있는 사이트에 적합함.
정리
- 렌더링 방식엔 여러 방법들이 존재하고, 각각의 장단점이 있음. 프로젝트의 요구 사항과 UX 계획에 따라 적절한 렌더링 방식을 선택해야함.
- 하나의 웹 사이트에서도 다양한 렌더링 방식을 혼합해서 사용할 수 있음. 예를 들어, 홈 페이지에서는 SSG를 사용해 빠른 로딩 속도를 제공할 수 있고 FAQ 페이지에서는 ISR로 최신 정보를 반영할 수 있게 하며 실제 웹 앱 부분에서는 CSR을 통해 동적인 기능을 구현할 수 있음.
그래서, 왜 Next.js?
- 리액트 자체는 CSR에 중점을 두고 있지만 리액트 기반의 프레임워크인 Next.js를 사용하면 각기 다른 렌더링 방식을 혼합해서 사용할 수 있다!
Reference
벨로그로 이사 중