- CSR(Client-Side Rendering)
- 특징: 브라우저에서 JavaScript를 사용하여 동적으로 페이지를 렌더링합니다. 초기 페이지 로드 시에는 HTML과 CSS만으로 렌더링되며, 이후 JavaScript를 사용하여 데이터를 받아와 렌더링합니다.
- 사용 상황: 대규모의 동적인 애플리케이션에서 사용됩니다. 사용자 경험을 향상시키고 SEO에 유리합니다. 단점으로는 초기 로딩 속도가 느릴 수 있습니다.
- SSR(Server-Side Rendering)
- 특징: 서버에서 초기 HTML을 생성하여 브라우저에 보내는 방식입니다. 서버에서 렌더링된 페이지가 먼저 보여지고, 이후 클라이언트 측 JavaScript가 로드되어 상호작용성을 추가합니다.
- 사용 상황: 초기 로딩 속도가 중요한 경우나 SEO가 필요한 경우에 사용됩니다. 정적 컨텐츠와 동적인 데이터를 결합하여 사용자에게 보여줄 수 있습니다.
- SSG(Static Site Generation)
- 특징: 빌드 시점에 사전에 페이지를 생성하여 정적 파일로 서비스합니다. 빠른 초기 로딩 속도와 SEO를 제공합니다. 데이터가 자주 변경되지 않는 경우에 적합합니다.
- 사용 상황: 블로그, 문서 사이트, 포트폴리오 등의 정적인 콘텐츠가 많은 웹 사이트에 적합합니다. 데이터가 자주 변경되지 않고, SEO 최적화가 필요한 경우에 사용됩니다.
각 방식은 프로젝트의 요구 사항과 성능, SEO 등의 요소를 고려하여 선택해야 합니다.
'react' 카테고리의 다른 글
넥스트.js 를 사용하는 이유 (0) | 2024.03.24 |
---|---|
타입스크립트의 동작 원리 (0) | 2024.03.24 |
리액트의 생명주기(Life Cycle) (0) | 2024.02.18 |
배열을 렌더링할때 key를 써야하는 이유 (0) | 2024.02.11 |
Virtual DOM (0) | 2024.02.03 |