React Server Component(RSC)

[작성 중] Next.js가 화면을 렌더링하는 원리

[작성 중] Hydration

[작성 중] Lazy Hydration

[작성 중] 폴더/파일 구조

Next.js에 index.html은 어디에?

CSR(Client-Side Rendering)

클라이언트의 웹 브라우저에서 자바스크립트를 이용해 서버로부터 필요한 자원을 불러온 뒤, 클라이언트의 웹 브라우저에서 페이지를 렌더링하는 방식

장점

• 사용자의 브라우저에서 렌더링하기 때문에 서버 부하가 적음
• 서버에서 렌더링하지 않기 때문에 API 서버가 분리될 수 있음
• 빠른 페이지 이동 속도

단점

• 초기 로딩 시간이 길 수 있음
• 검색 엔진 최적화(SEO)가 어려움
• 브라우저에서 렌더링하므로 클라이언트의 기기 성능에 의존함

SSR(Server-Side Rendering)

서버에서 페이지를 렌더링한 뒤, 클라이언트에게 보내주는 방식

장점

• 초기 렌더링 속도가 빠름
• 검색 엔진 최적화(SEO)가 용이함
• 서버에서 렌더링하기 때문에 클라이언트에서 사용하는 기기의 성능에 덜 의존함

단점

서버에서 렌더링하기 때문에 서버 부하가 커질 수 있음

SSG(Static Site Generator)

필요한 모든 URL에 대해 빌드시점에서 사전에 렌더링하여 HTML 생성 -> 서버 저장 -> 사용자의 요청이 발생하면 완성된 페이지를 반환

<aside> 📌 SSG vs SSR 공통점

• 서버측에서 페이지를 사전에 렌더링해서 클라이언트에 전달

차이점

• SSR은 사용자의 요청에 따라 HTML이 생성
• SSG는 빌드시점에서 HTML이 생성. URL을 예측할 수 없거나 컨텐츠가 자주 변경되는 페이지에서는 적용이 힘듦. </aside>

SSG 동작 방식