Next.js의 데이터 가져오기(Data fetch)

이번 챕터는...

리액트에서 데이터를 가져오는 방법보다 Next.js에서 데이터를 가져오는 방법이 훨씬 편하다.

참고로 데이터를 가져오는 것을 "Data Fetch"라고 부른다!

공식 문서

데이터 패칭에 관한 Next.js의 공식 문서 링크는 다음을 참고하자. (좀 더 딥하게 들어감.)

https://nextjs.org/learn/dashboard-app/fetching-data

App Router: Fetching Data | Next.js

---

또한, 이 부분을 번역한 글도 있다. 다음 글을 참고하자.

https://thewys.tistory.com/entry/NextJS-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC-%EC%B1%95%ED%84%B0-7-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0

[NextJS] 튜토리얼 챕터 7 - 데이터 가져오기

---

노마드코더 관련 영상

Client Side

https://www.youtube.com/watch?v=gawQOmgdDgU

---

위 영상은 클라이언트 사이드. 즉 기존에 리액트에서 데이터 패칭을 하는 방법에 대한 이야기이다. 리액트에서의 불편함이 나오는 영상이기도 하다. 이 부분에 대한 서버 사이드에서 데이터 패칭은 다음 영상을 참고하라.

Server Side

https://www.youtube.com/watch?v=TEpaVi5-uQ8

예시 코드는 다음과 같다.

export default async function Page() {
  const data = await fetch('https://api.example.com/...').then((res) =>
    res.json(),
  )
 
  return '...'
}

일단 중요한 것은, 함수의 앞에 "async"를 써주는 것이다. 왜냐하면 "await"를 쓰고 싶기 때문이다. 보면 fetch를 내가 원하는 URL에서 가져온다. 그 fetch 앞에 await가 붙어있는 것을 볼 수 있다. (데이터를 가져올 때, await를 써야 한다.)

(관련 문서)

https://nextjs-ko.org/docs/app/building-your-application/data-fetching/fetching

Data Fetching – Nextjs 한글 문서

근데, 만일 "로딩 시간"이 어떤 이유가 되었던 늦어지고 있다면? 유저는 로딩까지 아무것도 못 보게 된다. 이 부분을 해결하기 위해서 우리는 로딩 컴포넌트를 만들 것이다.

Loading Components

https://www.youtube.com/watch?v=9bBKXUHS1jw

---

하는 법은 쉽다. 파일 이름을 loading.tsx (혹은 jsx)으로 지으면, 그 파일의 코드가 로딩 컴포넌트가 되는 것이다. 진짜 쉽다.

예시 코드 >

/loading.tsx

export default function Loading() {
	return <h1>Loaing ...<h1/>
}

---

Parallel Requests 

https://www.youtube.com/watch?v=hMIwV6LB1Ro

Parallel Requests이란 병렬 요청을 뜻한다.

여러개의 데이터를 fetch 하는 방법이다. 위 영상을 참고하자.

추가적인 문서는 다음을 참고하자. >

https://velog.io/@ssonnni/Next.js-14-parallel-Requests-Suspense

[ Next.js 14 ] 08.parallel Requests Suspense

---

Suspense

https://www.youtube.com/watch?v=YSo3sHsdYJI

병렬 요청의 단점을 극복하기 위해, Suspense를 사용할 것이다. 리액트에도 존재한다. (심지어 많이 쓴다!)

Suspense를 이용하면, 함수를 분리해 줄 수 있다. 구현에 성공하게 되면 가장 먼저 패칭 되는 데이터의 UI를 보여주게 된다. 즉 데이터 패칭을 "동시에"하면서 "가장 먼저 패칭 되는 데이터의 UI"는 "먼저" 렌더링 시키는 것이다. (장점만 모아둔 것이라고 여기면 될 거 같다.)

데이터 패칭하면서 제일 많이 쓰일 부분이다!

관련된 문서는 다음을 참고하자.

https://imdaxsz.tistory.com/72

[Next.js] Suspense를 이용한 Skeleton UI 적용하기

---

https://velog.io/@ohjoo1130/React-Next.js-Suspense

React, Next.js | Suspense

---

복습

https://www.youtube.com/watch?v=9eG5Drk9LtY

---

에러 핸들링

https://www.youtube.com/watch?v=Era7bO6C8oI

위 영상을 에러를 핸드링하는 방법을 이야기한다.

예시 코드 >

/error.tsx

"use client";

export default function ErrorOMG() {
	return <h1>에러가 났습니다.</h1>
}

Next.js의 특징이다. 결국 중요한 건 "파일 이름"이다.

마무리하며...

https://www.youtube.com/watch?v=d4yB_kWFWo0

이후 영상에서는 앱을 꾸미고, 배포까지 하게 된다. 궁금하다면, 노마드코더 Next.js의 Deployment를 참고하자.

https://nomadcoders.co/nextjs-for-beginners/lectures/4712

All Courses – 노마드 코더 Nomad Coders

---