Next.js는 정적 사이트 생성(SSG)과 서버 사이드 렌더링(SSR) pre-rendering 웹사이트 생성을 도와주는 리액트 프레임워크이다.
SSG를 구현하기 위한 함수로는 getStaticProps와 getStaticPaths를 제공하고 있고,
SSR를 구현하기 위한 함수는 getServerSideProps를 제공하고 있다.
getStaticProps
Next.js에서 제공하는 함수 중 하나로, 정적 사이트 생성을 위해 사용된다. 페이지가 빌드될 때 getStaticProps에서 반환된 props를 사용하여 페이지를 미리 렌더링할 수 있다. (공식문서)
사용예시
import type { InferGetStaticPropsType, GetStaticProps } from 'next';
type Repo = {
name: string;
stargazers_count: number;
};
export const getStaticProps: GetStaticProps<{
repo: Repo;
}> = async () => {
const res = await fetch('https://api.github.com/repos/vercel/next.js');
const repo = await res.json();
return { props: { repo } };
};
export default function Page({
repo,
}: InferGetStaticPropsType<typeof getStaticProps>) {
return repo.stargazers_count;
}언제 사용해야 하나?
- 사용자 요청 전에 페이지를 렌더링할 때 필요한 데이터가 빌드 시에 사용 가능한 경우
- SEO를 위해 페이지를 사전 렌더링하고 매우 빠르게 만들어야 하는 경우 (getStaticProps는 HTML 및 JSON 파일을 생성하며, 이러한 파일은 성능을 위해 CDN에 캐시될 수 있다.)
- 데이터가 공개 캐시될 수 있는 경우 (사용자별로 다르지 않음).
getStaticProps가 실행되는 구간
getStaticProps는 항상 서버에서 실행되며 클라이언트에서는 실행되지 않는다.
getStaticPaths
동적 라우팅 (Dynamic routing) + getStaticProps 를 사용하는 경우 반드시 사용해야한다.
getStaticPaths를 사용하면 Next.js는 getStaticPaths에서 지정된 모든 경로를 정적으로 사전 렌더링한다.
여기서 정의하지 않은 하위 경로는 접근해도 렌더링이 되지 않기 때문에, path와 fallback을 return 해줘야 한다. (공식문서)
사용예시
import type {
InferGetStaticPropsType,
GetStaticProps,
GetStaticPaths,
} from 'next';
type Repo = {
name: string;
stargazers_count: number;
};
export const getStaticPaths: GetStaticPaths = async () => {
return {
paths: [
{
params: {
name: 'next.js',
},
}, // See the "paths" section below
],
fallback: true, // false or "blocking"
};
};
export const getStaticProps: GetStaticProps<{
repo: Repo;
}> = async () => {
const res = await fetch('https://api.github.com/repos/vercel/next.js');
const repo = await res.json();
return { props: { repo } };
};
export default function Page({
repo,
}: InferGetStaticPropsType<typeof getStaticProps>) {
return repo.stargazers_count;
}사용할 때의 주의사항
- getStaticPaths는 getStaticProps와 함께 사용해야 한다.
- getServerSideProps와 함께 getStaticPaths를 사용할 수 없다.
- getStaticProps를 사용하는 Dynamic Route에서 getStaticPaths를 내보낼 수 있다.
- 비 페이지 파일 (예 : components 폴더)에서 getStaticPaths를 내보낼 수 없다.
- getStaticPaths를 페이지 구성 요소의 속성이 아닌 독립적인 함수로 내보내야 한다.
getServerSideProps
서버에서 렌더링 될 때마다 실행되며 페이지를 렌더링하기 전에 데이터를 가져온다.
getServerSideProps는 데이터가 매 요청마다 변경되는 경우에 사용된다. 페이지 컴포넌트에서 내보내야 한다. (공식문서)
사용예시
import type { InferGetServerSidePropsType, GetServerSideProps } from 'next';
type Repo = {
name: string;
stargazers_count: number;
};
export const getServerSideProps: GetServerSideProps<{
repo: Repo;
}> = async () => {
const res = await fetch('https://api.github.com/repos/vercel/next.js');
const repo = await res.json();
return { props: { repo } };
};
export default function Page({
repo,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
return repo.stargazers_count;
}어디서 실행되는가
getServerSideProps는 서버에서만 실행되며 클라이언트에서는 실행되지 않는다.
페이지가 getServerSideProps를 사용하는 경우
- 직접 이 페이지를 요청하면 getServerSideProps가 요청 시간에 실행되고 반환된 props로 이 페이지가 사전 렌더링된다.
- next/link 또는 next/router를 통한 클라이언트 측 페이지 전환으로 이 페이지를 요청하면 Next.js가 서버에 API 요청을 보내고 getServerSideProps가 실행된다.
getServerSideProps는 페이지를 렌더링하는 데 사용될 JSON을 반환한다. Next.js가 모든 작업을 자동으로 처리하므로 getServerSideProps가 정의되어 있다면 추가 작업이 필요하지 않다.
getServerSideProps는 페이지에서만 내보낼 수 있다. 페이지 파일이 아닌 파일에서 내보낼 수 없다.
getServerSideProps를 페이지 컴포넌트의 속성으로 추가하면 작동하지 않으므로 getServerSideProps를 독립적인 함수로 내보내야 한다.
