일단.. Flex + Grid 잘쓰자..
- ( 진짜 너무 편하다.. )
getStaticProps
- SSG ( static site generation, 정적사이트 생성 )을 위해서 getStaticProps를 사용해야한다.
- SSG에서는 빌드시 api등으로부터 데이터를 얻어, 페이지를 그려서 정적파일로 생성한다.
- 빌드 시에 getStaticProps라는 함수가 호출되고, 그 함수 안에서 api호출이나, 페이지를 그리는데에 필요한 props를 반환한다.
- 이후에 브라우저에서 초기 화면을 그린 후에는 일반적인 리액트 어플리케이션과 마찬가지로, api등으로부터 데이터를 얻어 동적으로 화면을 그릴 수 있다.
그러나 제약 사항이 존재한다.
- 동적라우트를 위해서는
getStaticPaths가 필요한데, 동적라우트를 하면서 정적사이트생성을 위해서 필요하다. - 동적 라우트는 파일이름에 대괄호 []를 포함하여 페이지의 경로를 정의하는 방식을 말한다.
/movies/[id].js와 같이 말이다. - 이렇게 생성된 동적 라우트 페이지에 정적 사이트 생성을 사용하려면
getStaticPaths를 정의해야한다.
getStaticPaths
getStaticPaths는 어떤 동적 경로가 사전빌드(pre-render) 되어야 하는지 Next.js에게 알려주는 역할을 한다.
예시로,
export async function getStaticPaths() {
return {
paths: [
{ params: { id: '1' } },
{ params: { id: '2' } },
// 다른 경로들...
],
fallback: false
};
}- 위 코드에서는 id가 1과 2인 페이지가 사전 빌드된다.
- fallback 옵션은 두가지 값을 가진다.
- false : 어떤 경로가 paths에 명시되지 않았다면 404페이지를 보여준다.- true : 어떤 경로가 paths에 명시되지 않았다면 빈페이지를 보여준 후에, Next.js는 백그라운드에서 해당 페이지를 빌드한다.
문제가 하나 있는데,
우리가 예를 들어서 몇개인지 모른다고 쳐보자. 그러면 fallback을 true로 설정하면 된다. 그러면 첫번째 요청이 왔을 때 해당 페이지가 생성되고, 이후에는 사전 생성된 페이지가 제공된다.
