[Next.js] page router - SSG(정적 사이트 생성)

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 
2.13) SSG 1. 소개 및 실습
2.14) SSG 2. 정적 경로에 적용하기
2.15) SSG 3. 동적 경로에 적용하기
2.16) SSG 4. 폴백옵션 설정하기

2.13 SSG 1. 소개 및 실습

SSR의 장단점

장점 : 브라우저에 접속 요청이 들어올 때마다 사전 렌더링 과정에서 백엔드 서버에서 새로운 데이터를 요청하면서 페이지 내부의 데이터를 항상 최신 버전으로 유지할 수 있음

단점 : 데이터 페칭이 너무 느리게 되면 사용자 경험이 안좋아진다.

SSG(정적 사이트 생성)란

SSR의 단점을 해결할 수 있는 사전 렌더링 방식.

빌드 타임에 미리 페이지를 사전 렌더링 하는 방법(페이지를 미리 딱 한 번 생성한다)

SSG의 장단점

장점 : 사전 렌더링 과정에 많은 시간이 소요되는 페이지더라도, 빌드 타임에 미리 다 만들어두기 때문에 사용자의 요청에는 항상 매우 빠른 속도로 응답할 수 있다.

단점 : 빌드 타임 이후에는 다시는 페이지를 새롭게 렌더링 하지 않는다. 따라서 최신 데이터가 빠르게 반영되어야 하는 페이지들에서는 SSG 방식이 적합하지 않다.

---

2.14 SSG 2. 정적 경로에 적용하기

SSG 사용하기

export const getStaticProps = async () => {
  console.log("인덱스 페이지");
  const [allBooks, recoBooks] = await Promise.all([
    fetchBooks(),
    fetchRandomBooks(),
  ]);

  return {
    props: { allBooks, recoBooks },
  };
};

