4000ページをVercelでSSGする
「Annictさじぇすと!」というサービスを作っています。
お気づきの方もいるかと思いますが、Annict というWEBサービスが提供しているデベロッパーAPIを利用した、アニメレコメンドサービスです。
「さじぇすと」はあまり保守してません(笑)
Annictから作品データと視聴ステータスをもらって、
「この作品を見ている他の人はこんな作品も見ています」というレコメンドができます。
作品ページでは毎回Annict GraphQL API側に
- 作品データ
- こちら側で集計したレコメンド用の30作品の作品データ
を要求していますが、CSSアニメーションでごまかせないほど時間がかかります。
SSG(Static Site Genarator)
1クール(3か月)の間は更新しないので「じゃあSSG(Static Site Genarator)でいいんじゃないか」と思ってまずSSGに取り掛かります。
トップページは現在のシーズンのみを表示するので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 }
}
netlify -> vercelに引っ越し
netlifyはビルド時間が加算され、無料プランで使えるビルド時間が決まっています。
こんなにビルド時間がかかるものを置けませんし、NextJSとの親和性ではVercelが圧倒的に上なので引っ越しました。
4000ページのビルド時間を短縮するためにしたこと
1ページのAPI問い合わせを短縮
都度AnnictAPIに問い合わせるのを止めてDBに蓄積して高速にレスポンスするように変更しました。
いざビルド!
手元でビルドすると4000ページがだいたい280秒(5分かからないぐらい)で終わります。
Vercelでだいたい3分で1000ページ分のSSGができるようになったので
ビルド全体は約12分(Vercelのビルド時間の上限は45分)でできるようになりました。
今回学べたこと
NextJSのSSG/ISRへの苦手意識がだいぶ薄れた。
キャップ野球情報局 へも応用するとだいぶUXが改善されるかなーと。(現状そんなに重い処理はない)
Discussion