Introducing Vercel Storage

This article is a translation of the original article “Introducing storage on Vercel»

I also run a telegram channelFrontend in a navy way”, where I talk about interesting things from the world of interface development.

Introduction

Vercel KV, Vercel Postgres, Vercel Blob and Vercel Edge Config are now available.

Data is an integral part of the web. With JavaScript and TypeScript frameworks making just-in-time server-side processing easier than ever, it’s time to make databases a first-class part of Vercel’s front-end cloud.

Today we are pleased to announce that a suite of serverless solutions is now available on Vercel. storage data from the best infrastructure providers in the industry.

• Vercel KV: Serverless Redis solution, simple and durable, powered by Upstash

• Vercel Postgres: Serverless SQL database built for the frontend, powered by Neon

• Vercel Blob: File Upload and Serving Solution Powered by Cloudflare R2

Why now?

Due to the need for performance and personalization, frameworks are becoming server-oriented and edge-first. An example of this shift is React’s server-side components and the incorporation of a streaming infrastructure into our runtimes. These capabilities make it easier than ever to retrieve data from a database or other data sources in the server component itself.

At the same time, as the world moves from monolithic to composite architectures, no shortage of options backends and databases. But for new projects, the choice can still be quite difficult.

Aiming to be an end-to-end solution for building web applications, we implement solutions that are open, easy to use, and scale as efficiently as our front-ends.

Vercel KV: Durable Redis Database

A key value store like Redis is one of the most common tools developers turn to when managing things like rate limiting, session management, or application state.

Today we’re introducing Vercel KV, a serverless, Redis compatible, easy to use and high-strength database. Vercel KV allows you to create Redis compatible databases that can be written to and read from the Vercel network in the regions you specify, with little to no configuration required.

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);
}

We cooperate with upstashto provide a toolkit designed for serverless use that stores data in memory and on disk by default. This means that it can be used to save state without the risk of losing data if the server crashes.

Vercel Postgres: Complex data is easy

PostgreSQL is the preferred way to work with relational data for many developers. In cooperation with the company neon we introduced Vercel Postgres, the first serverless SQL database built for the frontend cloud.

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 is a fully managed, scalable, fault tolerant database that provides high performance and low latency for your web applications. Vercel Postgres is designed to work seamlessly with Next.js App Router and Server Components and other frameworks like Nuxt and SvelteKit, making it easy to fetch data from a Postgres database to display dynamic content on the server at the speed of a static one.

You can use Vercel Postgres to query, insert, update, or delete data directly inside your React server-side components, giving you powerful server-based data mutations and less client-side JavaScript.

Vercel Blob: Easy File Storage at the Edge

Vercel Blob is a fast, simple and efficient solution for storing files in the cloud. It provides a simple yet powerful storage API built entirely on web standards without the need to configure memory segments or implement heavy SDKs.

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 });
}

Vercel Blob can store files like images, PDF, CSV or other unstructured data. Use Vercel Blob to:

1. Files that you typically store on external file storage like Amazon S3. If your project is hosted on Vercel, you can easily access and manage these files through Vercel Blob

2. Files that are programmatically loaded or generated at build time for display and loading, such as avatars, screenshots, cover images, and videos.

3. Large files such as video and audio to take advantage of the global network

Beginning of work

This builds on our existing integrations with database partners such as supabase, PlanetScale And MongoDB.

Vercel’s first-person storage makes it easy for developers to manage their front-end storage needs without worrying about infrastructure. Hobby and Pro users can get started with Vercel KV and Vercel Postgres today.

Vercel Blob is currently in private beta testing and will be launched soon. Registerto get early access. Learn more about pricing, restrictions and usage at documentation.