fetch data

어케 데이터 를 잡아오죠?

client

react js에서 했던 방법 useState, useEffect를 써서 그대로 fetching해 주면 된다.

"use client";

import { useEffect, useState } from "react";

export default function HelloNext() {
  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>
      <h1>{isLoading ? "Loading..." : JSON.stringify(movies)}</h1>
    </div>
  );
}

처음 코드작성 이후에 실행하면 2가지 에러가 나오는데, 그 중 하나는 "use client" 상단에 추가하는것, 나머지는 client에서는 matadata를 사용할 수 없다는 에러이다. 추가해주고 없애주면 오류해결. 실행이 잘 되는것까지 확인된다. 문제는 누군가가 내 api에 접근하고자하면 쉽게 접근이 가능하다는것. 보안성이 떨어진다.

server

next js에서는 useState나, useEffect같은 react문법은 필요없다.

export const metadata = {
  title: "Home",
};
//server측인만틈 metadata도 설정가능하다.

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

async function getMovie() {
  return fetch(URL).then((response) => response.json());
}

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

loading화면도 구성할 필요가 없는게,

next js프레임워크가 자체적으로 url데이터를 캐싱해주기 때문이다.
useEffect처럼 한 번만 호출해줘라고 정하는것도 쩔었지만, 자동으로 캐싱해줘서 기능구현조차 안해도되게 하는게 프레임워크구나 ㅠ API 를 server component로 호출하기 때문에 모든 작업은 백엔에서 일어나고, api관련 코드를 노출시킬 수 없다. wow..

아무리 캐싱을 하더라도, 처음 페이지가 로드될때 api fetching 과정에서 페이지가 로딩이 되는걸 피할 순 없다.
await new Promise((resolve) => setTimeout(resolve, 5000));
임으로 api함수를 부르기 전에 5초의 텀을 주고 새로운 페이지를 열었을때, 사용자의 시선으로 본다면, 새로운 페이지의 ui는 백엔드 서버가 돌고 나서 나타나게된다. 즉 5+a시간 만큼 사용자는 이전 페이지에 머물게 된다...

의문점 : 왜 homepage기능에 async를 써야하는거죠?

=> getMoive()에서 await해야하기 때문이다.

next js가 코드를 처리하는 과정을 보자면!

<Loading /> //서버가 로드되는동안 next js 는 loading페이지의 html파편을 먼저 클라이언트에 제공한다.
const html = await HomePaga()
isLoading? <Loading/> : html

next js 는 streaming처럼 http를 사용한다.
여기서 streaming은 : 프레임워크가 우리페이지를 작은 html부분으로 나누고 준비된 부분들을 하나씩 보여주는거임. 동시에 많은것을 fetching할 수 있는것! 그리고 fetching된 data가 준비되면 브라우저를 통해 보내줄 수 있다.