10월 21일 2기 위클리 페이퍼 (웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명, 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명)

# 10월 21일 2기 위클리 페이퍼 (웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명, 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명) ## PH

• 2024-10-22

## TOC ## 웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명 ### CSR (Client-Side Rendering) 특징: 모든 렌더링이 클라이언트 측(브라우저)에서 이루어집니다. 초기 로드 시 필요한 모든 JavaScript가 다운로드되어야 하므로, 초기 로딩 시간이 길어질 수 있습니다. 이후 페이지 탐색은 빠르고 동적입니다. 사용 상황: 사용자와의 실시간 상호작용이 많은 SPA (Single Page Application)에서 주로 사용됩니다. 초기 로딩 시간이 덜 중요하고, 사용자 경험이 페이지 이동의 속도에 의존하는 경우. ### SSR (Server-Side Rendering) 특징: 서버에서 HTML을 생성하여 클라이언트로 전송합니다. 초기 로드 시 빠르게 콘텐츠를 표시할 수 있습니다. 페이지 요청마다 서버에서 새로운 HTML을 생성합니다. 사용 상황: 초기 로딩 시간이 중요한 프로젝트. SEO가 중요한 웹사이트, 검색 엔진이 콘텐츠를 쉽게 크롤링할 수 있도록 하기 위한 경우. ### SSG (Static Site Generation) 특징: 빌드 타임에 HTML을 생성하고, 정적 파일로 서버에 배포합니다. 서버 부하가 낮고, 높은 성능을 자랑합니다. 정적 콘텐츠는 변경되지 않는 한 변경이 없습니다. 사용 상황: 정적 콘텐츠가 많은 블로그, 포트폴리오 사이트 등. SEO와 초기 로딩 시간이 중요한 사이트. ### 종합 각 렌더링 방식은 고유한 장점과 단점을 가지고 있으며, 프로젝트의 필요와 목표에 따라 적절하게 선택하는 것이 중요합니다. ## 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명 Next.js는 React의 기능을 확장하는 프레임워크로, 몇 가지 주요 이유 때문에 널리 사용됩니다:

서버사이드 렌더링 (SSR): Next.js는 React 애플리케이션을 서버사이드에서 렌더링할 수 있어 초기 로딩 시간을 줄이고 SEO를 개선합니다. 정적 사이트 생성 (SSG): Next.js는 정적 HTML 파일을 사전 생성하여 높은 성능과 보안성을 제공합니다. 라우팅: 내장된 파일 기반 라우팅 시스템으로 코드 분할 및 동적 라우팅이 간편합니다. API 라우트: 서버리스 함수와 통합하여 API 엔드포인트를 쉽게 생성할 수 있습니다. 자동 코드 분할: 페이지별로 코드를 자동으로 분할해서 성능 최적화가 돼요. 이미지 최적화: 내장된 이미지 컴포넌트로 이미지를 자동으로 최적화해줘요.

Next.js는 React의 유연성과 성능을 최적화하면서, 개발자 경험을 한 단계 높이는 다양한 기능을 제공합니다. React만으로는 복잡한 앱을 구축할 때 필요한 추가적인 설정과 기능을 제공하는 것이 Next.js의 큰 장점입니다.