sumirenです。 2023年5月5日、ついにNext.js App Routerがstableになりましたね！ おめでとうございます！！ありがとうございます！！！ 今から本番で使うのが楽しみで待ちきれません。 13.4のリリースではstableの宣言とともに、目玉機能としてServer Actionsが来ています。Data Fetch（というか、もはやData Handling的なもの）の機能の一部として、とても興味深いです。 さて、Server Actions自体の解説は他の方に任せるとして、リリースノートには以下のような一文があります。 Server Actions in Next.js have been designed for deep integration with the rest of the data lifecycle, including the Next.js
Next.js 13 App Router の cache 周りを理解したい記事シリーズです。 Automatic fetch() Request Deduping revalidate ← この記事 fetchCache (後日公開) Incremental Static Regeneration / ISR Next.js では、もともとレンダリング方法のひとつとして、Incremental Static Regeneration = ISR が利用可能でした。 静的なページ生成を前提としながらも、一定間隔を超えた時点でページを再生成してくれる仕組みで、間隔は、getStaticProps の revalidate オプションで指定可能でした。 export async function getStaticProps() { const res = await fetch("https
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 目的 Next.jsのISRはどのような動作をするのかを、正しく理解したい！ ISRとは ISR(Incremental Static Regeneration)とは、SSGを利用しながらも、一定時間ごとにデータの再取得を行い、HTMLを再生成する手法のことを指します。 ISGとの違い ISRを調べていると、ISGという単語が一緒に出てくることがあります。 ISG（Incremental Static Generation）とは、Dynamic Routesのページにアクセスした際に、オンデマンドでページ生成を行う手法のことを指していた
Incremental Static Regenerationとは 「段階的な静的サイト再生成」と訳されるStatic Site Generation(SSG)のデメリットを補う機能です。 SSGのデメリットといえば、「事前にビルドしたページ内容しか返却しないこと」です。 要するにビルド後にデータベースが更新されたとしても、再ビルドしない限りはページ内容が更新されることはありません。 そこでISRを利用することでページにアクセスされる度に再ビルドさせることができます。 次回以降のアクセスから再ビルドで新しく生成されたページを返却するので、データベースの更新に合わせてページ内容を更新させたい場合に有効です。 基本的なISRの使い方 例）登録したタスクの一覧を表示するページ /pages/tasks/index.tsx import { NextPage } from 'next'; impo
最近Next.jsのISR（Incremental Static Regeneration）を耳にする機会が増えてきました。Zennでも2021/3/17時点で記事や本などの一部のページでISRを採用しています。 ISRとは何か ISRを使うことで、動的なコンテンツを含むページも静的ページとしてCDNにキャッシュすることが可能になります。Next.jsのISRはドキュメントに書かれているようにstale-while-revalidateという考え方でキャッシュが行われます。 具体的には、リクエスト時にページのキャッシュを作成し、次のアクセスではキャッシュされた古いデータを返します。その裏で次のアクセスに向けてキャッシュが再生成されるというイメージです。 これによりユーザー投稿コンテンツであってもCDNにキャッシュしやすくなるというわけです。 Next.jsでのISRの実装 デプロイ先がVe
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
