Vercel がフルスタック開発を支援するデータベースストレージサービスを開始

Vercel は、React.js、Next.js などのフロントエンドアプリケーション展開プラットフォームとして人気があります。ワンクリックで Github オンラインにアプリケーションを展開できますが、データベースという重要な部分が欠けています。しかし、今では 4 つの新しいデータベースから選択できます。

データは Web アプリケーションの不可欠な部分です. それ以前は Heroku のデータベースサービスを使用できましたが、その後 Heroku は有料になり、無料のデータベースは提供されなくなりました. コミュニティは無料の試用データベースソリューションを探していました. 今では直接選択できますJavaScript と TypeScript フレームワークを使用して動的な Web サイトを立ち上げ、リアルタイムデータをサーバーでレンダリングする Vercel は、これまで以上に簡単になります。

5 月 1 日、Vercel は、業界で最高のインフラストラクチャプロバイダーの一部を利用して、一連のサーバーレスストレージソリューションが Vercel で利用可能になったことを発表しました。

Vercel KV: Upstash を利用したシンプルで耐久性のあるサーバーレス Redis ソリューション
Vercel Postgres: Neon を搭載した、フロントエンド向けに構築されたサーバーレス SQL データベース
Vercel Blob: Cloudflare R2 を利用した、ファイルオブジェクトストレージを提供するエッジソリューションでのアップロード

Vercel KV: 永続的な Redis データベース

これは、Upstash E-Value に基づくキー値ストア (Redis に似ています) です。データベースの操作は非常に簡単で、さらに重要なことに、ほとんどのデータベースとは異なり、データはディスクではなくメモリに保持されるため、非常に高速です。つまり、サーバーがクラッシュしてもデータを失うことなく状態を維持するために使用できます。読み取りが非常に高速になり、データのキャッシュに最適です。

使用例

import kv from '@vercel/kv';

export async function getPrefs() {
  const prefs = await kv.get('prefs');
  return prefs || {};
}

export async function updatePrefs(prefs: Record<string, string>) {
 return kv.set('prefs', prefs);
}
复制代码

価格

2023 年 6 月 1 日までは、基本制限を超えるオンデマンドの使用に対して課金されることはありません。

ホビーフリーのユーザーは、1 日あたり 3000 件のリクエストと 256 MB のストレージに制限されています。
プロユーザー 512 MB - 1GB/$0.20 以上この制限に達すると、データベースへのリクエストはレート制限されます。

Vercel Postgres: 複雑なデータをシンプルに

PostgreSQL 是许多开发人员处理关系数据的首选方式。这个数据库好处在于它可以自动扩展、容错性强，并且有一个易于使用的 UI 界面。基本上你只需要点击一个按钮，就可以将你的数据库连接链接添加到环境中，然后就可以直接在 React Server Component 中编写原始 SQL 代码了。

使用示例

import { sql } from '@vercel/postgres';
import { redirect } from 'next/navigation';

async function create(formData: FormData) {
  'use server';
  const { rows } = await sql`
    INSERT INTO products (name)
    VALUES (${formData.get('name')})
  `;
  redirect(`/product/${rows[0].slug}`);
}


export default function Page() {
  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}
复制代码

我们可以使用 Vercel Postgres 直接在 React 服务器组件内查询、插入、更新或删除数据，以静态的速度在服务器上渲染动态内容，并且大大减少客户端 JavaScript 代码

此外，它还与 Keisely 和我个人最喜欢的 Prisma ORM 库良好地集成。

价格

免费用户，每月的计算时间 60 hours，存储 256 MB。
Pro 用户, 每月的计算时间 100 hours 存储 512 MB, 超出 1GB/$0.30 当达到此限制时，对数据库的请求将受到速率限制。

Hobby 默认免费使用，当您接近使用限制时，Vercel 会向您发送电子邮件。不会为任何额外的使用付费，我们可以选择：

30 天后过期
升级到 Pro

Vercel Blob：文件对象存储

Vercel Blob 是一种用于在云中存储文件的快速、简单且高效的解决方案。它提供了一个完全基于 Web 标准构建的轻松而强大的存储 API，无需配置存储桶或实施繁重的 SDK。目前需要申请使用。

使用示例

import { put } from '@vercel/blob';

export const runtime = 'edge';

export async function PUT(request: Request) {
  const { url } = await put('avatars/user-12345.png', request.body, { access: 'public' });

  return Response.json({ url });
}
复制代码

它基于 Cloudflare R2 并允许你将大量非结构化数据（如图像和 PDF 文件）存储在云上。换句话说，它可以替代 S3 等存储桶。SDK 非常简单——只需调用 put 方法并传入要上传的文件即可返回下载 URL 。但目前存在一个限制：最大文件上传大小为 4MB ，在测试版阶段之后应该会增加。

Edge Config

它是一种全局数据存储，使您能够在边缘读取数据，而无需查询外部数据库或访问上游服务器。大多数查找在不到 1ms 的时间内返回，99%的读取将在 10ms 以下返回。

使用示例

import { NextResponse, NextRequest } from "next/server";
import { get } from "@vercel/edge-config";

export async function middleware(request: NextRequest) {
  if (await get("showNewDashboard")) {
    return NextResponse.rewrite(new URL("/new-dashboard", request.url));
  }
}
复制代码

使用场景

以超低延迟获取数据。例如，你应该将功能标志开关存储在 Edge Config 存储中
存储经常读取但很少更改的数据。例如，您应该将关键重定向 URL 存储在 Edge Config 存储中
读取每个区域中的数据。Edge Config 数据被主动复制到 Vercel 边缘网络中的所有区域

小结

笔者认为，随着框架从单一架构转向可组合架构，框架正在向服务端渲染优先转变。这种转变以 React Server Component 和将流式渲染为例。后端和数据库的选择并不缺乏。但对于新项目来说，选择仍然会让人无从下手，虽然 Vercel 的价格可能会高于其他服务商，但对于个人或者全栈的体验项目来说无疑是最好的选择。