next.js 에서 data fetching

 

기존 react에서는 client에서 data fetching을 시도하기 때문에 비밀정보 등을 넣을 수 없다. 개발자 도구를 통해 network 탭에 들어가면 통신하고 있는 정보들을 볼수있기 때문이다. 또한 이렇게 정보가 유출되면 데이터 베이스와 통신도 할 수 없다.

 

또한 client 에서 data fetching을 진행하면 항상 usestate를 사용해야하며 그에 맞는 useEffect도 사용해야한다. 또한 항상 클라이언트 측에서 로딩상태는 존재하기 때문에 이에 대한 처리도 진행해줘야한다.

 

sever에서 이를 data fetching를 진행하면 API 를 통해 데이터베이스에 접근할 필요가 없으며 위의 hook들을 사용할 필요가 없어진다. 또한 로딩상태는 클라이언트 쪽이 아닌 서버측으로 옮겨간다.

 

next.js에서 서버 컴포넌트를 사용한다면 자동으로 fetch 된 url을 캐싱해준다. 또한 브라우저는 어떤것도 fetch 하지 않는다. 즉, 클라이언트는 fetch 하지 않는다. fetch는 서버측에서 일어난다. (방금도 언급했듯이 로딩상태는 서버측에 계속 존재한다. 이러한 문제는 서버가 API와 통신을 끝내기 전까지 아무 화면도 보여주지않는 문제를 낳는다.)

 

정리하자면 즉, 처음에만 서버를 통한 fetch 가 일어난다.

 

loading 페이지

data fetching을 하는 페이지가 서버에서 작업을 마치기 전까지 그동안 보여주는 UI를 설정하는 page

-> loading 페이지를 적용하고자하는 폴더에 두자

 

streaming

서버가 만들어내는 HTML 페이지를 작은 단위 쪼개 클라이언트로 계속 전송하는 기술

 

Suspense

구성요소가 렌더링 되기 전에 어떠한 것을 대기상태로 올려놓을수있는 것

<Suspense fallback={<div>"loading..."</div>}>
  <SomethingData/>
</Suspense>

error 페이지

error가 일어나는 페이지 폴더에 error 파일을 만들어 두면 에러가 생길때 해당 파일을 렌더링한다. 즉, 애플리케이션 전부가 먹통이 되는것이 아닌 해당 에러 페이지가 먹통이 되는것이므로 다른 작업을 가능케한다.

-> error 페이지를 적용하고자하는 폴더에 두자