Vercel é uma popular plataforma de implantação de aplicativos front-end, como React.js, Next.js, etc. Podemos implantar o aplicativo no Github online com um clique, mas falta uma parte importante: o banco de dados. Mas agora há quatro novos bancos de dados para escolher.
Os dados são parte integrante dos aplicativos da Web. Antes disso, podíamos usar o serviço de banco de dados do Heroku, mas depois o Heroku cobrava uma taxa e não fornecia mais um banco de dados gratuito. A comunidade estava procurando uma solução de banco de dados de avaliação gratuita. Agora podemos escolher diretamente Vercel para lançar um site dinâmico e dados em tempo real de renderização de servidor usando estruturas JavaScript e TypeScript será mais fácil do que nunca.
Em 1º de maio, a Vercel anunciou que um conjunto de soluções de armazenamento sem servidor agora está disponível na Vercel, desenvolvido por alguns dos melhores provedores de infraestrutura do setor.
- Vercel KV: Uma solução Redis sem servidor simples e durável desenvolvida pela Upstash
- Vercel Postgres: um banco de dados SQL sem servidor criado para front-ends, com tecnologia Neon
- Vercel Blob: uma solução de upload na borda que fornece armazenamento de objeto de arquivo, com tecnologia Cloudflare R2
Vercel KV: um banco de dados Redis persistente
É um armazenamento de chave-valor (semelhante ao Redis) baseado no Upstash E-Value. É muito fácil manipular o banco de dados e, mais importante, é muito rápido porque, ao contrário da maioria dos bancos de dados, os dados são mantidos na memória e não no disco, o que significa que pode ser usado para persistir o estado sem perder dados se o servidor travar. torna-se extremamente rápido nas leituras e é ideal para armazenar dados em cache.
Exemplo de uso
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);
}
复制代码
preço
Você não será cobrado pelo uso sob demanda acima do limite básico até 1º de junho de 2023.
- Os usuários do Hobby Free estão limitados a 3.000 solicitações por dia e 256 MB de armazenamento.
- Usuários profissionais 512 MB - 1 GB/US$ 0,20 acima Quando esse limite é atingido, as solicitações ao banco de dados têm uma taxa limitada.
Vercel Postgres: dados complexos simplificados
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 的价格可能会高于其他服务商,但对于个人或者全栈的体验项目来说无疑是最好的选择。