서스펜스(Suspense)를 이용하여 기존에 페이지가 로딩되는 부분을 대처하는 방법을 배운 적이 있다.
try/ catch를 이용한 에러 상태를 대신하여 처리하는 방식이다.
서버 사이드 랜더링(SSR)에서도 이 서스펜스를 통해 비동기 렌더링을 진행할 수 있다.
사용법은 간단하다,
기존에 서스펜스를 사용하며, 서버컴포넌트를 사이에 두면 된다
<Suspense fallback={<div>로딩 중...</div>}>
<Todo />
</Suspense>
이렇게 되면 비동기 통신이 가능해지기때문에 서버와 프라우저간의 간극이 굉장히 많이 줄어들게 된다.
이렇게 되면 UX가 향상되게 된다
Streaming Server-Side Rendering
Generate HTML to be rendered on the server in response to a user request
www.patterns.dev
'NextJS' 카테고리의 다른 글
2024.3.15 기록 (glitch와 vercel을 이용한 배포) (0) | 2024.03.15 |
---|---|
2024.3.13 기록 (NextJS에서 useRouter를 사용해보자) (0) | 2024.03.13 |
2024.3.12 기록 (nextJS에서 외부 이미지 링크를 사용 할 때) (0) | 2024.03.12 |
2024.3.11 기록 (Next.JS의 렌더링) (0) | 2024.03.11 |