Recent Posts
Recent Comments
Archives
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- 구글 로그인
- deep dive
- Next
- 코딩테스트
- vercel
- js
- useRouter
- 자주 까먹는
- 모던자바스크립트
- 프로그래머스
- error
- vscode
- 코드카타
- git
- 프로젝트 셋팅
- nextjs
- 스파르타코딩클럽
- 셋팅
- 티스토리챌린지
- 초기셋팅
- 내일배움캠프
- React
- domain
- 리터럴
- 모던 자바스크립트
- CORS
- array정적메서드
- 코테
- 소셜 로그인
- 오블완
- Today
- Total
파피루스
SSR, CSR 방식의 장단점과 특징 본문
SSR (Server-Side Rendering)과 CSR (Client-Side Rendering)은 웹 애플리케이션을 렌더링하는 두 가지 방식으로, 각각 고유한 장점과 단점이 있습니다.
1. SSR (Server-Side Rendering)
SSR은 웹 페이지의 HTML을 서버에서 미리 생성하여 클라이언트(브라우저)로 전달하는 방식입니다. 사용자가 페이지를 요청하면, 서버가 HTML을 렌더링하고 클라이언트로 전송합니다.
특징
- HTML은 서버에서 완성된 형태로 전달됨
- 클라이언트 측에서 별도의 JavaScript 로직이 없더라도 페이지가 바로 보임
장점
- 빠른 초기 로드 시간: 서버에서 완성된 HTML을 전송하기 때문에 초기 로딩이 빠릅니다. 특히 저사양 기기나 느린 네트워크 환경에서 이점이 큽니다.
- SEO 최적화: 검색 엔진 크롤러가 페이지를 쉽게 읽고 인덱싱할 수 있어 검색 엔진 최적화(SEO)에 유리합니다.
- 더 나은 첫 화면 제공: 사용자는 초기 로딩에서 완전한 HTML 페이지를 받아 화면이 빠르게 표시됩니다.
단점
- 서버 부하 증가: 요청할 때마다 서버가 HTML을 렌더링하기 때문에 트래픽이 많을수록 서버의 부하가 증가합니다.
- 인터랙티브 지연: HTML은 빠르게 렌더링되지만, JavaScript가 실행되기 전까지는 페이지가 완전히 인터랙티브하지 않을 수 있습니다.
- 동적 컨텐츠 처리: 자주 업데이트되는 실시간 데이터를 처리하는 데 적합하지 않을 수 있습니다.
2. CSR (Client-Side Rendering)
CSR은 초기에는 빈 HTML만 서버에서 전송하고, JavaScript가 로드된 후 클라이언트 측에서 페이지를 렌더링하는 방식입니다. 주로 React, Vue.js, Angular 같은 SPA(Single Page Application)에서 사용됩니다.
특징
- HTML 파일 자체는 간단하고, 대부분의 UI가 JavaScript로 렌더링됨
- 클라이언트가 JavaScript로 데이터를 받아와 페이지를 구성
장점
- 서버 부하 감소: 클라이언트 측에서 렌더링이 이루어지므로 서버 부하가 적습니다.
- 역동적인 사용자 경험: 실시간 데이터를 처리하거나, 사용자가 많이 상호작용하는 애플리케이션에 적합합니다. 페이지 새로 고침 없이도 부분적인 UI 업데이트가 가능해 사용자 경험이 향상됩니다.
- 개발 생산성: 코드 재사용성과 구조화된 데이터 흐름을 통해 개발이 편리합니다. 특히 SPA에서 유리합니다.
단점
- 느린 초기 로드 시간: 초기 로딩 시 JavaScript 파일이 모두 다운로드되고 실행되어야 하기 때문에 초기 로딩 시간이 길어질 수 있습니다.
- SEO 문제: 초기 HTML은 빈 상태이므로, 검색 엔진이 페이지를 제대로 크롤링하지 못할 수 있습니다. 검색 엔진에 따라 JavaScript로 렌더링된 콘텐츠를 제대로 인식하지 못하는 경우도 있습니다.
- 초기 렌더링 속도: JavaScript가 로드되고 실행될 때까지 페이지가 표시되지 않거나 비어 있는 상태로 보일 수 있습니다.
정리
SSR (Server-Side Rendering)CSR (Client-Side Rendering)
초기 로드 시간 | 빠름 | 느림 (JavaScript 로드 필요) |
SEO | 유리 | SEO에 불리 (JavaScript가 처리 필요) |
서버 부하 | 서버 부하 증가 | 서버 부하 적음 |
동적 데이터 처리 | 불리 | 유리 (실시간 데이터, 상호작용 많은 페이지) |
첫 화면 로딩 | 빠름 (즉시 보임) | 지연 (JavaScript 실행 후 보임) |
혼합된 접근법 (Hydration, ISR, SSG 등)
현대 웹 애플리케이션에서는 SSR과 CSR을 혼합한 접근 방식도 많이 사용됩니다. 예를 들어, Next.js 같은 프레임워크는 SSR과 CSR을 결합한 Hydration이나 Incremental Static Regeneration(ISR) 같은 방식을 제공하여 양쪽의 장점을 활용할 수 있습니다.
'Today I Learned' 카테고리의 다른 글
디바운싱, 쓰로틀링 : 이벤트 제어로 성능 최적화 기법 (0) | 2024.09.12 |
---|---|
OAuth 2.0 다이어그램 (0) | 2024.09.04 |
[vscode] eslint, prettier 자동 실행하는 설정들 (0) | 2024.08.31 |
이력서 작성 TIP (0) | 2024.08.26 |
[frontend] 면접 예상 질문지 (0) | 2024.08.05 |