Next.js - (7) 비동기 작업을 통해 데이터 가져오기

 

이번 포스트에서는 Next.js에서 비동기 작업을 통해 데이터를 가져오는 방법에 대해 알아보겠습니다.

 

 

 

✅ 기본 구조

import Link from "next/link";
import classes from "./page.module.css";
import MealsGrid from "@/components/images/meals/meals-grid";

export default function MealsPage() {
  return (
    <>
      <header className={classes.header}>
        <h1>
          Delicious meals, created
          <span className={classes.highlight}>by you</span>
          <p>
            Choose your favorite recipe and cook it your self. It is easy and
            fun!
          </p>
          <p className={classes.cta}>
            <Link href='/meals/share'>Share Your Favoirte Recipe</Link>
          </p>
        </h1>
      </header>
      <main className={classes.main}>
        <MealsGrid meals={[]} />
      </main>
    </>
  );
}

 

위 코드는 MealsPage 컴포넌트에서 MealsGrid로 props를 넘기는 구조입니다.
하지만 현재는 meals 데이터를 비워둔 상태입니다.

 

 

 

 

✅ 기존 React에서의 데이터 패칭 방식

기존 React에서는 데이터를 가져오기 위해 보통 useEffect와 useState를 사용했습니다

useEffect(() => {
  fetchData().then(setData);
}, []);

 

이 방식은 클라이언트 컴포넌트에서만 가능하며, 렌더링 이후에 데이터를 가져오게 됩니다.
따라서 데이터가 로드되기 전까지 로딩 상태를 보여줘야 하고, SEO 측면에서도 불리합니다.

 

 

 

 

✅ Next.js의 데이터 패칭 방식

Next.js에서는 기본적으로 모든 페이지와 컴포넌트가 서버 컴포넌트(Server Component)로 동작합니다.
서버에서 실행되므로, 컴포넌트 함수 안에서 직접 async/await를 사용하여 데이터를 불러올 수 있습니다.

아래는 수정된 MealsPage입니다

 

import Link from "next/link";
import classes from "./page.module.css";
import MealsGrid from "@/components/images/meals/meals-grid";
import { getMeals } from "@/lib/meals";

export default async function MealsPage() {
  const meals = await getMeals();
  return (
    <>
      <header className={classes.header}>
        <h1>
          Delicious meals, crated
          <span className={classes.highlight}>by you</span>
          <p>
            Choose your favorite recipe and cook it your self. It is easy and
            fun!
          </p>
          <p className={classes.cta}>
            <Link href='/meals/share'>Share Your Favoirte Recipe</Link>
          </p>
        </h1>
      </header>
      <main className={classes.main}>
        <MealsGrid meals={meals} />
      </main>
    </>
  );
}

🔍 핵심 포인트 요약

• Next.js의 서버 컴포넌트는 서버에서 실행되므로 async/await를 직접 사용할 수 있습니다.
• 별도의 useEffect 없이 렌더링 전에 데이터를 불러올 수 있어, 초기 로딩 속도 및 SEO에 유리합니다.
• getMeals 같은 함수는 서버에서 실행되기 때문에 데이터베이스 접근 또는 API 호출도 직접 가능합니다.

---

Next.js의 서버 컴포넌트를 제대로 활용하면 코드가 더 간결해지고, 사용자 경험과 SEO 측면에서도 훨씬 유리해집니다.