react 18 버전에서는 여러 기능이 추가 되었다.
첫 번째 기능으로는 Reaact Suspense이다.
이거는 16버전에도 있었는데 실험적으로 테스트 하고 있었는데 18버전 부터는 더이상 실험적이지 않고 서버 사이드 렌더링과 함께 더욱 강력해졌다.
Data Fetching을 사용할 수 있어서 코드를 더욱 간결하게 사용할 수 있다.
그래서 Suspense는 어떨때 쓰나? 만약 사용하지 않았을때 서버에서 get을 할 때 로딩하는 기능을 만든 적 있을 것이다.
const [profile,setProfile] = useState();
useEffect(() => {
fetch('${API}').then(res => res.json()).then(setProfile)
},[]);
if (!profile) {
return <Loading />
}
return <div>Hello {profile.name}!</div>
이와 같이 데이터를 state에 유지하고 useEffect 훅에 fetching을 사용하는 요런 코드가 익숙하거나 useEffect를 사용하지 않고 react query나 swr을 이용할 수 있다.
const {data, isLoading } = useQuery("profile", () => fn);
if (!isLoading) {
return <Loading />
}
return <div>Hello {profile.name}!</div>이와 같이 코드가 개선이 되었지만 Suspense로 더욱 개선할 수 있다.
우리가 하는거는 컴포넌트 안에서 로딩로직을 핸들링 하는 것이다.
로딩 중인지 파악하고 -> 컴포넌트를 보여준다.
이러한 로딩 상태를 컴포넌트와 분리하는 것은 어떨까??
이전엔 로딩 state가 component 안에 있었다면 이제는 외부에 있는다.
<Suspense fallback={<Loader />}>
<Profile />
</Suspense>이와 같이 렌더링 한다.
만약 데이터를 컴포넌트에 가져오지 않으면 데이터와 함께 이미 있는 컴포넌트를 보여줄 것이다.
리엑트 서버사이드와 제공하는 Suspense
리엑트는 CSR로 클라이언트 사이드 렌더링을 제공한다.그래서 유저가 웹사이트를 방문하면 UI가 안보인다. 왜냐하면 첫 로딩할때 react는 빈 html파일을 제공하고 우리가 유저에게 브라우저가 다운받을 js 파일을 제공한다.
브라우저는 리액트 코드가 들어있는 JS 파일을 실행한다.
리액트가 실행 될 때 리액트는 유저가 볼 수 있는 모든 HTML요소와 UI를 렌더링 한다.
이 모든게 클라이언트에서 실행된다.
만약 js가 브라우저에서 비활성화 되거나, 인터넷이 느려서 js 파일 다운로드가 느려지면 사용자 경험에서 이탈율이 증가 할 것이다.
서버사이드는 이와 반대로 유저가 응답하기 전에 서버에서 리액트를 실행해서 UI를 렌더링하고 결과 HTML을 제공한다. 유저에게 빠르게 화면을 보여줄 수는 있지만 사용자 인터렉션은 할 수 없다. 아직 js를 다운받지 않아서 이다.
예를 들어 어플리케이션을 렌더링 하려고 하면
<App>
<Header />
<Posts />
</App>Posts 컴포넌트 렌더링이 끝날 때 까지 유저는 header 컴포넌트를 볼 수 없다.
즉 유저는 빈화면을 보게 된다. 이를 해결하기 위해 react 18에서는 Suspense가 활성화된 서버사이드 렌더링을 한번 보자.
<App>
<Header />
<Suspense fallback={<Loader />}>
<Posts />
</Suspense>
</App>Suspense로 Posts컴포넌트를 감싸면
<div>
<header>...</header>
<img src="loading.gif"/>
</div> 이런 형식으로 되어서
유저는 header 컴포넌트를 바로 볼수 있다.
Posts 컴포넌트가 서버 사이드에서 로딩을 끝낼 때 Http 스트림을 사용하여 리액트는 Loader 컴포넌트의 HTML을 Posts 컴포넌트의 결과를 브라우저에서 리액트가 로딩 되기도 전에 HTML로 대체할 수 있다.
Suspense 덕분에 어플을 빠르게 렌더링 할 수 있다.
