ファンタラクティブのエンジニアの 太田 です。
Next.js v12.1でリリースされたOn-demand ISRについて、SSRの代わりになり得るのか考えました。
SSRとは
- ユーザーがページアクセスするたびに、サーバーサイドでデータ取得をしプリレンダリングした結果をクライアントに返す
- 常に最新のデータを取得できる
- 動的ルーティングのOGP対応が可能
SSR
ISRとは
- ページアクセス時にキャッシュされた静的なページを返しつつ、キャッシュ有効期限が切れている場合は裏でキャッシュの再生成をし、次回アクセス以降に使用できるようにする
- SSGと違いページの更新にビルドが必要ない
ISR キャッシュ生成
On-demand ISRとは
- ISRに追加で任意のトリガーでキャッシュの更新をすることができる
On-demand ISR キャッシュ生成
ISRとOn-demand ISRの比較
ISR
On-demand ISR
On-demand ISRをもう少し掘り下げてみる
ここまででOn-demand ISRがSSRの代わりとして使えそうだということはわかりましたが、本当にSSRの代わりに使っても問題ないのかもう少し掘り下げていきます。
Zennのような複数ユーザーが記事の作成、更新、削除、下書きに戻すような機能があるサービスを想定します。
記事のデータが存在しない場合
- キャッシュが存在しないのでSSRとキャッシュの生成を試みる
- 指定された情報は存在しないためエラーを返して終わる
記事の作成
- キャッシュ生成することで、以降のアクセスで作成した記事を閲覧できるようになる
記事の更新
- キャッシュ生成することで、以降のアクセスで更新した記事を閲覧できるようになる
記事の削除/非公開化
- キャッシュの削除はできない
- ページ内容を404にしてキャッシュ生成することでエラーページを表示することはできる
ページのslugを変更
- 古いslugのページのキャッシュが更新されない
- 古いslugのページに対し、ページ内容を404にしてキャッシュ生成することでエラーページを表示することができる
キャッシュ生成に失敗したら？
- 古い情報が表示され続ける
- 再実行をするなど適切な処理を行うよう考慮する必要がある
キャッシュ生成にはどれくらい時間がかかる？
- 詳細にはわからない
- 小さなサンプルで試した結果は数秒だったが、大きなページになるとどうなるかはわからない
キャッシュ生成が完了する前にアクセスしたら？
- 古いキャッシュが表示される
- キャッシュ生成にどれくらい時間がかかるかによるが、プロダクトによっては問題になるかもしれない
このように掘り下げていくと意外と考慮しないといけないことが多く必ずしもSSRの代わりに使うことはできないケースがあると思います。
他にも思わぬ落とし穴があるかもしれません。
法に触れるもの、機密情報を扱う場合などSSRにした方がいいかもしれませんし、クライアントサイドでのデータ取得を併用する方法も考える余地があるかもしれません。
まとめ
On-demand ISRは全てのSSRのプロダクトの代わりになるわけではない。
正確にキャッシュの更新をすることはSSRより考慮しないといけないことが多く難しいと感じました。
イベントをトリガーにキャッシュを更新する流れは、非正規化されたデータベースを更新するのとなんとなく似ていると感じました。
SSRの代わりにはならないから使えないのかといえばそうではなく、SSRほどのデータ整合性は担保できないのでそこを諦められるかを見極め、しっかりキャッシュ更新と向き合って運用すればユーザー体験もよく素晴らしいものだと思いました。
またFAQやマニュアルなど、開発者とは別の運用チームなどが、CMSでデータを更新してページを生成するような静的なページには向いていると思いました。
それならSSGでいいと言われてしまえばそれまでですが、更新頻度や規模によりますがビルドする必要がないのは個人的に大きいと思います。
最後に前述したOn-demand ISRで注意するべき点についてもう一度書いておきます。
他にもあれば教えて下さい。
- 一度公開したページの削除/非公開に工夫が必要
- ページのパスのキーとなる値を変更した場合は、変更前のページのキャッシュも意識する必要がある
- キャッシュ生成の失敗した場合の運用を考える必要がある
- キャッシュ生成にかかる時間を気にする必要がある
-
キャッシュ生成完了まで古いキャッシュが表示される ↩︎
ユーザーファーストなサービスを伴に考えながらつくる、デザインとエンジニアリングの会社です。エンジニア積極採用中です！hrmos.co/pages/funteractive/jobs
Discussion