Vercel KV

Vercel は、2023 年 5 月 1 日に、インフラストラクチャプロバイダーを活用した、次の 3 つのサーバーレスストレージソリューションスイートを発表しました。Vercel は、データベースを Vercel のフロントエンドクラウドの主要部分にする時が来たと述べています。

• Vercel KV：Upstash を搭載した、使いやすく耐久性のあるサーバーレス Redis ソリューション
• Vercel Postgres：Neon を搭載した、フロントエンド向けに構築されたサーバーレス SQL データベース
• Vercel Blob：Cloudflare R2 を搭載した、エッジでファイルをアップロードおよび提供するソリューション

Introducing storage on Vercel - Monday, May 1st 2023

Vercel KV を分かりやすく

さて、皆さんの中には、「Vercel KV って何？」「そもそもこれ使う意味あるん？」って方いるかと思いますが、あります。だいぶヤバいやつです。

Vercel KV は、Vercel が提供する分散型キーバリューストアで、大量のデータを高速に保存・取得することが可能なサービスなんですね。

それなりに大きなデータを扱うことがあり、それをすぐに取り出す必要がある場合に、めっちゃ便利なんですよ！例えば、ユーザーのプロフィール情報やゲームのスコアなどをリアルタイムに保存し、それを高速に取得したいときなんかに使います。

Vercel KV を使うと、データの保存と取得が超高速になるんですよ。取得操作はミリ秒単位で行われますから、データを待つ時間がほとんどないんです。凄くないですか？

一方で、Next.js の新しいuseSearchParamsとusePathnameフックは、クライアントコンポーネント内で URL のパラメータやパスを取得するのに非常に便利です。「そもそもこれいつ使うん？」って方いるかと思いますが、例えば、URL のパラメータに基づいてコンポーネントの表示を変更したり、特定のパスへのナビゲーションに反応して何かを行うときなどに使います。

それらを使うことで、Next.js のページで動的な振る舞いを実現できるんです。あるパスに移動したとき、または特定のパラメータが URL に存在するときに何かを行うようなことが可能になるんですね。

というわけで、Vercel KV と Next.js の新しいフックは、あなたの Web アプリケーションをより速く、よりダイナミックにするための強力なツールなんですよ。

以上の説明で、「Vercel KV って何？」という疑問は少しは解消されたでしょうか？一部詳細な情報については、時間の都合上、まだ調査中です。その詳細を引き続き調査しますので、お待ちください。

結論

Vercel KV は、JSON データの保存と取得を可能にする耐久性のある Redis データベースです。KV の作成、削除、管理は Vercel のダッシュボードで行われます。

プロとホビープランでは、現在ベータ版として利用可能です。アカウントごとに複数の Vercel KV データベースを持つことができます。

Vercel KV は、耐久性があり、サーバーレスの Redis ストレージを提供します。KV は、高速、スケーラブル、そして安全な設計がされており、アプリケーション内でキー値と JSON データを保存および取得するのに最適な選択です。

KV ストアはデフォルトで単一のリージョンに保存されますが、分散型ワークロードのために複数のリージョンに複製することも可能です。

Vercel KV | Vercel Docs

どんな時に使うのか？

ショッピングのカートなど、Vercel KV は、複数のページリクエストを跨いでユーザーセッションデータを保持できるそうです。これにより、ショッピングカート内のアイテムを追跡することができます。

実装

Vercel KV を使用するには、まず Vercel アカウントを作成して、プロジェクトを作成する必要があります。プロジェクトを作成したら、Vercel KV を有効にできます。Vercel KV を有効にしたら、API キーとシークレットを取得できます。API キーとシークレットを取得したら、それらを使用して Vercel KV への接続を作成できます。接続を作成したら、Vercel KV にデータを保存および取得できます。

パッケージをインストールします。

pnpm i @vercel/kv

次に、環境変数を取得できるように Vercel CLI をインストールします。

pnpm i -g vercel@latest

KV ストアからデータを取得します。

import kv from '@vercel/kv'
import { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(request: NextApiRequest, response: NextApiResponse) {
  const user = await kv.hgetall('user:me')
  return response.status(200).json(user)
}