본문 바로가기

Streaming2

[next 14 공식문서 부시기] 4.1 Server Components Server Components React Server Components 를 사용하면 서버에서 렌더링하고 선택적으로 캐시할 수 있는 UI를 작성할 수 있습니다. Next.js에서는 streaming 과 partial rendering을 활성화하기 위해 렌더링 작업이 경로 세그먼트별로 추가로 분할됩니다. 기본적으로 Next.js는 Server Components를 사용합니다. 필요할 때 Client Components 사용을 선택할 수 있습니다. 서버 렌더링의 이점 Data Fetching: Server Components 를 사용하면 서버 데이터 소스에 더 가까운 서버에서 데이터 요청을 수행할 수 있습니다 . 이를 통해 렌더링에 필요한 데이터를 가져오는 데 걸리는 시간과 클라이언트가 수행해야 하는 요청.. 2024. 2. 24.
[next 14 공식문서 부시기] 2.2 Loading 페이지와 Streaming Loading UI loading.js 파일을 활용해 콘텐츠가 로드되는 동안 서버에서 로딩 상태를 표시할 수 있습니다 . 렌더링이 완료되면 새 콘텐츠가 자동으로 교체됩니다. ※ Instant Loading States 같은 폴더에서 loading.js 는 layout.js 안에 중첩됩니다. page.js 파일과 그 아래의 모든 하위 항목을 경계에 자동으로 래핑합니다. Streaming 기존 SSR 의 이해 먼저, 특정 페이지의 모든 데이터를 서버에서 가져옵니다. 그런 다음 서버는 페이지의 HTML을 렌더링합니다. 페이지의 HTML, CSS 및 JavaScript가 클라이언트로 전송됩니다. 상호작용은 없는 사용자 인터페이스는 생성된 HTML 및 CSS를 사용하여 표시됩니다. 마지막으로 React는 hydr.. 2024. 1. 15.