1️⃣ CSR(Client-Side Rendering) 정의: 초기 페이지 요청 시 서버에서 빈 HTML과 전체 JavaScript 파일(React App)을 번들 형태로 전송하고, 브라우저는 JavaScript(React App)를 실행하여 HTML을 동적으로 생성하는 렌더링 방식이다. 과정: 렌더링 주체: 클라이언트 장점:향상된 UX 제공: 초기 페이지 요청 이후, 페이지 이동 시에는 서버에 새로운 HTML을 요청하지 않고, 전달받은 자바스크립트를 기반으로 동적으로 렌더링 하여 빠른 전환이 가능서버 부하 감소: 초기 페이지 요청 이후, 대부분의 렌더링 작업을 클라이언트 측에서 처리하므로 서버 부하가 줄어듦 단점:초기 로딩 지연: 첫 페이지 로드 시, 필요한 모든 자원(HTML, CSS, JavaScr..

📝 순서초기 HTML을 서버에서 생성해 브라우저에 전송하여 검색 엔진 최적화(SEO)와 빠른 FCP(First Contentful Paint) 제공한다.서버 컴포넌트는 서버에서만 실행시켜, js.bundle에는 포함시키지 않아 번들 크기를 줄여 빠른 TTI(Time to Interactive) 제공한다.초기 페이지 이후, 페이지 이동은 CSR(Client Side Rendering) 방식으로 처리하여, 빠른 페이지 전환과 부드러운 UX를 제공한다. Rendering 과정 🚊 브라우저 초기 요청 단계 🔵 1. 서버에서 사전 렌더링 (SSR + RSC 시작)2-1. 서버 컴포넌트 실행서버에서 우선적으로, 서버 컴포넌트(RSC)가 실행이 과정에서 데이터 페칭, 계산 등 서버 사이드에서 필요한 로직을 ..