Published On

Next.js(pages-router) - data fetching

nextjs fetch

server side에서 data fetching하기

  • pages-router의 기준입니다.

실시간으로 fetching할 필요가 없다면 server side에서 fetch하는게 좋을 수 있습니다.

방법은 아래와 같습니다.

export default function 으로 데이터를 await으로 fetch하고 return 합니다.

(home)/page.tsxjavascript
export const URL = 'https...'

async function getMovies() {
  //1초간 로딩(로딩 함수 확인용)
  await new Promise((resolve) => setTimeout(resolve, 1000))
  const response = await fetch(URL)
  const json = await response.json()
  return json
}

export default async function Page() {
  const movies = await getMovies()
  return (
    <div>
      <ul>{movies.map((movie) => <li key={movie.id}><Link href={`/movies/${movie.id}`}>
      {movie.title}</Link></li>)}</ul>
    </div>
  );
}

여러 data를 server에서 fetch하기

  1. data fetching 하는 Component를 생성(여기서는 GetMovies,GetVideos)
  2. import { Suspense } from "react"
  3. Suspense안에 Component를 넣고 로딩 메시지 나 Component를 만들어 fallback에 넣습니다.
Component/getvideos.tsxjavascript
//예시
async function getVideos(id:string) {
  const response = await fetch(`${URL}/${id}`)
  return response.json()
}

export default async function Getvideos({id}:{id: string}) {
  const videos = await getVideos(id)
  return (
    <p>{JSON.stringify(videos)}</p>
  )
}
(home)/page.tsxjavascript
import { Suspense } from "react"
//data fetch 하는 async function import
import {GetMovies , GetVideos} from '...'

export default async function Page() {
  return (
    <div>
      <p>movies</p>
      <Suspense fallback={<h2>Movies 로딩 중 ...</h2>}>
        <GetMovies />
      </Suspense>
      <p>videos</p>
      <Suspense fallback={<h2>Videos 로딩 중 ...</h2>}>
        <GetVideos />
      </Suspense>
    </div>
  )
}

에러 및 로딩 처리

아래의 페이지를 같은 경로에 만들면, 예외 처리를 쉽게 할 수 있습니다.

(home)/error.tsxjavascript
export default function NAME(){}
(home)/loading.tsxjavascript
export default function NAME(){}
(home)/not-found.tsxjavascript
export default function NAME(){}

이전 포스트

CloudFlare

다음 포스트

Next.js - dynamic import

연관된 포스트 구경가기

1. Next.js 란?2. Next.js - middleware3. Next.js - route handler4. Next.js Pages Router5. Next.js(pages-router) - data fetching6. Next.js - dynamic import7. Next.js에서 Head 컴포넌트 사용 방법8. Next.js의 폴더 구조 분석9. Next.js에서 메타데이터 다루기10. Next.js(app-router) - data fetching11. Next.js runtime12. Next.js 패러렐 라우트, 인터셉팅 라우트13. Next.js에서 Font를 설정하는 방법14. Next.js - Server Actions15. Next.js Image 컴포넌트16. Next.js 빌드 과정과 Webpack, Babel17. Next.js Configuration: next.config.mjs18. Next.js 커스텀 서버19. Next.js의 렌더링 과정
간략히