Vercel

Vercel Review: The Best Hosting and Deployment Solution?

Written by Mariola Wojcik

Last update: 6/3/2024

FeatureVercel

Infrastructure

What runs under-the-hood.

Multi-cloud

Google Cloud (GCP), AWS
Cloudflare Workers for Edge Functions

Continuous Integration & Continuous Delivery (CI/CD)

Continuous deployment

Imagine an automatic update system for your website. This feature automatically deploys any changes you make to your code (usually from Git) to your live website.

Automated builds from Git

An easy integration with popular Git repository hostings like Github, GitLab and Bitbucket.

Instant rollbacks to any version

Easy way to promote any previous build to production without the need to revert commits or data changes.

Site previews for every push

New build with a unique URL for every commit and pull request.

Compatible with all Static Site Generators

Notifications

Events triggered on successful, canceled, or failed build.
Slack, GitHub, outgoing webhook

Team Management

Create team account and invite your teammates to the project.

Custom domains

Bring your own domain and connect to the project.

Automatic HTTPS

SSL certificate generated automatically.

Rewrites & Redirects

HTTP 301 or 302 redirects from one URL to another. Rewrites work similar to reverse proxy and allow to send user to different URL without modifying the original URL.

Password Protection

An easy way to restrict access to the website for users who don't have password. Useful if you work on a new site and want to keep it in secret.
Available on Enterprise plans or with the Advanced Deployment Protection add-on for Pro plans - additional cost $150/mo

Skew Protection

Skew Protection ensures client and server versions stay synchronized during deployments, preventing compatibility issues.
available on Pro and Enterprise plans

Free Tier

Websites

Number of projects you can have in Free Tier on one account.

200

Build Minutes

The amount of time your build scripts can run per month.

6 000 minutes /month

Concurrent builds

How many builds can be run at the same time?

1

Bandwidth

The amount of data that is transferred to or from the CDN.

100GB /month

Team Members

The number of users (team members) that can be added to the CMS.

1

Build Time Per Deployment

Build have to finish within the limited time. If not it will fail due to timeout.

45 minutes

Build Memory Limit (in MiB)

The amount of memory that is allocated by system to build process. Some operations like image processing are expensive and might require more memory. For Node.js it is max-old-space-size setting.

8192 MiB

Paid Plans

Max team members before switch to custom pricing

10

Git contributors have to be Team Members

In order to triger build, Git contributor has to be a paid team member.
Starting from $20/mo per member

Serverless

Serverless Functions (API)

Small pieces of code that run on-demand without managing servers, typically used for API endpoints.
Node.js, Beta support for Python, Ruby, and Go

Edge Functions

Serverless functions that run closer to the user, reducing latency and improving performance.
Vercel Edge Functions

Background Functions

Code that runs in the background on the platform to perform tasks that don't require immediate user interaction.
Inngest

CRON Jobs

Schedule tasks to run automatically at specific times or intervals. Useful for automating repetitive website maintenance tasks.

Developer Experience

CLI

Command Line Interface tools that allow developers to perform tasks and manage the tool via the command line.
vercel

Extensions

Additional plugins or add-ons that can enhance the functionality of the platform.
Integrations

Environment Variables

Secret configuration settings for your website that change based on where it's deployed (dev, staging, production).
N/A

Build Logs

Track the progress and results of website builds for troubleshooting

Build Canceling

Ability to stop a build process that is currently running. This frees up resources and lets you make changes to your website faster by stopping builds you don't need anymore.
Automatic canceling when redundancy or duplication is detected.

Platform Built-in Products

Analytics

Tools for tracking and analyzing website traffic.
Real-time Insights. User Experience Scores. Web Vitals. Audiences.

Authentication

Services for managing user logins and authentication.
Vercel Authentication

Database

Managed database services.
Vercel Postgres

Asset Optimizations

Tools for optimizing images, CSS, JS, etc.
bundling, minifying, compressing images

A/B Testing

Lets you test different versions of your site by directing traffic to each variant, helping you optimize user experience based on performance metrics.
Using Edge Functions

Form Handling

Services for managing form submissions.
Formspree

Data Storage

Solutions for storing and managing data.
Vercel Storage

Push Notifications

This allows your website to send real-time alerts or updates to visitors who have opted-in.

Machine Learning

Security & Compliance Offerings

Two-factor authentication

Adds an extra layer of security when logging in.

Team Logs

Tracks user activity within the platform for better accountability.

SOC2

Service Organization Control 2 compliance for managing customer data.
SOC2 Type 2

ISO27001

International standard for information security management.

GDPR

Compliance with the General Data Protection Regulation for handling personal data.

Sustainability

Carbon Neutral

Carbon-free Energy

AWS promised to run on 100% renewable energy by 2025

Integrations

Integrations

Connecting your deployment platform with external services like headless content, commerce, databases, and more.

Custom build-system integrations

Allows you to connect your own build tools and processes with the deployment platform.

Support with self-hosted instances of git

API mesh

API Mesh allows you to combine multiple APIs into a single unified API, simplifying data fetching and integration across different services and backends.

Deploy Preview feedback integrations

Enables team members and stakeholders to comment directly on preview deployments.
Slack, GitHub

Edge Functions integrations

Any Framework

High Performance Build Memory and CPU

Custom setup for enterprise customers

Native Build Plugins

Introduction

