DEV Community

Max Ikäheimo
Max Ikäheimo

Posted on • Originally published at

Vercel: The Versatile Platform for Modern Web Development

What is Vercel?

Vercel is a cloud platform for building, deploying, and scaling serverless applications and static websites. It's gained popularity among developers due to its ease of use, speed, and ability to handle large amounts of traffic. 

With Vercel, you can build and deploy applications with a variety of programming languages and frameworks, and take advantage of features like automatic SSL, serverless functions, and continuous deployment.

In this article, we'll explore the benefits of using Vercel and dive into some of its key features. We'll also look at some of the platform's limitations and considerations to keep in mind when deciding if Vercel is the right choice for your next project.

This post covers

A closer look at Vercel

Vercel is a cloud platform for frontend developers, with which we can abstract away deployment, previews, CI/CD, API calls, and a whole host of other functionality. For free.

Deployments run on Vercel's edge network, which reduces the load times of your web application or website, adds a caching layer, and even implements backend functionality via serverless functions.

Manually configuring servers, messing around with Docker containers, setting up Nginx, and configuring DNS all seem like an unnecessary hassle to me now. 

My first impression when I tried Vercel was that it "just works," and that's a wonderful feeling for a developer. When you realize you've just saved a ton of time and will continue to do so in the future, those really are the moments to savor.

However, the real beauty for me has always been the price tag. I would never have been able to dig in and really appreciate the above features if there'd been a financial barrier to entry – even a small one. 

Many companies will give you a taste of what they're offering, but you'd soon realize that what you need to be effective in the real world is behind a paywall. 

For example, I used to use Heroku. At the time, there were scores of developers who would upload their hobby projects to their free tier. What we didn't get for free was an SSL certificate, or a custom domain – both of which are deal-breakers in the real world. 

With Vercel, I can just upload projects casually for one-off deploys, proof-of-concept apps, etc., and can show them to anyone using the domain that comes included out-of-the-box.

So what do you get with Vercel exactly? Here's an overview.

Zero configuration seamless deployments of your frontend code 

Vercel offers seamless deployment of frontend code with zero configuration. This means developers can focus on building their applications rather than configuring servers, Docker containers, or Nginx.

Real-time insights, analytics, and performance metrics 

Vercel provides real-time insights, analytics, and performance metrics to help developers understand their applications' performance.

"Infinite" scalability 

Vercel offers infinite scalability, which means that applications can handle any amount of traffic, as long as one can afford it.

Edge network (CDN, caching, edge functions)

Vercel uses a global edge network that reduces the load times of web applications, adds a caching layer, and even implements backend functionality via serverless functions. 

Static asset hosting (images, media)

Vercel provides static asset hosting for all kinds of images and media.

Deploy previews and A/B testing

Vercel allows developers to test new features with deploy previews and A/B testing.

99.99% uptime

Vercel provides 99.99% uptime, which ensures that applications are always available and performing well.

Continuous Integration and Deployment (CI/CD)

Vercel offers continuous integration and deployment, which allows developers to quickly and easily push changes to production.

Git-based workflow

Vercel uses a git-based workflow that makes collaboration and version control easy.

Free tier

Vercel has a free tier that allows developers to test and deploy their applications without any financial barriers to entry.

Getting started with Vercel

The best way to get started with Vercel is by plugging in your git repository. I find this workflow extremely intuitive, and if you're not using git in 2023, well.. please learn git. 

There really aren't a lot of technologies that I feel every single developer should adopt, but git is one of them.

Next, you simply register a Vercel account, connect to Github/Gitlab/Bitbucket using the intuitive and easy-to-follow steps in Vercel's dashboard, and Vercel will take care of the rest. It can identify which framework your code has been written in (it knows about 35 frameworks and auto-configures if your code uses one of them) and auto-deploys. 

You can add environment variables using the console too – which you definitely should do (never add sensitive data to git repositories, even private ones) – and then the app will build and deploy itself automagically.

