[Next.js] fetch data, React vs Next.js

client component에서 기존의 API와 소통하던 방식

• useEffect 
• useState -> metadata 사용 불가
• 로딩 state 구현

'use client';

import { useEffect, useState } from 'react';

/* useState의 사용으로 인해, 사용 불가능
export const metadata = {
  title: 'Home',
};
*/

export default function Page() {
  const [isLoading, setIsLoading] = useState(true);
  const [movies, setMovies] = useState([]); //useState -> interactive component를 사용하겠다. -> "use client" 작성 필요
  const getMovies = async () => {
    const response = await fetch('URL');
    const json = await response.json();

    setMovies(json);
    setIsLoading(false);
  };

  useEffect(() => {
    getMovies();
  }, []);

  return <div>{isLoading ? 'Loading...' : JSON.stringify(movies)}</div>;
}

 

(Next.js 프레임워크 사용) server component에서 fetch

• useEffect, useState 사용 없이 동일한 기능 구현 가능
• Next.js 는 자동으로 fetch된 url을 캐싱한다 -> 새로고침 시, 다시 fetch X
  • Loading 상태가 없다? -> no, 처음 fetch 할 때 API가 느리다면 발생 가능 
  • 하지만 백엔드에서 fetch하고있기 때문에, 로딩 상태동안 web page 자체를 보여주지 않음 

// /app/page.tsx
export const metadata = {
  title: 'Home',
};

const URL = 'URL';

async function getMovies() {
  // const response = await fetch(URL);
  // const json = await response.json();
  // return json;

  //위 코드를 줄인 것
  return fetch(URL).then(response => response.json());
}

//어떤 일이 발생하기를 기다리려고 할 때, await 사용 -> await는 async 함수 안에서만 사용 가능
export default async function HomePage() {
  const movies = await getMovies();
  return <div>{JSON.stringify(movies)}</div>;
}

• (page.tsx 파일과 같은 위치에) loading.tsx 파일을 만들어주면, 프레임워크는 해당 파일을 자동으로 loading page component로 바꾼다.
  • 백엔드 서버에서 응답 대기 시, 유저는 웹UI를 기다리는게 아니고  loading component 를 바로 보게됨.
  • 백엔드 서버 응답 완료 시, 프론트엔드 프레임워크는 loading component 대신 기존 page 렌더링

// /app/loading.tsx
export default function Loading(){
	return <h2>Loading...</h2>
}