Next.js - Data fetching (React vs Next.js)

📌React fetch 방법 

import { useEffect,useState } from "react";

export default function tomato() {
  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>
    )

}

 

fetch은 항상 client에서 일어난다. 즉 브라우저가 api요청을 보낸다는 것이다. 

이말은 다른 누군가 Network탭을 통해 api의 키와 같 중요한 정보를 알아낼 수 있다는 것이다. 

또한 이것은 데이터베이스와 통신할 수 없다는 이야기이기도 하다. 

 

하지만 Next.js 백엔드는 API 없이 데이터베이스와 직접 통신할 수 있다. 

Next.js에서 server component를 통해 fetch를 사용한다는 것은 useState, useEffect와 같은 것들을 필요 없다는 것이다. 어떻게 이런 일이 가능할까? 

 

백엔드 개발자는 항상 API를 만들어야 했다. 그래야 프론트엔드 즉 React 앱이 API와 통신할 수 있었다.

하지만 최신 버전의 Next.js가 있다면 API는 더 이상 필요없다.

 

 왜 async를 사용할까? -> await을 사용하고 싶기 때문이다. -> await은 어떤 일이 발생하기를 기다리려고 사용한다. -> await을 사용하기 위해서는 반드시 부모 함수에 async가 있어야 한다.

 

📌Next.js fetch 방법

export const metadata = {
  title: 'Home',
}

const URL = "https://nomad-movies.nomadcoders.workers.dev/movies"

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

export default  async function Hoempage() {
    const movies = await getMoives();
    return(
        <div>
         {JSON.stringify(movies)}
        </div>
    )

}

 

위의 코드는 useState, useEffect없이 fetch한 Next.js 코드이다. 왜 이런 일이 가능한 것일까?

Next.js는 프레임워크이기 때문이다. 

server component에서 next.js가 내가 fetch한 데이터를 기억한다. 또한 

fetch된 url을 캐싱시켜주는 것이다. 

그래서 첫번째 fetch만 api에 요청하고 나머지는 가짜이다. 

 

하지만 

아주 빠르긴 하지만 서버를 처음 킬 때 로딩 상태는 아직 존재한다. 

또한 API의 첫번째 요청이 대한 응답이 느리거나 데이터베이스에 요청한다면 로딩 상태가 길어질 수 있다. 

Next.js는 이렇게 로딩시간이 길어지면 홈페이지를 보여주지도 못한 채 데이터가 도착할 때까지 사용자가 기다리고만 있을 수 있다. 

 

 

 

✔️Loading Components 

 

(home) / loading.tsx

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

 

(home) / page.tsx

export const metadata = {
  title: 'Home',
}

const URL = "https://nomad-movies.nomadcoders.workers.dev/movies"

async function getMovies() {
  await new Promise((resolve) => {setTimeout(resolve,10000)})
  console.log("i'm fetching!!!")
   const response = await fetch(URL);
   const json = response.json();
   return json
}

export default  async function Hoempage() {
    const movies = await getMovies();
    return(
        <div>
         {JSON.stringify(movies)}
        </div>
    )

}

• 위와 같은 파일구조를 통해 home.tsx가 로딩되는 동안 loading.tsx파일이 브라우저에 보여진다. 후에 await된 component에서 HTML이 반환되면 그걸 브라우저에 넘겨주고 프론트엔드에서 변환되는 과정을 거친다. 
• 이 순서는 streaming처럼 http를 사용하고 있다. 
• 프레임워크가 우리의 페이지를 작은 HTML 부분으로 나누고 준비된 부분들을 하나씩 보여준다. 이것은 또 동시에 많은 것들을 fetch할 수 있다는 의미이다. 
• 로딩되고 있는 표시는 HTTP요청이 실제로 이루어지기 때문에 서버에 요청이 아직 끝나지 않았다는 표시이다. 

 

이렇게 함으로써 useState나 그 어떤 것도 사용하지 않고 백엔드에서 fetch를 사용할 수 있고 브라우저가 로딩되는 동안 사용자는 로딩 컴포넌트를 볼 수 있다는 2가지 장점을 다 갖추게 되었다. 

 

이때 loading 파일 page파일이 필수적으로 필요하다. 

 

참고자료 

• https://nomadcoders.co/nextjs-for-beginners/lectures/4706