Once your app is initiated, custom domains can be added for free, SSL/TLS certs are issued (and auto-renew), and your app is ready to be served from the edge network. There are no performance hits for using the free tier either; your free app is production-grade and can be relied upon for business critical operations.

From there, Vercel has a unique offering – real-time analytics. 

I love Google Chrome's Lighthouse, where I can get insights about how my app might perform, but that's just a simulation – my app's users may have a totally different experience for a variety of reasons. 

Vercel has a Real Experience Score, taken from real users' devices. These analytics give much more insight into what is actually happening, and these are actionable business insights – while not overstepping in terms of privacy.

Vercel at scale

Okay, so hopefully I've sold you on the free tier. But what about enterprise-grade apps? 

Another really nice facet of Vercel is that once the foundations are laid, scaling is brainless. If you suddenly have a huge spike in traffic, Vercel will auto-scale. This is the beauty of serverless architecture. With scaling taken care of, all you then need is a way to manage deployments among your team members. 

Everything is git-based so that most collaboration will happen on Github or Bitbucket, and all that needs to happen on Vercel is to assign permissions to the appropriate team members, which we do via roles. 

You can be assigned as an owner, member, developer, billing, or viewer; these different roles become available on different plans. You'll start paying actual money at this stage, but it's still pennies compared to running an entire DevOps team to keep your application running smoothly.

Vercel vs Netlify

Netlify was founded just a shade earlier than Vercel, in 2014. Zeit came a year later, in 2015, later changing its name to Vercel. 

They're both great platforms, and honestly, many of the features that I love about Vercel are ones that I had discovered earlier by using Netlify. With both platforms, you get auto-scaling, auto-deploys, edge functions, git-integration, CI/CD, A/B testing, and more. 

In the past, some features of one had not arrived in the other – edge functions being a notable example, and SSR capabilities – but as these features developed, they were eventually adopted by both companies.

One key difference between these two Jamstack giants, which still arguably stands, is focus. 

Netlify is sometimes considered wider in scope than Vercel – it tries to do more, while Vercel concentrates its efforts. For Netlify, this is evident from their Integrations Hub, with hundreds of partners to choose from, companies like Auth0, Cloudinary, Cypress, or Contentful.

In contrast, Vercel has very much doubled down on its flagship offering, Next.js

The React.js Javascript library, as any frontend developer will tell you, still reigns supreme in terms of adoption and popularity. And among React developers, Next.js is extremely well-loved. 

Hence, the tight integration between Vercel and Next.js is self-evident. If you're using Next.js (and many, many developers are), there is good chance Vercel will be a really good fit for hosting your application.

Read more: Vercel vs Netlify

Vercel use cases

Vercel is a versatile platform that can be used for a variety of use cases. Here are some of the most common use cases for Vercel:

  • Web applications: If you're looking to build and launch a fast and responsive web app, Vercel is the way to go! It's optimized for performance and will help you deliver a top-notch user experience.

  • Static websites: Vercel is also great for hosting and deploying static websites. They load quickly and work seamlessly no matter where your users are located.

  • Serverless functions: Want to build backend logic for your application without the hassle of a dedicated server? Vercel has got you covered with their support for serverless functions.

  • Progressive web apps: Vercel also makes it easy to build and deploy PWAs that work across multiple devices and platforms.

  • eCommerce websites: If you're building an e-commerce site, Vercel is a fantastic choice. It's optimized for these types of sites and has support for popular eCommerce frameworks like Shopify and Magento.

  • Developer portfolios: Lastly, if you're a developer looking to showcase your work, Vercel is an excellent choice for building and deploying your portfolio. They have support for popular front-end frameworks like React and Next.js, so you can really make it your own.

Closing thoughts

Switching from traditional server architecture to serverless Jamstack methodologies has given the frontend developer community a boost in productivity on a scale that's rarely seen. 

Vercel is a streamlined, intuitive, and cost-effective platform for getting your web applications out of your brain and into the world. 

There's no barrier to entry, and I honestly feel that the front-end developers who aren't using it in 2023 are mainly composed of those who don't know about it.

The future has arrived. Get on board. 

Top comments (0)