목차

용어

성능

• TTFB: Time to First Byte (첫 번째 바이트까지의 시간) - 링크를 클릭한 후 처음으로 들어오는 콘텐츠 비트 사이의 시간을 나타냅니다.
• FP: First Paint - 픽셀이 처음으로 사용자에게 표시되는 시점.
• FCP: First Contentful Paint - 요청 콘텐츠(기사 본문 등)가 표시되는 시점
• TTI: Time To Interactive - 페이지가 상호작용 가능하게 될 때까지의 시간 (이벤트 발생 등).

New Suspense SSR Architecture in React 18 #37

리액트 16.6.0 에 React.lazy와 함께 Suspense가 처음 등장했습니다.

Suspense는 비동기 로딩의 필요성을 감지하고 대체 로드 UI를 렌더링 하는 것입니다. 이게 전부였으면 그냥 Loading Spinner를 예쁘게 쓸 수 있게 해주는 syntactic sugar 에 불과했을 겁니다.

대부분의 React App들은 Webpack, Rollup, Browserify 같은 번들링 툴(이하 번들러)을 통해 번들파일을 웹페이지에 포함해서 한 번에 전체 앱을 로드했습니다.

번들링이란?

이는 흩어져 있는 많은 자원들을 하나의 파일로 병합하고 압축해주는 훌륭한 기능이지만, 앱이 커진다면 load 시간도 길어질 수 밖에 없습니다. 이를 방지하기 위해 code splitting을 통해 번들파일을 분할하고 필요에 따라 동적으로 불러오는 방식을 앞서 언급한 다양한 번들러들이 지원하고 있습니다.