Page Router (6) - 사전렌더링, 데이터 페칭

2026.09.14 · 2분 읽기 · 조회 0

리액트에서는 어떻게 데이터를 불러왔나

먼저 리액트에서는 어떻게 데이터를 페칭했는지 짧게 복습을 해보자.

export default function Page(){
  return <div>...</div>
}

다음과 같은 컴포넌트가 있을 때

1. state 생성

export default function Page(){
  const [state, setState] = useState();
 
  return <div>...</div>
}

서버로부터 불러온 데이터를 보관할 state를 생성한다.

2. 데이터 페칭 함수 생성

export default function Page(){
  const [state, setState] = useState();
  //페칭 함수 생성
  const fetchData = async () => {
    const response = await fetch("...")
    const data = await response.json()
 
    setState(data)
  }
 
  return <div>...</div>
}

데이터를 페치해오는 함수를 만든다.
데이터를 불러온 후, 해당 state의 값으로 업데이트를 해준다.

3. 컴포넌트 마운트 시점에 fetchData 호출

useEffect(() => {
  fetchData()
}, [])

그리고 컴포넌트가 마운트 되었을 때 해당 함수를 호출한다.
이렇게 마운트 될 때 한 번 불러온 다음 해당 데이터를 이용한다.

단점

해당 방식은 단점이 있다.
백엔드 서버로부터 불러온 데이터가 화면에 나타나기 까지 오래 걸린다.

이유는 데이터 페칭이 컴포넌트 마운트 시점에 일어나기 때문이다.
애초에 리액트는 FCP가 느린데(참고) FCP가 지난 후에야 데이터 페칭이 일어난다.

하지만 Next에서는 이와 같은 문제가 해결된다. 애초에 사전 렌더링 을 시켜주기 때문에 FCP가 줄어들고, "초기 접속 요청" 때 데이터 페칭이 가능하기 때문이다.

즉, 서버가 내려주는 완성된 html 파일에는 이미 데이터가 불러와진 상태이다.

요약

React App의 데이터 페칭

• 컴포넌트 마운트 이후에 발생함
• 데이터 요청 시점이 느려지게 되는 단점 발생

Next App의 데이터 페칭

• 사전 렌더링 중 발생함(당연히 컴포넌트 마운트 이후에도 발생 가능)
• 데이터 요청 시점이 매우 빨라지는 장점 있음

그런데 만약 Next의 데이터 페칭이 너무 느리다면 문제가 생길 수도 있을 것이다.
때문에 Next는 빌드타임에도 데이터페칭을 가능하게 하는 등 여러 기능을 제공한다.

Next.js의 다양한 사전 렌더링

1. 서버사이드 렌더링(SSR)

• 가장 기본적인 사전 렌더링 방식
• 요청이 들어올 때 마다 사전 렌더링을 진행 함

2. 정적 사이트 생성(SSG)

• 빌드 타임에 미리 페이지를 사전 렌더링 해 둠

3. 증분 정적 재생성(ISR

• 향후에 자세히 다룰 예정

댓글

giscus로 동작하며 GitHub Discussions에 저장됩니다.

관련 글