[Next.JS] Data Fetching

Data Fetching

 

React에서 일반적으로 data를 fetching 하는 방법

"use client";

import { useEffect, useState } from "react";

export default function Page() {
  const [isLoading, setIsLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  const getMovies = async () => {
    const response = await fetch(
      "https://nomad-movies.nomadcoders.workers.dev/movies"
    );
    const json = await response.json();
    setMovies(json);
    setIsLoading(false);
  };
  useEffect(() => {
    getMovies();
  }, []);
  return <div>{isLoading ? "Loading..." : JSON.stringify(movies)}</div>;
}

 

 

 

 

api를 통해 db에 요청을 보내야 한다. 그렇기 때문에 백엔드에서 받아오는 시간이 길어지면 길어질수록 로딩 시간이 길어지게 된다.

 

 

 

 

항상 fetch는 client에서 일어난다.

 

 

 

서버 컴포넌트에서 fetch한다는 것은 1. useEffect, useState 를 쓰지 않아도 된다는 것  2. 로딩 상태도 구현하지 않아도 된다는 것!

 

 

client component에서는 metadata를 쓸 수 없다

넥제와 서버 컴포넌트가 있으면 api가 더 이상 필요없다

 

 

export const metadata = {
  title: "Home",
};
const URL = "https://nomad-movies.nomadcoders.workers.dev/movies";

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

export default async function HomePage() {
  const movies = await getMovies();

  return <div>{JSON.stringify(movies)}</div>;
}

 

 

 

 

API를 사용하지 않는 걸 확인할 수 있다.

백엔드에서 실행되는 것이다!

fetch된 데이터가 존재하기 때문에 처음에만 진짜 fetch가 된다

 

 

---

 

Loading.tsx

 

 

 

우선 page.tsx 안에서 setTimeout으로 10초를 로딩시켜본다

백엔드가 data를 가져오는 시간을 늘리는 것!

 

 

그럼 이렇게 로딩이 되어진다. 이 때 화면에는 아무것도 표시되지 않는데 이를 위해서 not-found나 layout처럼 loading.tsx를 만들어 코드를 구현하면 된다. 

 

export default function Loading() {
  return <h2>Loading...</h2>;
}

 

 

로딩 중일 때, 내가 설정해놓은 코드대로 화면에 UI가 생성된다.

 

 

 

 

---