4000페이지에 대한 Vercel SSG

「Annictさせててと……」를 참고하십시오.
https://annict-suggest.vercel.app/
누군가 눈치챘을 것 같아, 애니컷.
https://annict.jp/
네트워크 서비스에서 제공하는 개발자 API를 활용한 애니메이션 유지 관리 서비스입니다.
복시 와 는 그다지 보수적이지 않다 (웃음)
Annict로부터 작품 데이터와 시청각 상태를 얻다
"이 작품을 본 다른 분들도 이런 작품을 봤다"고 평할 수 있다.
Annict GraphiQL API 측면

작품 데이터

이쪽에서 집계한 평론용 30편의 작품 데이터

CSS 애니메이션을 숨기려면 시간이 필요합니다.

SSG(Static Site Genarator)

시즌1(3개월) 동안 업데이트가 안 됐기 때문에 "그럼 SSG(Static Site Genarator)는 되지 않을까"라며 SSG에 먼저 손을 댔다.
https://nextjs.org/docs/basic-features/pages#static-generation-with-data
첫 페이지에는 현재 계절만 표시되므로 SSG를 선택합니다.getStaticProps에서 API에서 가져온 데이터를 페이지에 전달합니다.

const Index=({data}:any)=>{
    return(
        <>
            <Season data={data}/>
        </>
    )
}
export default Index;


export const getStaticProps = async() => {
    const data = await fetchSeasonWorks(CURRENT_SEASON);
      return{
        props:{
          data
        }
      }
  }

전체 작품을 일람한 다음 SSG.
...거의 업데이트되지 않기 때문에 ISR의 의미는 없을 수 있습니다.

export const getStaticProps = async({params}:any) => {
  const data = await fetchByWorkId(params.id);
    return{
      props:{
        data
      },
      revalidate:3600
    }
}

export async function getStaticPaths() {
  const data = await fetch(BACKEND + '/api/allworks');
  const works = await data.json();
  const paths = works.map((work:any) => ({
    params: { id: work.annict_id.toString() },
  }))

  return { paths, fallback: true }
}

넷lify->vercel로 이사

netlify는 건축 시간을 늘려 무료로 사용할 수 있는 건축 시간을 결정했다.
이렇게 시간이 걸리는 건물은 놓을 수 없고, 넥스트 JS와 친화력이 버셀이 압도적으로 높아 이사를 했다.

4000페이지의 구축 시간을 단축하기 위한 일

API 컨설팅 1페이지 단축

AnnictAPI에 대한 문의를 매번 중지하고 DB에 저장하여 빠른 응답을 합니다.

구축합시다!

손 옆에 세우면 4000페이지가 약 280초(5분 미만)로 끝난다.

왜냐하면 Vercel로 한 3분이면 1000페이지의 SSG를 완성할 수 있거든요.
전체 구축 시간은 약 12분(Vercel 구축 시간은 45분)입니다.

이번에 배운 거.

NextJS는 SSG/ISR에 대한 불능의식이 상당히 희박해졌다.
야구 정보국
https://cap-baseball.com
UX에 적용하면 UX가 많이 개선되겠죠.(현재 상황은 그다지 심각하게 처리되지 않았다)