SSG(정적 사이트 생성) 이해하기

장점

단점

SSG(정적 사이트 생성) 적용하기 1

• getStaticProps로 바꾸면 SSG로 바껴짐
  

• npm build
  
  

• npm start

• SSG랜더링 짱 빠름(buil 때만 동작함)

• SSR은 좀 느림

SSG(정적 사이트 생성) 적용하기 2

다이나믹한 페이지이다.
그래서 SSG로는 어렵지 않나..?

• 어떤 경로가 있는지 찾아서 하나하나 다 만들어 놓아야지!

• 바로 보내준다.

• 모든 경로를 만들어주는 함수를 만들어줘야한다.
  

• 나올 수 있는 경로 만들어주는 함수
  - fallback: false 없는 경로는 false로 처리
  

npm run build

• 사전에 페이지가 생성한것을 확인할 수있다.
  

• 빌드 산출물로 확인가능
  

SSG(정적 사이트 생성) 적용하기 3

다양한 fallback옵션

fallback: blocking

없었던 html 파일도 실시간으로 페이지가 생성돼서 반환된다.

실시간으로 생성해서 반환

• 생성하는 동안은 브라우저는 대기해서 계속 로딩이 이루어진다.

fallback: true

빠르게 생성해서 반환한다.

• 데이터가 없는 페이지를 받고 뒤늦게 데이터를 받는다.
  

페이지만 반환

뒤늦게 컨텐츠 채워짐

• Fallback 상태인지 아닌지 알려줌.

  //Fallback 상태인지 아닌지 알려줌.
  if (router.isFallback) {
    return <div>Loading...</div>;
  }

fallback이면 로딩중이 뜸.

값이 들어오지 않으면

 if (!country) {
   return <div>존재하지 않는 국가입니다.</div>;
 }

이런식으로도 가능하구나.. 맨날 삼항식으로 문제품

SSG(정적 사이트 생성) 적용하기 4

url 파라미터만 getStaticPath를 쓸 수있다.
퀴리스트링은 접근못한다

q=korea
대응해야하는 경우의 수가 너무 많다.

어떠한 자원의 고유의 키여서 대응수가 예상가능함.

컴포넌트 내부에서 useRouter을 통해서 쿼리 스트링만 가져오기
쿼리값으로 내부에서 APIfmf 가져오면된다.

• getStaticProps과 getServerSideProps가 없으면 SSG로 이해

import { fetchSearchResults } from "@/api";
import SubLayout from "@/components/SubLayout";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";

export default function Search() {
  //쿼리 스트링 가져오기
  const router = useRouter();
  const { q } = router.query;
 // 쿼리스트링에 있는 나라들 저장 배열
  const [countries, setCountries] = useState([]);
 // 나라 값 가져오기
  const setData = async () => {
    const data = await fetchSearchResults(q);
    setCountries(data);
  };
  // 쿼리가 달라지만 실행하게
  useEffect(() => {
    if (q) {
      setData();
    }
  });

  return (
    <div>
      {countries.map((country) => (
        <div key={country.code}>{country.commonName}</div>
      ))}
    </div>
  );
}
//* 위에 함수는 객체로도 쓸 수 있어서 밑에처럼 사용가능
Search.Layout = SubLayout;