CSR(Client-Side Rendering) vs SSR(Server-Side Rendering)
CSR (Client-Side Rendering)
- 개념: 웹 페이지의 렌더링을 클라이언트(브라우저)에서 처리하는 방식.
- 동작 원리: HTML 문서 로드 후, JavaScript가 실행되어 페이지의 UI를 렌더링하고 데이터를 채워주는 방식.
- 장점:
- 빠른 인터랙션: 처음 로드 이후에는 클라이언트에서 처리되므로 페이지 전환이 빠름.
- 리치 인터페이스: React 같은 프레임워크와 함께 사용하여 더 다이나믹한 사용자 경험 제공 가능.
- 리소스 절약: 서버는 초기 HTML만 전달하고 나머지는 클라이언트에서 처리.
- 단점:
- SEO 문제: 크롤러는 기본적으로 자바스크립트를 실행하지 않기 때문에, 초기 HTML이 비어있어 SEO에 불리함.
- 초기 로드 속도: 처음 페이지를 로드할 때, 모든 JS 파일을 다운로드하고 실행해야 하므로 시간이 오래 걸릴 수 있음.
SSR (Server-Side Rendering)
- 개념: 웹 페이지를 서버에서 미리 렌더링하여 HTML을 완성한 상태로 클라이언트에 전달하는 방식.
- 동작 원리: 서버가 요청을 받으면, JavaScript를 실행하여 페이지를 렌더링하고 완성된 HTML을 클라이언트에 보내줌.
- 장점:
- SEO 친화적: 서버에서 완성된 HTML을 제공하기 때문에 검색 엔진이 쉽게 크롤링 가능.
- 초기 로드 속도: 클라이언트는 바로 완성된 HTML을 받아보므로, 첫 화면 로드가 빠름.
- 단점:
- 서버 부하: 모든 요청에 대해 서버에서 페이지를 렌더링해야 하므로, 서버 자원이 많이 사용됨.
- 인터랙션 느림: 클라이언트에서 추가적으로 데이터를 가져오거나 렌더링할 때 추가적인 처리 시간이 필요할 수 있음.
리액트에서의 CSR vs SSR
- React에서 CSR: 일반적으로 React 애플리케이션은 CSR로 동작하며,
create-react-app
으로 생성한 프로젝트가 기본적으로 CSR. - React에서 SSR: SSR을 사용하려면
Next.js
같은 프레임워크를 사용. 이는 서버에서 React 컴포넌트를 렌더링한 후 클라이언트에 전달.
'Coding History' 카테고리의 다른 글
도커. fly.io (4) | 2024.11.06 |
---|---|
시험) 날씨 api (0) | 2024.11.03 |
JS 리액트 useEffect (0) | 2024.09.27 |
JS 리액트 TODO LIST (2) | 2024.09.26 |
리액트 (템플릿 리터럴, 컴포넌트 리팩토링, onChange) (1) | 2024.09.24 |