반응형
이 글은 2021년 2월 19일에 작성되었습니다.
Next JS에서는 SSG와 SSR 두 가지의 사전 렌더링 방식이 존재합니다.
- SSG는 프로젝트가 빌드되는 시점에 필요한 데이터를 미리 호출하며 이를 사용하기 위해 next js에서 getStaticProps와 getStaticPaths함수를 제공합니다.
- SSR은 각 페이지 요청마다 데이터 통신을 하며 next js에서는 getServerSideProps함수를 제공합니다.
이번 글에서는 getStaticProps와 getStaticPaths 그리고 getServerSideProps함수 사용방법에 대해 알아보겠습니다.
getStaticProps
/* pages/home/index.js */
export default function Home({homeData}) {
return (
<>
<Head>
<title>PUSHNEWS</title>
</Head>
{homeData}
</>
);
}
export async function getStaticProps(context) { --- 1
const data = await axios.post("<https://api>...") --- 2
/*
if (!data) { --- 4
return {
notFound: true,
}
}
*/
return {
props: {homeData: data}, ---3
revalidate: 60 --- 5
}
}
예제 코드를 통해 자주 쓰는 매개 변수와 반환 값들을 알아보겠습니다. 더 자세한 문서는 여기를 확인해 주세요
- next js는 빌드 시 페이지 안에 getStaticProps함수를 찾아 실행합니다.
- api 통신을 합니다.
- api통신을 통해 얻은 data를 컴포넌트 props인 homeData에 넣습니다.
- data가 없으면 404 상태 페이지를 반환하도록 허용합니다.
- data가 60초에 한 번씩 재 검증 됩니다. getStaticProps로 페이지를 생성하면 다음 빌드 때까지 데이터의 변동을 반영할 수 없는 단점이 있습니다. 이를 해결하기 위해 getServerSideProps를 이용해 페이지 요청마다 데이터를 통신하는 방법이 있습니다. 하지만 SSR방식을 사용하면 페이지 출력 속도가 느려 사용자들에게 나쁜 경험을 줄 수 있습니다. 그래서 나온 것이 SSG와 SSR의 하이브리드인 ISR입니다. version 9.5부터는 getStaticProps 함수에 Incremental Static Regeneration 기능이 추가되어 개발자가 설정한 시간마다 페이지의 데이터 업데이트 여부를 확인할 수 있습니다.
https://blog.logrocket.com/incremental-static-regeneration-with-next-js/(ISR를 사용해야 되는 이유를 자세하게 쓴 블로그입니다.)
getStaticPaths
/* pages/posts/[id].js */
function Post({ post }) {
// Render post...
}
// This function gets called at build time
export async function getStaticPaths() {
// Call an external API endpoint to get posts
const res = await fetch('https://.../posts')
const posts = await res.json()
// Get the paths we want to pre-render based on posts
const paths = posts.map((post) => ({ --- 1
params: { id: post.id },
}))
// We'll pre-render only these paths at build time.
// { fallback: false } means other routes should 404.
return { paths, fallback: false } --- 2
}
// This also gets called at build time
export async function getStaticProps({ params }) {
// params contains the post `id`.
// If the route is like /posts/1, then params.id is 1
const res = await fetch(`https://.../posts/${params.id}`)
const post = await res.json()
// Pass post data to the page via props
return { props: { post } }
}
export default Post
동적 라우터를 사용하고 있는 페이지에서 getStaticProps 해야 하는 경우 getStaticPaths를 이용해 빌듯이 HTML로 렌더링 해야 하는 경로 목록을 정의해야 합니다.
- pages/posts/[id]. js이므로 paths의 params값으로 id가 들어갑니다. 만약 pages/posts/[postId]/[commentId] 같은 상황이라면 paths 의 params값으로 postId와 commentId가 들어가면 됩니다.
- fallback이 false면 반환되는 경로가 없을 때 자동으로 404페이지로 이동합니다. fallback: false는 새로운 페이지가 추가되지 않을 때 유용합니다 반면에 기사처럼 새로운 글이 지속적으로 추가되는 상황이라면 fallback을 true로 주면 됩니다.
https://dev.to/tomdohnal/blocking-fallback-for-getstaticpaths-new-next-js-10-feature-1727(fallback을 이해하는데 도움이 되는 글입니다.)
getServerSideProp
function Page({ data }) {
// Render data...
}
// This gets called on every request
export async function getServerSideProps() {
// Fetch data from external API
const res = await fetch(`https://.../data`)
const data = await res.json()
// Pass data to the page via props
return { props: { data } }
}
export default Page
getServerSideProps는 페이지 요청 시 데이터를 가져오고 미리 렌더링 하는 데 사용합니다.
주의 사항
- getStaticProps, getStaticPaths, getServerSideProps는 페이지 안에서만 사용할 수 있습니다.
- getStaticPaths와 getServerSideProps는 같이 사용할 수 없습니다.
- next js에서 추천하는 사전 렌더링 방식은 SSR 보다는 SSG, ISR 사용을 권장하고 있습니다.
반응형
'기억보단 기록을 > Next JS (App Router)' 카테고리의 다른 글
| [NextJS 13] Getting Started - app Routing Project Structure(앱 라우팅 프로젝트 구조) (0) | 2023.05.24 |
|---|---|
| [NextJS 13] Getting Started - Installation(설치 방법) (0) | 2023.05.23 |
| [NextJS 13] Getting Started - 소개 (0) | 2023.05.23 |
| [Next JS] <Image> 정리 (0) | 2023.05.17 |
| [Next JS] Apollo 연동하기 (HTTP+WebSocket) (0) | 2023.05.17 |
