Next.js Loading.js & Suspense

Next.js에서 Loading.js 파일이나 Suspense에 대한 중요성을 크게 생각하지 않았다. 

하지만 ssr의 특징을 테스트를 통해서 보니 확실하게 이해가 되었다. 

 

ssr의 장점이자 단점 

사용자가 홈페이지를 접속했을 때 HTML엔 이미 데이터가 담긴 채로 전달되기 때문에 초기 렌더링 속도가 

빠르다고 할 수 있다. 

---

※ csr은? 

csr의 경우에는 홈페이지에 접속하면 뼈대만 있는 HTML 파일을 보내주고 이후 다시 서버로부터 데이터를 

요청하기 때문에 초기 렌더링 속도가 느리다고 할 수 있다. 

---

이러한 장점은 크롤러 봇이 HTML을 빠르게 읽을 수 있기 때문에 SEO에 좋게 작용될 수 있다. 

 

하지만 서버 데이터를 ssr로 별다른 처리 없이 가지고 온다면 문제가 발생할 수 있다. 

서버에서 넘어오는 데이터의 속도가 느려진다면 사용자는 한없이 기다려야하는 문제가 발생할 수 있는 것이다. 

서버에서 넘어오는 데이터를 10초 뒤에 전달받을 수 있게 테스트로 작업하였다. 

10초라는 속도가 정말 극단적이라는 것은 알지만 간혹 우리가 홈페이지를 들어가면 한참 뒤에 홈페이지가 들어가지는 

경험을 했을 것이다. 

 

이런 페이지들이 위와 같이 html 파일을 구성하는데 시간이 오래걸리면서 사용자에게 늦게 전달되면서 

발생하는 문제라고 생각한다. 

 

이처럼 ssr이 초기 렌더링 속도는 빠르게 처리할 수 있지만 초기 렌더링을 구성하는 화면이 늦게 만들어진다면 

오히려 csr보다 늦게 보여질 것이다. 

 

이런 문제를 해결하기 위해서 Next.js에서는 loading.js와 Suspense를 제공한다. 

loading.js 

Next.js에서 사용할 수 있는 파일로 비동기 작업으로 대기 상태 동안 화면에 노출되는 영역이다. 

페이지를 로딩할 때 보통 헤더나 사이드바는 layout 요소에 들어가 있는 컴포넌트이고 page에서 data fetching 같은 

비동기 작업이 발생한다. 

 

이때 loading.js 에 컴포넌트를 export 한다면 data fetching이 완료되기 전엔 loading 컴포넌트가 렌더링되고 

완료되면 page의 컴포넌트가 렌더링 된다. 

loading.js 파일을 만들고 다시 접속했을 때는 data fetching과 관련 없는 부분은 렌더링이 되고 로딩 화면이 나타난 뒤 

data fetching이 끝나면 원래 나타나야 할 데이터가 렌더링된다. 

 

이 방법을 함께 사용한다면 ssr의 단점이 될 수 있는 초기 렌더링으로 인한 화면 구성 딜레이도 완화시킬 수 있을 것이다. 

물론 10초라는 로딩 시간은 너무 지나칠 수 있다 ( 근본이 잘못되긴 한 예시... )

Suspense 

loading.js는 Next.js에서 제공하는 좋은 기능이라고 생각할 수 있다. 

그렇다면 Suspense는 어떤 경우에 사용하는 것이 좋을까? 

한 페이지에서 2개 이상의 데이터를 가지고 와야하는 경우가 있을 것이다.

loading.js를 사용한다면 dynamic1, 2 전부 완료되야지 정상적인 화면이 렌더링 될 것이다. 

 

예를들어 상단 dynamic은 1초만에 완료되서 바로 사용자에게 보여줄 수 있는 화면인데도 dynamic이 3초 뒤에 데이터를 불러온다면 결과적으로 화면이 보여지는 시간은 페이지 호출 후 3초 뒤가 될 것이다. 

 

또는 페이지에서 특정 부분만 비동기로 가지고 오고 다른 부분은 정적 렌더링을 하는 경우가 있을 것이다. 

loading.js 파일은 비동기 작업을 진행한다면 page 대신 렌더링된다. 그렇다면 static으로 먼저 보여질 부분 조차도 

비동기 작업이 완료되야 보이게 된다. 

 

이처럼 부분적으로 데이터를 가지고 오고 싶은 경우 사용하는 방법이다.