Vercel에서 React 18의 Suspense를 사용해서 INP를 개선한 과정입니다. INP는 Interaction to Next Paint의 약자로 사용자 인터랙션에 대한 반응성을 객관적으로

Vercel에서 React 18의 Suspense를 사용해서 INP를 개선한 과정입니다. INP는 Interaction to Next Paint의 약자로 사용자 인터랙션에 대한 반응성을 객관적으로 측정하기 위한 지표로 현재 사용하고 있는 FID(First Input Deplay)보다 반응성을 더 잘 측정하기 위해서 만들어진 실험적인 지표입니다. React 17까지는 페이지의 전체 JavaScript를 로드해야만 페이지가 반응할 수 있었는데 React 18부터는 Suspense로 논블로킹 하이드레이션이 가능해 졌기 때문에 FID와 INP를 더 좋게 만들 수 있습니다. 케이스 스터디로 nextjs.org에서 Suspense로 선택적 하이드레이션을 적용해서 Total Blocking Time(TBT)을 430ms에서 80ms로 줄였다고 합니다.