Data Fetching

Odyssey·2025년 1월 13일

Client Side data fetching fetching server side 데이터

Next.js_study

목록 보기

10/58

2025.1.13 월요일의 공부기록

Next.js에서 데이터를 가져올 때, 클라이언트 사이드와 서버 사이드에서 Fetching을 수행할 수 있다.
두 방식은 동작 방식, 성능, SEO 적합성에서 차이를 보이며, 각각의 장단점이 있다.

클라이언트 사이드 데이터 Fetching

클라이언트 사이드에서 데이터를 Fetching하는 방식은 브라우저에서 JavaScript 코드가 실행된 후 데이터를 요청하는 방식이다.

코드 예제

"use client";

import { useEffect, useState } from "react";

export default function Page() {
  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>;
}

작동 방식

초기 로드: 서버에서 HTML만 로드되며, 데이터는 포함되지 않는다.
브라우저 실행: 브라우저가 자바스크립트를 로드하고, useEffect로 데이터를 Fetching한다.
UI 업데이트: 데이터를 받아온 후 상태를 업데이트하여 UI를 갱신한다.

장점

빠른 초기 로드
서버가 HTML만 반환하므로 초기 로딩 속도가 빠르다.
유연성
특정 조건에 따라 데이터를 Fetch하거나, 사용자 상호작용에 따라 데이터를 로드할 수 있다.
비동기 처리
브라우저에서 Fetch 작업이 수행되므로 서버 부하를 줄일 수 있다.

단점

SEO에 불리
초기 HTML에 데이터가 포함되지 않으므로 검색 엔진이 데이터를 크롤링하기 어렵다.
느린 사용자 경험
브라우저가 데이터를 Fetch하고 UI를 갱신하기까지 시간이 걸릴 수 있다.
추가적인 네트워크 요청
브라우저가 데이터를 Fetch해야 하므로 요청 시간이 늘어날 수 있다.

서버 사이드 데이터 Fetching

서버 사이드에서 데이터를 Fetching하는 방식은 Next.js 서버가 요청을 처리하는 동안 데이터를 Fetch하여 HTML에 포함하는 방식이다.

코드 예제

export const metadata = {
  title: "Home",
};
const URL = "https://nomad-movies.nomadcoders.workers.dev/movies";

async function getMovies() {
  await new Promise((resolve) => setTimeout(resolve, 5000)); // 로딩 상태 확인을 위해 5초 대기
  return fetch(URL).then((response) => response.json());
}

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

작동 방식

서버에서 데이터 Fetch: Next.js 서버가 데이터를 Fetch하고, HTML에 데이터를 포함한다.
HTML 전송: 클라이언트에 완성된 HTML을 반환한다.
하이드레이션: 브라우저에서 React가 하이드레이션을 통해 인터랙티브 기능을 추가한다.

장점

SEO 친화적
서버에서 데이터를 포함한 HTML을 생성하므로 검색 엔진이 데이터를 크롤링할 수 있다.
빠른 사용자 경험
초기 로드 시 완전한 데이터를 포함한 HTML이 로드되어 즉시 UI를 표시할 수 있다.
일관된 데이터 처리
서버에서 데이터를 Fetch하므로 클라이언트와 서버 간 데이터 불일치 문제가 줄어든다.

단점

서버 부하 증가
데이터 Fetching 작업이 서버에서 수행되므로 요청이 많아질수록 서버 부하가 증가할 수 있다.
응답 속도 지연
데이터 Fetching 시간이 길어질수록 초기 HTML 응답 속도가 느려질 수 있다.
유연성 제한
사용자 상호작용에 따라 데이터를 Fetch하려면 클라이언트 측 추가 작업이 필요하다.

클라이언트 사이드와 서버 사이드 Fetching 비교

항목	클라이언트 사이드 Fetching	서버 사이드 Fetching
SEO	검색 엔진이 데이터를 크롤링할 수 없음	데이터를 포함한 HTML이 제공되어 SEO에 유리
초기 로딩 속도	빠름 (HTML만 제공)	느림 (HTML 생성에 데이터 Fetch 포함)
사용자 경험	데이터 로딩이 완료되기 전까지 "로딩 상태"를 표시	데이터 포함 HTML 제공으로 즉시 UI 표시 가능
서버 부하	브라우저에서 Fetch하므로 서버 부하가 낮음	서버가 Fetch 작업을 처리하므로 부하가 높아질 수 있음
데이터 처리	사용자가 특정 조건에서 데이터를 동적으로 Fetch 가능	초기 HTML 렌더링 시 데이터를 포함하여 일관성 제공