loading.js로 로딩 상태 표현
loading.js를 폴더 안에 생성하면 layout.js를 제외한 page.js를 suspense로 감싼 형태로 로딩 상태를 표현한다.
Streaming with Suspense
스트리밍은 각 컴포넌트를 하나의 청크로 간주할 수 있다.
컴포넌트를 각각 Suspense로 감싸고 fallback을 사용하여 모두 로딩되기 전 대체되는 UI가 나타날 수 있게 한다.
렌더링 단계
1. 서버에서 데이터를 모두 패칭한다.
2. 서버가 페이지의 HTML을 렌더링한다.
3. 페이지의 HTML, CSS 및 JavaScript가 클라이언트로 전송된다.
4. 생성된 HTML 및 CSS를 사용하여 비대화형 사용자 인터페이스가 표시된다.
5. 마지막으로, React는 사용자 인터페이스에 hydrate하여 인터랙티브하게 만든다.
SSR에서 순차적인 단계로 실행되며 차단되므로(blocking) 서버는 모든 데이터를 가져온 후에만 페이지의 HTML을 렌더링할 수 있다.
클라이언트에서는 페이지의 모든 컴포넌트에 대한 코드가 다운로드된 후에만 React가 UI에 hydrate 할 수 있다.
React 및 Next.js를 사용한 SSR은 사용자에게 상호작용 하지 않는 페이지를 최대한 빨리 표시하여 체감 로딩 성능을 개선하는 데 도움이 된다. 그러나 페이지가 사용자에게 표시되기 전에 서버에서 모든 데이터 가져오기를 완료해야 하므로 여전히 느릴 수 있다.
스트리밍을 사용하면 페이지의 HTML을 더 작은 청크로 나누고 서버에서 클라이언트로 점진적으로 청크를 전송할 수 있다.
SEO
Next.js는 생성 메타데이터 내부의 데이터 가져오기가 완료될 때까지 기다렸다가 클라이언트로 UI를 스트리밍한다.
그 결과 스트리밍된 응답의 첫 부분에 <head> 태그가 포함되도록 보장한다.
스트리밍은 서버에서 렌더링되므로 SEO에 영향을 미치지 않는다.
'Next.js' 카테고리의 다른 글
| [Next.js] Route Groups (0) | 2024.05.22 |
|---|---|
| [Next.js] Redirecting (0) | 2024.05.22 |
| [Next.js] Error Handling (0) | 2024.05.20 |
| [Next.js] Linking and Navigating (0) | 2024.05.20 |
| [Next.js] Layouts and Templates (0) | 2024.05.17 |
