はてなブックマーク

Next.jsを使っている時に ISR や On-demand ISRをを当たり前に使っているのですが、Next.js がどういうふうに動いているのか小さい検証環境を用意して検証しました。 ISR, オンデマンドISRとは はじめに、ISRと On-demand ISR (On-demand revalidate) について軽くおさらいしておきます。 ISR ISR は SSG したページを revalidate で指定した時間を超えてからアクセスがあった時に、更新がないか再検証して、ページを更新する機能です。 オンデマンドISR オンデマンドISR はこの ISR をさらに強化したような機能で、ISR だと revalidate で指定した時間を待たないとページが更新されなかったのに対して、任意のタイミングでページを更新できるようにしたものです。 使い方などはこの記事では触れないので、m

こんにちは 昨日(5/1深夜)のVercel Shipで、Vercel KV, Vercel Postgress, Vercel Blob とストレージに関する三つの新機能が発表されました。 昨今のフロントエンド情勢ではCDNを使ったキャッシュ戦略など、低コストに大規模なトラフィックを捌く需要が高まっており、今までVercelでサポートが薄かったストレージ周りが、気軽に使えるようになるのはかなり嬉しいです。 今回は、発表された三つの新機能の中から、Vercel KVについて、簡単にキャッシュ用途で試して見たので記事に書いてみます。 KVって何？ key Valueの略称で、名前の通りキーと値のペアを保存することができます。 Vercel KVは、中身はRedisデータベースのようなものになっていて、キーとJSONのペアなどをエッジ上で扱うことができます。 Vercel KVを試す Verc

はじめに 「サイト表示が 0.1 秒遅くなると、売り上げが 1%減少し、1 秒高速化すると 10%の売上が向上する。」こんな鉄板フレーズがある通り、サイトの表示速度はユーザー体験や売り上げに直結するもので、早ければ早いだけ嬉しいです。 パフォーマンスの問題は小さな問題が絡み合って大きな問題になっていたりして、特定が難しいですが、Performance Insightsを使うと、問題になりそうな部分を簡単に分析することができます。 今回はこの機能を使ってページ読み込みパフォーマンスの問題を計測、改善する方法について書いていきたいと思います。 Performance Insights とは ページ読み込みの分析に特化しているパフォーマンスパネルです。 分析したいページのFCPタイミングやLCPのタイミング、CLSがどこで起きたかなど、Lighthouseの指標に近い目線でページの読み込みを細か

単方向通信であるということと、HTTP/1.1上で動作しているのが大きな特徴です。 また、HTTP上で動作することから、通信の互換性が高く、セキュリティモデルも使いまわせるので安心です。 どんな用途と相性がいいの？ 双方向通信がしたいわけでなければ、相性の幅がとても広いです。 今回の ChatGPT のような、GPT がトークンを生成するごとに送るケースはもちろん、通知の未読件数バッジの更新、ニュース速報の表示など、サーバからイベントを送りたい時ならなんでも使えます。 HTTP/1.1で動くカラクリ SSEはHTTPのレスポンスヘッダにContent-Type: text/event-streamを指定した上で動作します。 SSEが動く流れ クライアントがサーバーに HTTP/1.1 リクエストを送信し、イベントストリームに接続します。 サーバーは、Keep-Alive 接続を使用して、T