正文

Vercel 是一個流行的 React.js、Next.js 等前端應(yīng)用部署平臺，我們可以一鍵將 Github 上的應(yīng)用部署上線，但它缺少一個重要部分：數(shù)據(jù)庫。不過現(xiàn)在已經(jīng)有了四種新數(shù)據(jù)庫可供選擇。

數(shù)據(jù)是 Web 應(yīng)用中不可或缺的一部分，在這之前我們可以配合使用 Heroku 的數(shù)據(jù)庫服務(wù)，但后來 Heroku 收費，不再提供免費的數(shù)據(jù)庫，社區(qū)中也一直尋找免費試用的數(shù)據(jù)庫方案，現(xiàn)在我們可以直接選擇 Vercel 來上線一個動態(tài)網(wǎng)站， 并且使用 JavaScript 和 TypeScript 框架服務(wù)端渲染實時數(shù)據(jù)會比以往任何時候都更容易。

5 月 1 日，Vercel 宣布一套 serverless 存儲解決方案現(xiàn)已在 Vercel 上可用，是由業(yè)內(nèi)一些最佳基礎(chǔ)設(shè)施提供商提供支持。

• Vercel KV：一種簡單耐用的 serverless Redis 解決方案，由 Upstash 提供支持
• Vercel Postgres：為前端構(gòu)建的 serverless SQL 數(shù)據(jù)庫，由 Neon 提供支持
• Vercel Blob：一種在邊緣上傳、提供文件對象存儲的解決方案，由 Cloudflare R2 提供支持

Vercel KV：持久的 Redis 數(shù)據(jù)庫

它是一種基于 Upstash E-Value 的鍵值存儲（類似 Redis）。操作數(shù)據(jù)庫非常容易，更重要的是它非?？焖?，因為與大多數(shù)數(shù)據(jù)庫不同，數(shù)據(jù)保存在內(nèi)存中而不是磁盤上， 這意味著它可用于持久化狀態(tài)，而不會在服務(wù)器崩潰時丟失數(shù)據(jù)，也就是說，在讀取方面會變得極其迅速，是緩存數(shù)據(jù)的理想選擇。

使用示例

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 日之前，不會因超過基本限制的按需使用而被收取費用。

• Hobby 免費用戶，每天的請求限制為 3000 次， 存儲 256 MB。
• Pro 用戶 512 MB - 超出 1GB/$0.20 當(dāng)達到此限制時，對數(shù)據(jù)庫的請求將受到速率限制。

Vercel Postgres：讓復(fù)雜數(shù)據(jù)變得簡單

PostgreSQL 是許多開發(fā)人員處理關(guān)系數(shù)據(jù)的首選方式。這個數(shù)據(jù)庫好處在于它可以自動擴展、容錯性強，并且有一個易于使用的 UI 界面?；旧夏阒恍枰c擊一個按鈕，就可以將你的數(shù)據(jù)庫連接鏈接添加到環(huán)境中，然后就可以直接在 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 服務(wù)器組件內(nèi)查詢、插入、更新或刪除數(shù)據(jù)，以靜態(tài)的速度在服務(wù)器上渲染動態(tài)內(nèi)容，并且大大減少客戶端 JavaScript 代碼

此外，它還與 Keisely 和我個人最喜歡的 Prisma ORM 庫良好地集成。

價格

• 免費用戶，每月的計算時間 60 hours，存儲 256 MB。
• Pro 用戶, 每月的計算時間 100 hours 存儲 512 MB, 超出 1GB/$0.30 當(dāng)達到此限制時，對數(shù)據(jù)庫的請求將受到速率限制。

Hobby 默認(rèn)免費使用，當(dāng)您接近使用限制時，Vercel 會向您發(fā)送電子郵件。不會為任何額外的使用付費，我們可以選擇：

• 30 天后過期
• 升級到 Pro

Vercel Blob：文件對象存儲

Vercel Blob 是一種用于在云中存儲文件的快速、簡單且高效的解決方案。它提供了一個完全基于 Web 標(biāo)準(zhǔn)構(gòu)建的輕松而強大的存儲 API，無需配置存儲桶或?qū)嵤┓敝氐?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 并允許你將大量非結(jié)構(gòu)化數(shù)據(jù)（如圖像和 PDF 文件）存儲在云上。換句話說，它可以替代 S3 等存儲桶。SDK 非常簡單——只需調(diào)用 put 方法并傳入要上傳的文件即可返回下載 URL 。但目前存在一個限制：最大文件上傳大小為 4MB ，在測試版階段之后應(yīng)該會增加。

Edge Config

它是一種全局?jǐn)?shù)據(jù)存儲，使您能夠在邊緣讀取數(shù)據(jù)，而無需查詢外部數(shù)據(jù)庫或訪問上游服務(wù)器。大多數(shù)查找在不到 1ms 的時間內(nèi)返回，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));
  }
}

使用場景

• 以超低延遲獲取數(shù)據(jù)。例如，你應(yīng)該將功能標(biāo)志開關(guān)存儲在 Edge Config 存儲中
• 存儲經(jīng)常讀取但很少更改的數(shù)據(jù)。例如，您應(yīng)該將關(guān)鍵重定向 URL 存儲在 Edge Config 存儲中
• 讀取每個區(qū)域中的數(shù)據(jù)。Edge Config 數(shù)據(jù)被主動復(fù)制到 Vercel 邊緣網(wǎng)絡(luò)中的所有區(qū)域

小結(jié)

筆者認(rèn)為，隨著框架從單一架構(gòu)轉(zhuǎn)向可組合架構(gòu)，框架正在向服務(wù)端渲染優(yōu)先轉(zhuǎn)變。這種轉(zhuǎn)變以 React Server Component 和將流式渲染為例。后端和數(shù)據(jù)庫的選擇并不缺乏。但對于新項目來說，選擇仍然會讓人無從下手，雖然 Vercel 的價格可能會高于其他服務(wù)商，但對于個人或者全棧的體驗項目來說無疑是最好的選擇。

以上就是詳解全棧開發(fā)Vercel數(shù)據(jù)庫存儲服務(wù)的詳細內(nèi)容，更多關(guān)于全棧Vercel數(shù)據(jù)庫存儲的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論