리액트 복습

옛날옛적에 리액트를 쓸때, 아무런 외부 라이브러리를 사용하지 않고
fetch 로만 api 데이터 페칭하는 방법은 바로 👇

기존 리액트에서 fetch는 항상 클라이언트에서만 일어남

server component 에서 fetch하기

server component 에서 fetch 한다는 것은 위 코드처럼 useEffect, useState를 쓰지 않아도 된다는 것이다.

Next.js에선 이렇게 코드짜면 끝이다.
🌟Page컴포넌트가 async 함수로 되어야한다🌟

왜냐면🧐
만약 api통신이 오래걸리면, 브라우저에게 백엔드통신이 아직 마무리되지않았고 기다려야한다고 말하기때문. 컴포넌트는 기다려야하므로 await해야한다

그리고 리액트와 다르게, 다른곳에서 홈페이지로 다시 이동해도 로딩이없는것처럼느껴진다(짱빠름, 로딩은존재)

왜냐면🧐
서버컴포넌트에서 fetch 하면, fetch된 url을 캐싱시켜주기때문에 나중에 해당 사이트로 또 이동해도 loading 같은거 안뜸. 캐싱된 데이터가 있어서 바로보여주니까. 그래서 한번만 가져오면 끝이다.
Next.js가 fetch를 기억해서, 그걸 가져오니까 다시 fetch할 필요가 없다는거다.

추가로, 서버 컴포넌트에서 데이터를 페칭하고있으므로 새로고침하여도 브라우저 네트워크탭에서 api통신이 보이지않음. 왜냐? 서버에서 하고있우니까~

최신 데이터 필요하면 어캄..?👀

아니 계속 캐싱된 데이터 불러일으키면안되잔하
최신 데이터도 반드시 필요하잔하
데이터 새로고침해야하잔하

==> 캐싱, revalidation

하지만 이 강의에선 안봄

loading component

not-found.tsx가 있듯이, 로딩도 따로 컴포넌트가 잇답니다?
우선 로딩이되게끔 promise 코드 추가해서 5초후에 fetch되게끔한다.

async function getMovies() {
  await new Promise((resolve) => setTimeout(resolve, 5000)); //추가된 코드
  const response = await fetch(URL);
  const json = await response.json();
  return json;
}

걍 이렇게 loading.tsx 만들고 작성하면
참고로 파일 이름이 항상 loading이여야함

짜잔

정리

<Loading/> 👈 사용자는 홈페이지에 도착해 우리가 만든 로딩 컴포넌트를보고
await PageComponent 👈 그동안 Next.js가 페이지컴포넌트를 await하고, 이 await된 컴포넌트에서 html반환하면
<Loading/>이 사라지고, PageComponent 가 보여진다.