S3나 Github Pages 같은 Static Site에서 Next.js의 getStaticPaths의 fallback이 동작할까?

동작 안한다.

getStaticPaths, getStaticProps, getServerSideProps는 Node 서버가 필요하기 때문에, Node 서버를 올릴 수 없는 AWS S3, Github Pages에서는 Build time 당시의 Pre Render 기능은 모조리 업데이트 불가능하다
(다만 deploy 시도 시에는 새로운 빌드를 하기 때문에 최신이 적용되긴 한다)

AWS amplify, Vercel이 서버리스를 위한 서버를 이용할 수 있기 때문에 Next.js에 적당해보였다

 

import React, { useEffect, useState } from "react";

const Post = (data: IData, params: IRoute) => {
  const {
    category: categories,
    sub_category: sub_categories,
    post: posts,
  } = params;

  if (!data) return null;

  return (
    <MarkdownContainer>
        <div>{data}</div>
    </MarkdownContainer>
  );
};

export default Post;

export const getStaticPaths = async () => {
  const res = await fetch('https://API_OR_SOMETHING.com/v2/get');
  const data = await res.json()
  
  const paths = data.map((el) => {
  	const { category, sub_category, post } = el;
  	return {
    	params: {
        	category,
            sub_category,
            post,
        }
    }
  })

  return {
    paths,
    fallback: true,
  };
};

export const getStaticProps = ({ params }: any) => {
  const res = await fetch('https://API_OR_SOMETHING.com/v2/getData');
  const data = await res.json();
	
  return {
    props: {
      params,
      data,
    },
  };
};