Vercel is a popular cloud platform for deploying, previewing, and scaling front-end frameworks and static sites. It is especially recognized for its comprehensive integration with Next.js - a leading framework for React applications - and offers robust support for other popular front-end frameworks including Astro, Nuxt.js, and SvelteKit. The platform provides essential tools and infrastructure needed to build and deploy web applications efficiently. At Bejamas we frequently use Vercel in our projects, so let’s delve deeper into this topic.

Optimize your Vercel cost up to 80%

Contact us to learn how to optimize your Vercel cost.
Some of our clients have saved up to 80% on their Vercel bill.

By submitting this, I confirm that I have read and understood the Privacy Policy.

Current State

Vercel serves a wide range of users, from individual hobbyists to large enterprises, enhancing the development experience for modern web applications. The platform simplifies deployment processes through features like automatic scaling, global distribution, and performance optimizations, making it suitable for startups, SMBs, and large corporations alike.

From our perspective, the most valuable features are:

  • Great developer experience, such as instant git integrations, automatic previews for every push, and zero-configuration deployments allow developers to focus more on coding and less on setup. This seamless integration with development workflows greatly aids in iterative development and continuous integration practices.It's important to note that great experience has its price - Vercel is one of the more expensive options out there.
  • Extensive ecosystem and integrations - Vercel integrates with numerous third-party services and tools, facilitating a comprehensive ecosystem that extends its functionality. This includes control platforms like GitHub, GitLab, Bitbucket, collaboration tools such as Slack and Jira and content management systems including Contentful and Sanity, among others.
  • Support for modern development frameworks - in addition to its native support for Next.js, Vercel supports a variety of modern development frameworks like React, Vue, Angular, Svelte, and more. It enables developers to use the platform regardless of their chosen technology stack.
  • Serverless functions support - which allows developers to write back-end code that runs in response to events, without maintaining a full back-end server. These functions can be written in multiple languages and are seamlessly integrated with the front-end, enabling complex applications to be built entirely on Vercel’s platform.
  • Security features - which include automatic HTTPS and environment variables for secure key management. Vercel supports role-based access control (RBAC), enabling teams to define and manage who has access to specific resources within the project, which can reduce risks associated with unauthorized access or accidental changes. The platform also provides automatic protection against Distributed Denial of Service (DDoS) attacks, which helps secure applications from malicious attempts to disrupt service availability, ensuring uptime and consistent performance.

Future

Vercel appears very promising due to its commitment to optimizing the web and pioneering innovative solutions such as React Server Components (RSC), Partial Prerendering (PPR) or streaming. These features make web applications more efficient, faster, and more scalable.

The platform constantly evolves with new changes and functionalities added several times a month. To stay updated, follow their changelog and blog.

Look & Feel

Vercel’s user interface is clean and intuitive to use. The interface provides a smooth navigation experience, allowing users to intuitively manage projects, deployments, and settings. You can easily deploy your website, see the deployed branch for the Production or Preview environment, run and test serverless functions, add environment variables, and much more.

[@portabletext/react] Unknown block type "video", specify a component for it in the `components.types` prop

Vendor Lock-in & Migration

Vercel is particularly optimized for Next.js, which it supports natively and extensively. While Next.js can be deployed on other platforms, the seamless integration and performance optimizations on Vercel can make migrating to another service seem less appealing due to potential drops in performance or loss of specific features.

Deployment configurations, such as vercel.json, are specific to Vercel’s deployment pipeline. Moving to a different platform might require significant reconfiguration or changes in the deployment setup, adding overhead to the migration process. Alternative platforms might include Netlify, AWS Amplify, or traditional cloud services like AWS, Azure, and Google Cloud.

Pricing Structure

Vercel's pricing structure accommodates a wide array of users with its tiered pricing model, featuring free and paid plans that vary in features, performance, and scalability.

The free Hobby plan is ideal for personal projects and small-scale applications, while the Pro plan is tailored for professionals and small teams.

The Enterprise plan is customizable for large teams requiring advanced features such as higher performance capabilities, additional team management tools, and dedicated support.

Details on each plan, including infrastructure use and potential additional fees, are available at Vercel pricing page. Vercel offers a Spend Management tool to manage and monitor infrastructure spending, allowing for notifications via email, web, and SMS as you approach defined spending limits. Customizable plan options with Pro add-ons are also available, such as the Speed Insights add-on, which provides detailed performance metrics for $10/month per project.

At Bejamas, we most often use the Pro plan, noted as the most popular on Vercel’s website. Depending on the project's needs and the number of developers involved, we adjust the number of user accounts monthly, paying only for the specific number needed. This flexibility is crucial for managing dynamically changing teams and project requirements efficiently.

Support

If there are any issues or specific needs, Vercel’s customer support is readily available. Vercel’s documentation and community guides offer substantial help, and dedicated Discord channels are available for framework-specific discussions. On a paid plan, users have access to more direct support channels - issues can be addressed by submitting a ticket to Vercel’s support team.

Conclusion

Vercel stands out as a powerful cloud platform that excels in deploying, previewing, and scaling modern web applications, particularly through its deep integration with Next.js and robust support for other leading front-end frameworks. It boosts productivity through seamless git integrations and zero-configuration setups, supports a variety of modern development frameworks, and integrates with numerous third-party tools. Its ongoing updates and feature additions promise to keep it at the forefront of development technology.

[@portabletext/react] Unknown block type "prosCons", specify a component for it in the `components.types` prop