Loading UI and Streaming

ecoEarth 2023. 8. 2. 04:04

Loading UI and Streaming

loading.js는 pgae.js와 같은 Nex.js의 파일컨벤션이다. React의 Suspense개념과 같이 쓰여, 설정한 컴포넌트의 데이터가 서버로부터 받아지지 않았을 때 로딩스피너 혹은 스켈레톤UI와 같은 컴포넌트를 화면에 보여주어, 유저가 로딩중이라는 것을 알 수 있게 해준다.

'스트리밍'(일반적인)이란 무엇인가?

갑자기 스트리밍에 대해 강의해준다. SSR의 장단점에 알 수 있단다.

다음은 SSR로 인한 렌더링이 유저의 화면을 통해 보여지고, 유저와 상호작용할 수 있는 단계가 되기 전까지 거쳐야하는 일련의 과정이다.

렌더하고자 하는 페이지에 대한 정보가 서버로부터 fetch됨
서버가 페이지에 대한 HTML을 렌더함
그 렌더한 HTML과 CSS JS가 클라이언트로 보내짐
HTML과 CSS만 보여져, 상호작용할 수는 없는 사진과 같은 유저인터페이스가 화면에 보여짐
최종적으로 React hydrates가 JS파일을 HTML과 CSS와 연결하여 상호작용가능한 완전한 페이지가 됨

HTML 코드와 JS 코드를 서로 매칭시켜 동적인 웹사이트를 브라우저에 랜더링하는 기술이 등장했는데 이게 바로 Hydratation이다.

⭐️⭐️ 매우 중요

이러한 단계는 순차적이고 차단적이므로 서버는 모든 데이터를 가져온 후에만 페이지의 HTML을 렌더링할 수 있다.
그리고 클라이언트에서는 페이지의 모든 컴포넌트에 대한 코드가 다운로드된 후에만 React가 UI에 Hydration을 할 수 있다.

React and Next.js에서의 '스트리밍'이란?

스켈레톤UI로 일단 뼈대만 클라이언트에게 준다 하더라도 여전히 fetch에 필요한 시간을 상쇄시킨 느낌은 들지 않는다.

React와 Next.js는 서버에서 컴포넌트를 잘개 쪼개서(fetch하는데 시간이 필요한 부분과 fetch하지 않아도 되는 부분) 클라이언트한테 전달한다. 이렇게 하면 UI를 렌더링하기 전에 모든 데이터가 로드될 때까지 기다릴 필요 없이 페이지의 일부를 더 빨리 표시할 수 있다.

아무개 1, 2, 3는 컴포넌트이다.

전통적인 Streaming방식이었다면, A과정이 끝나아만 '아무개1'컴포넌트도 B과정으로 넘어가는데, React와 Next.js는 Streaming을 컴포넌트단위로 하기때문에 '아무개2'와 '아무개3'컴포넌트가 아직 데이터가 받아져오지 않은 상황에서도 벌써 B단계로 넘어가있다.

SEO

Next.js will wait for data fetching inside generateMetadata to complete before streaming UI to the client. This guarantees the first part of a streamed response includes <head> tags.

SEO최적화를 지원한다는 장점외에는 React에 비해 더 불편하고 조잡스러운 방식이 아닌가 생각이 들었다. React의 방식을 그대로 따라간다면, Componet폴더에 fallback용 로딩컴포넌트 만들고, Suspens와 함께 이용하면 되는 두단계의 절차인데 Next.js의 방식은 거기에 더해 loading.js파일까지 만들고 그 안에 return값으로 fallback용 로딩컴포넌트를 배치해야하기때문이다.