[Next.js] 데이터 가져오기

백엔드 API 웹 서버 시작

npm start

 

 

백엔드 데이터 가져오기

1. NextJS의 별도 API를 통해 클라이언트 측에서 처리

useEffect(() => {
    async function fetchNews() {
      const response = await fetch("http://localhos:8080/news");

      if (!response.ok) {
        setError("Failed to fetch news.");
        setIsLoading(false);
      }

      const news = await response.json();
      setIsLoading(false);
      setNews(news);
    }
    fetchNews();
  }, []);

-> NextJS 사용 시 데이터 로딩하는 최선의 방법은 X

 

2. 컴포넌트 함수 내에서 비동기로 함수를 장식해 데이터 직접 가져오기 가능

서버 컴포넌트는 JSX 대신 Promise 반환 가능

import NewsList from "@/components/news-list";

export default async function NewsPage() {
  const response = await fetch("http://localhos:8080/news");

  if (!response.ok) {
    throw new Error("Failed to fetch news.");
  }

  const news = await response.json();

  return (
    <>
      <h1>News Page</h1>
      <NewsList news={news} />
    </>
  );
}

서버 측에서 실행되지만 컴포넌트 함수 내에서 fetch를 사용 가능한 건 Node.js가 서버 측 코드 실행을 지원하고 NextJS가 fetch 함수를 확장해 추가 캐싱 관련 기능을 추가했기 때문

 

 

데이터베이스 접근

npm install better-sqlite3

better-sqlite3 패키지의 장점은 비동기 API를 제공해 Promise를 만들지 않아서 기다릴 필요 없이 즉시 코드 실행 후 보여주기 가능

import sql from "better-sqlite3";

const db = sql("data.db");

export function getAllNews() {
  const news = db.prepare('SELECT * FROM news').all();
  return news;
}

import { getAllNews } from "@/lib/news";

export default async function NewsPage() {
  
  const news = getAllNews();

  return (
    <>
      <h1>News Page</h1>
      <NewsList news={news} />
    </>
  );
}

→ 데이터 소스에서 직접 데이터 가져오기

 

 

Suspense 훅

맞춤형 로딩 대체 화면 제공 가능

데이터를 가져오는 컴포넌트가 주위에 적용되면 해당 컴포넌트가 데이터 가져오고 있는지 자동으로 감지하고 그런 경우 대체 화면 표시

<Suspense fallback={<p>Loading news...</p>}>
  <FilterdNews year={selectedYear} month={selectedMonth} />
</Suspense>