export default function Home({
  allBooks,
  recoBooks,
}: InferGetStaticPropsType<typeof getStaticProps>) {
...

getStaticProps로 export 해서 사용가능

SSG 동작 확인

npm run dev 개발모드에서는 수정사항이 바로 보이기 때문에 SSG의 동작 확인 불가능

npm run build를 통해 빌드해서 수행 가능

 

Collecting page data : 정적 페이지 생성을 위한 데이터 수집

Generating static pages : SSG로 동작하도록 설정한 페이지들이 생성되고 있다는 의미

 

 

Route에서 보여지는 기호들을 통해 SSG 페이지인지 Dynamic 페이지(SSR)인지 또는 Static 페이지인지 알 수 있다.

다만 Static은 기본적으로 SSG로 동작한다.

 

npm run start로 확인해보면 index 페이지는 아주 빠른 속도로 렌더링 되는 것을 확인할 수 있다.

 

쿼리스트링으로 데이터 받아 올 때 SSG로 동작하도록 하기 위해서

getStaticProps에서 쿼리스트링을 가져오는 것은 불가능하다.

따라서 이렇게 param으로 접속시마다 다른 데이터를 받아와야 하는경우, CSR로 동작하도록 변경해주어야 한다.

getServerSideProps나 getStaticProps를 사용하지 않기 때문에 기본적으로 SSG로 동작한다.

 

import SearchableLayout from "@/components/searchable-layout";
import { ReactNode, useEffect, useState } from "react";
import BookItem from "@/components/book-item";
import fetchBooks from "@/lib/fetch-books";
import { useRouter } from "next/router";
import { BookData } from "@/types";

export default function Page() {
  const [books, setBooks] = useState<BookData[]>([]);
  const router = useRouter();
  const { q } = router.query;

  const fetchSearchResult = async () => {
    const data = await fetchBooks(q as string);
    setBooks(data);
  };

  useEffect(() => {
    if (q) {
      fetchSearchResult();
    }
  }, [q]);

  return (
    <div>
      {books.map((book) => (
        <BookItem key={book.id} {...book} />
      ))}
    </div>
  );
}

Page.getLayout = (page: ReactNode) => {
  return <SearchableLayout>{page}</SearchableLayout>;
};

 

그러면 SSG으로 반환된 페이지는 개발자도구의 network 탭에서 확인 가능하다. (새로고침 필요)

 

그렇다면 SSG를 통해 반환된 HTML을 확인할 수 있고, 마운트 된 이후에 쿼리스트링을 이용하여 데이터를 페칭할 수 있다.

---

2.15 SSG 3. 동적 경로에 적용하기

동적 경로(Dynamic Path)란?

book/[id].tsx 처럼 book/1, book/2, book/3 과 같이 다이나믹한 경로를 갖는 페이지가 동적 경로를 갖는 페이지이다.

따라서 동적 경로란 말 그대로 변하는 경로로, 특정 URL의 일부가 바뀌는 것을 의미한다.

 

동적경로가 SSG 방식으로 동작하기 위해 필요한 부분(경로 설정하기)

서버가 빌드 타임에 동적경로 페이지의 정적 사이트를 생성(SSG)하기위해서는 동적 경로에 들어갈 수 있는 페이지들을 알아야 한다.

예를 들어, book/1, book/2, book/3이 존재한다면 1, 2, 3이 존재한다는 것을 알아야 한다는 것이다.

 

이러한 경로 설정 과정을 getStaticPaths 함수를 생성함으로서 수행할 수 있다.

export const getStaticPaths = () => {
  return {
    paths: [
      { params: { id: "1" } },
      { params: { id: "2" } },
      { params: { id: "3" } },
    ],
  };
};

 

fallback

만일의 상황에 대비하는 대비책이라고 생각하면 된다.

따라서 우리가 경로를 설정하지 않은 페이지(ex. book/4)에 대해 대비하는 것이라고 생각하면 된다.

세 가지 옵션이 있다.

export const getStaticPaths = () => {
  return {
    paths: [
      { params: { id: "1" } },
      { params: { id: "2" } },
      { params: { id: "3" } },
    ],
    fallback: false,
  };
};

 

1. fallback :  false

존재하지 않는 페이지에 대해 404를 보여준다.

---

2.16 Fallback 옵션 설정하기

Fallback 옵션 세 가지

1. fallback : false

2. fallback : "blocking"

3. fallback : true

 

2. fallback : "blocking"

blocking 옵션으로 설정해놓으면 StaticPath에 미리 설정하지 않은 페이지들은 SSR 방식으로 페이지를 새롭게 생성한다.

SSR 방식으로 생성된 페이지 이후에는 SSG 방식으로 페이지를 새롭게 생성해서 저장된 페이지를 매우 빠르게 반환할 수 있다.

 

build 후 만들어진 .next/server/pages/book 보면 path를 지정해놓은 페이지들의 html 파일이 있는 것을 볼 수 있다.

path를 지정해놓지 않은 book/4와 같은 페이지에 접속하면 해당 경로에 4.html이 생성되는 것을 볼 수 있고, 이 때문에 다시 book/4에 접근하면 빠르게 페이지가 보인다.

build 후 .next(좌) book/4에 접근 후 .next(우)

fallback = "blocking"  주의 사항

Static Path에 존재하지 않았던 페이지를 SSR 방식으로 새롭게 생성할 때 백엔드 서버에게 추가적인 데이터를 요청해야 된다거나 사전 렌더링을 하는 시간이 길어지게 되면 이 시간 동안에는 브라우저에게 아무것도 응답하지 않는다.

따라서 페이지의 크기에 따라 꽤 오랜 시간을 기다려야 하는 경우도 생긴다.

 

이러한 문제를 해결하고 싶을 때 fallback = true를 사용하면 된다.

 

3. fallback = true

브라우저로부터 존재하지 않는 페이지를 요청 받았을 때 props(getStaticProps가 반환하는 props)가 없는 버전의 페이지를 먼저 빠르게 생성해서 브라우저에게 반환한다.

후속으로 이 페이지에 필요한 데이터인 props만 따로 계산해서 보내준다.

 

fallback 상태일 때만 띄우고 싶은 페이지가 있는 경우

export default function Page({
  book,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  const router = useRouter();
  if (router.isFallback) {
    return "로딩중입니다.";
  }
...

 

데이터가 없을 때 존재하지 않은 페이지로 넘기고 싶다면

export const getStaticProps = async (context: GetStaticPropsContext) => {
  const id = context.params!.id;

  const book = await fetchOneBook(Number(id));

  if (!book) {
    return {
      notFound: true,
    };
  }

  return {
    props: { book },
  };
};

getStaticProps에서 return notFound를 해주면 된다.