금일 목표
Next.js의 데이터 가져오기 기능 알아보기
Next.js의 데이터 가져오기
Next.js는 데이터를 가져오는 데 필요한 여러 가지 방법을 제공한다. 그 중에는 getStaticProps, getStaticPaths, getServerSideProps 등이 있다.
getStaticProps
getStaticProps는 정적 생성을 위한 함수이다. 이 함수는 빌드 시간에 호출되어 페이지에 필요한 데이터를 미리 가져온다. 이를 통해 사용자는 빠른 페이지 로딩 속도를 경험할 수 있다.
getStaticPaths
getStaticPaths는 동적 라우팅을 지원하는 페이지에서 사용된다. 이 함수는 빌드 시간에 가능한 모든 경로를 생성하여 정적 페이지를 미리 생성한다.
getServerSideProps
getServerSideProps는 서버 사이드 렌더링을 위한 함수이다. 이 함수는 각 요청 시마다 호출되어 페이지에 필요한 데이터를 가져온다. 이를 통해 사용자는 항상 최신의 데이터를 보게 된다.
데이터 가져오기의 중요성
데이터를 효율적으로 가져오는 것은 웹사이트의 성능과 사용자 경험에 큰 영향을 미친다. Next.js의 이런 기능들은 웹사이트의 성능을 최대한 활용하도록 돕는다.
Next.js 데이터 가져오기 예제
- getStaticProps 사용하기:
'pages' 디렉토리 내에 있는 파일에서 getStaticProps 함수를 사용하여 데이터를 가져오는 예제입니다. 이 함수는 빌드 시간에 호출되어 페이지에 필요한 데이터를 미리 가져옵니다.
export async function getStaticProps() {
const res = await fetch('https://api.example.com/posts')
const posts = await res.json()
return {
props: {
posts,
},
}
}- getServerSideProps 사용하기:
'pages' 디렉토리 내에 있는 파일에서 getServerSideProps 함수를 사용하여 데이터를 가져오는 예제입니다. 이 함수는 각 요청 시마다 호출되어 페이지에 필요한 데이터를 가져옵니다.
export async function getServerSideProps(context) {
const res = await fetch(`https://api.example.com/posts/${context.params.id}`)
const post = await res.json()
return {
props: {
post,
},
}
}Next.js의 데이터 가져오기 기능에 대해 알아보았다. getStaticProps, getStaticPaths, getServerSideProps 등의 기능을 통해 데이터를 효율적으로 가져올 수 있다. 이를 통해 웹사이트의 성능을 최대한 활용할 수 있다. 다음에는 Next.js의 API 라우트에 대해 알아보겠다.
