server components 썸네일형 리스트형 React에서 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR) 차이 분석 SSR와 CSR은 동일한 React 컴포넌트를 어디서 렌더링하느냐(서버 vs 브라우저)에 따라 사용자 경험, SEO, 성능 프로파일이 달라집니다. 프로젝트 특성과 트래픽 패턴에 따라 전략을 섞는 것이 실무에서 일반적입니다.1. 개념 요약CSR(Client-Side Rendering)은 서버가 최소한의 HTML과 번들 JS를 보내고, 브라우저가 최초 렌더와 데이터 요청, 이벤트 바인딩까지 모두 수행합니다. 초기 TTFB는 빠를 수 있으나, JS 다운로드/파싱/데이터 로딩 전까지 빈 화면이 보일 수 있습니다.SSR(Server-Side Rendering)은 서버가 요청 시 HTML을 만들어 보내고, 브라우저는 즉시 마크업을 표시한 후 JS가 로드되면 하이드레이션으로 상호작용을 활성화합니다. 초기 인지 성능과.. 더보기 React에서 서버 컴포넌트(Server Components) 실험하기 React 18부터 실험적으로 도입된 서버 컴포넌트는 클라이언트가 아닌 서버에서 렌더링되어 성능 최적화에 도움을 줍니다. 이번 글에서는 서버 컴포넌트의 개념과 간단한 사용법을 실무 중심으로 살펴보겠습니다.1. 서버 컴포넌트란?서버 컴포넌트(Server Components)는 React 컴포넌트 중 서버에서만 렌더링되고, 클라이언트로는 HTML과 데이터만 전송되는 컴포넌트입니다. 클라이언트의 자바스크립트 번들 크기를 줄이고 초기 로딩 속도를 향상시킵니다.2. 실험 환경 설정서버 컴포넌트는 아직 React 공식 릴리즈에 완전 통합되진 않았지만, Next.js 13 이상과 같이 일부 프레임워크에서 지원합니다. 간단한 실험을 위해 Next.js 13 앱 디렉터리를 설정하세요.3. 서버 컴포넌트 작성하기서버 컴포.. 더보기 이전 1 다음