노마드 코더의 완전 새로운 리액트가 온다? 핵심정리 10분컷 을 보고 요약한 내용입니다.
1. React Suspense
v16~17 | code splitting with React.lazy(Client)
v18 | Data fetching via compatible libraries, like Relay.(Client)
Streaming server rendering(Server)
Suspense 없을때
로딩 체크하는 로직이 컴포넌트 내부에 있음
function Profile(){
const {data: profile, isLoading } = useQuery("profile",fn);
if(isLoading){
return <Loader />;
}
return <dib>Hello {profile.name}! Welcome!</div>
}
Suspense 있을때
로딩 상태를 컴포넌트와 분리, Suspense 를 사용하면 로딩 state 잊어도 됨. 로딩 상태를 컴포넌트와 분리
function Profile(){
const {data: profile} = useQuery("profile",fn);;
return <div>Hello {profile.name}! Welcome!</div>
}
Loading state가 컴포넌트 외부로 빠짐. 로딩 로직이 밖으로 빠짐으로써 컴포넌트 흐름 파악이 훨씬 간결해짐
<Suspense fallback={<Loader /}>
<Profile />
</Suspense>2. Server Side Rendering
Client side rendering : 모든 것이 클라이언트쪽에서 일어남
- 서버 : 브라우저가 다운받을 JS 파일을 제공
브라우저 : 리액트 코드가 들어있는 JS 파일 실행함
리액트 : 유저가 볼 수 있는 모든 HTML 요소와 UI 렌더링 - 웹사이트에는 어떠한 콘텐츠나 UI가 없으며, JS가 브라우저에서 비활성화되거나 다운로드가 느려지면 유저는 빈 화면만 보게 됨
Server side rendering :
- 서버 : 유저에게 응답하기 전에, 서버에서 리액트를 실행
리액트 : ui를 렌더링하고 결과 HTMl 을 제공. 해당 html를 유저에게 제공
브라우저 : html 페이지만 갖고 있고 인터렉션은 없음 - 서버사이드가 클라이언트보다 복잡하지만 유저경험이 좋음
서버사이드의 문제!
서버에서 먼저 전체 어플리케이션을 렌더링하게 때문에 어느 한 컴포넌트가 로딩하는데 오래걸리면 백엔드에서 전체 렌더링하는 동안 유저는 빈화면을 볼 수 있음.
<App>
<Header />
<Posts />
</App>해결! Suspense가 활성화된 서버사이드 렌더링
- Suspense로 post 컴포넌트를 감싸서 유저는 header를 볼 수 있음
서버 사이드에서 로딩을 끝낼 때, http 스트림을 사용해 리액트는 loader 컴포넌트의 html을 post 컴포넌트의 결과 html 로 대체함. - suspense 덕분에 어플리케이션이 빠르게 렌더링할 수 있음 .
<App>
<Header />
<Suspense fallback={<Loader />}>
<Posts />
</Suspense>
</App>Suspense 덕분에 전체 애플리케이션을 한꺼번에 로드할 필요가 없음
아직 hydreate 안된 걸 유저가 선택하면 유저가 인터렉션하기 원하는 그 컴포넌트 hydrate 로딩을 먼저함
Server component
- 서버 컴포넌트는 백엔드에서만 존재하는 리액트js코드를 쓸 수 있음
- 파일명을 통해 미리 어느 컴포넌트가 브라우저가 렌더링할지 서버가 렌더링할지 선택가능
- 로딩이 빨라지고 ux도 엄청 향상됨
매우 무거운 패키지에 의존하는 컴포넌트가 있다면, 클라이언트 사이드 렌더링에서는 유저는 코드 그리고 해당 패키지를 다운로드해야하므로 로딩 속도도 오래걸리고 어플리케이션 사이즈 커짐
서버 컴포넌트로 전환하면 컴포넌트 렌더링은 서버에서 수행되고 렌더링의 결과값만 유저에게 스트리밍 됨. - DB랑 직접적으로 커뮤니케이션 하는 리액트 컴포넌트가 생김. SQL 쿼리 수행 가능
