Next.js] SSG 실기

SSG 함수 만드는 법

🚀SSR 
export const getServerSideProps = async () => {


🚀SSG : 정적 생성/ 빌드 타임에 랜더링
export const getStaticProps = async () => {
  
  하단은 똑같음~!
    const [allBooks, recoBooks] = await Promise.all([
    fetchBooks(),
    fetchRandomBooks(),
  ]);

  return {
    //무조건 객체를 반환해야함
    //객체안에 props라는 키를 가지고 있어야함
    //페이지안에 props로 전달됨
    props: {
      allBooks,
      recoBooks,
    },
  };
};

컴포넌트에서 프롭스 불러올떄 타입

export default function Home({
  allBooks,
  recoBooks,
 🚀SSR 
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
 🚀SSG : 정적 생성/ 빌드 타임에 랜더링 
 }: InferGetStaticPropsType<typeof getStaticProps>) {

한번만 실행되는 함수임!
근데 개발 모드는 계속 새로 랜더링해서 잘 작동하는지 확인 안됌.
-> 빌드해서 확인해야함(빌드란?)

f 다이나믹 페이지(F) - 주문형 - 브라우저로부터 요청을 받을 때마다 사전 랜더링

빈동그라미 - 스테틱 - getStaticProps 가 없는 페이지, 그냥 아무것도 적용안한걸 랜더링 ,기본적으로 ssg로 설정한다.

이제 npm run start
굉장히 빨리 랜더링됨
새로고침해도 아무것도 동작안됨.

static은 query로 못가져옴

• 빌드 타임에 쿼리값을 모르기때문
  

나 불러오고 싶은데?

• static으로 못하니까 useEffect 써서 불러오기
• ssg 방식

// export const getStaticProps = async (context: GetStaticPropsContext) => {
//   const q = context.query.q;
//   const books = await fetchBooks(q as string);
//   return {
//     props: { books },
//   };
// };

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

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

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

• 검색 결과는 제외하고 나머지 부분만 빌드타임에 먼저 렌더링