Data Fetching

1. Client에서 data fetching (기존 리액트 방법)

"use client";

import { useEffect, useState } from "react";

export default function Movies() {
  const [movies, setMovies] = useState("");
  const [isLoading, setIsLoading] = useState(true);

  const getMovies = async () => {
    const response = await fetch(
      "https://nomad-movies.nomadcoders.workers.dev/movies"
    );
    const json = await response.text();
    setMovies(json);
    setIsLoading(false);
  };

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

  return <div>{isLoading ? <div>Loading ...</div> : movies}</div>;
}

1. React에서는 컴포넌트를 async 함수로 선언할 수 없다. 즉, useState, useEffect를 사용해서 클라이언트 컴포넌트로 만들어줘야 함

2. 즉, fetch가 클라이언트에서 일어나기 때문에, api 등이 브라우저에 노출이 됨(보안 bad) - (2에서 해결)

3. isLoading을 일일히 체크해줘야 함 - (3에서 해결)

2. Server에서 data fetching + 로딩처리

const getMovies = async () => {
  const response = await fetch(
    "https://nomad-movies.nomadcoders.workers.dev/movies"
  );
  return response.text();
};

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

  return <div>{movies}</div>;
}

1. 컴포넌트를 async 함수로 선언할 수 있다!

2. 서버에서 fetch 하므로, 브라우저는 api 등 아무것도 모른다.

3. NextJS에서는 캐싱도 자동으로 해준다! >> 같은 요청이면 fetch를 수행하지 않고, 캐싱된 데이터를 보여줌

4. but, 이 서버 컴포넌트의 작업이 완료될 때까지 이 페이지로 넘어오지 못한다. (3에서 해결)

3. 로딩 화면 보여주기(loading.tsx)

const loading = () => {
  return <div>loading Movies ...</div>;
};

export default loading;

• 파일 위치는 page.tsx와 같은 level에 있어야 한다

• 로딩중일 때, layout만 우선 보여준다

4. 병렬적으로 fetching하기(Promise.all)

import { moviesURL } from "../page";

export const getMovie = async (id: string) => {
  const response = await fetch(`${moviesURL}/${id}`);
  return response.json();
};

export const getVideos = async (id: string) => {
  const response = await fetch(`${moviesURL}/${id}/videos`);
  return response.json();
};

export default async function Movies({
  params: { id },
}: {
  params: { id: string };
}) {
  const movie = await getMovie(id);
  const videos = await getVideos(id);
  return (
    <h1>
      {movie.title} {JSON.stringify(videos)}
    </h1>
  );
}

const [movie, videos] = await Promise.all([getMovie(id), getVideos(id)]);

먼저 끝난 fetching 결과를 먼저 보여주기(Suspense)

• 비동기 작업이 완료될 때까지 대체 UI를 표시해주는 기능

• fallback : component가 await되는 동안 표시할 컴포넌트를 render해줌

• 이는 사용자 경험을 개선하고, 특히 데이터 로딩이나 지연된 컴포넌트 로드 시 유용하게 사용할 수 있

import { moviesURL } from "../(movies)/movies/page";

export const getMovie = async (id: string) => {
  const response = await fetch(`${moviesURL}/${id}`);
  return response.json();
};

const MovieInfo = async ({ id }: { id: string }) => {
  const movie = await getMovie(id);
  return <div>{movie.title}</div>;
};

export default MovieInfo;

import { moviesURL } from "../(movies)/movies/page";

export const getVideos = async (id: string) => {
  const response = await fetch(`${moviesURL}/${id}/videos`);
  return response.json();
};

const MovieVideos = async ({ id }: { id: string }) => {
  const videos = await getVideos(id);
  return <ul>{videos.map((video) => video.name)}</ul>;
};

export default MovieVideos;

import { Suspense } from "react";
import MovieInfo from "../../../components/movie-info";
import MovieVideos from "../../../components/movie-videos";

export default async function Movies({
  params: { id },
}: {
  params: { id: string };
}) {
  return (
    <div>
      <h3>Movie detail page</h3>
      <Suspense fallback={<div>movie info Loading...</div>}>
        <MovieInfo id={id} />
      </Suspense>
      <Suspense fallback={<div>movie videos Loading...</div>}>
        <MovieVideos id={id} />
      </Suspense>
    </div>
  );
}