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

What is 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.

The rebranding from Zeit to Vercel took place in April 2020, reflecting its focus on its core product and its commitment to continuous improvement. Since its inception, Vercel has been instrumental in developing and popularizing the Jamstack architecture, which emphasizes static site generation and serverless functions for building fast and secure web applications.

Vercel is also the company behind the popular Next.js framework, a React-based framework for building server-rendered applications. The tight integration between Vercel and Next.js has made it a preferred choice for many developers building on composable architecture.

Vercel under the microscope

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 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 deal-breakers in the real world. 

💡 With Vercel, I can upload projects casually for one-off deploys, proof-of-concept apps, etc., and can show them to anyone using the .vercel.app 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.

See how Ikius can help you
build and deploy next-gen
software

Exceed expectations: Embrace new web architectures and adopt the latest tools.

Grow your business: We’ll work together to grow your business and build the best web experiences.

Expand your team: Partner with a team of Nordic talent.

Contact us

Supported frameworks and static site generators

Vercel supports a variety of programming languages and frameworks, enabling developers to build and deploy applications with their preferred tools. Some popular frameworks and languages supported by Vercel include:

1. Next.js: A popular React framework for building server-rendered applications.

2. Gatsby: A powerful static site generator based on React, ideal for creating fast and optimized websites.

3. Nuxt.js: A Vue.js-based framework for creating Universal Vue.js Applications with server-side rendering.

4. React: A popular JavaScript library for building user interfaces, developed by Facebook.

5. Vue.js: A progressive JavaScript framework for building user interfaces.

6. Angular: A platform for building web applications, developed by Google.

7. Svelte: A newer, lightweight, and fast JavaScript framework for building user interfaces.

8. Ember.js: A framework for creating ambitious web applications with a focus on developer productivity.

9. Eleventy: A simpler static site generator that works with multiple template languages.

10. Hugo: A fast and flexible static site generator built with Go.

Keep in mind that while Vercel has built-in support for these popular meta-frameworks and static site generators, it can also be used with other tools and technologies, as it is a versatile platform for deploying web applications and static sites.

Its flexibility allows developers to work with the tools they prefer, making it a convenient choice for a wide range of projects.

💡 Read more: Next.js alternatives: Popular front-end meta-frameworks comparison

Security

Security is a crucial aspect of any cloud platform, and Vercel implements several security features and practices to protect user data and applications. Some of the key security features provided by Vercel include:

• Automatic SSL: Vercel provides free SSL certificates for custom domains, ensuring encrypted connections between clients and the deployed applications. SSL certificates are issued automatically and renewed, reducing the hassle of managing SSL certificates manually.

• Secure default settings: Vercel ensures that applications are configured with secure default settings, reducing the risk of vulnerabilities due to misconfiguration.

• DDoS protection: Vercel's edge network provides built-in DDoS protection, safeguarding applications from various types of DDoS attacks.

• Immutable deployments: Each deployment on Vercel is immutable, meaning once it's deployed, it cannot be altered. This practice reduces the risk of unauthorized modifications and ensures that any changes to the application must go through the proper deployment process.

• Isolation of serverless functions: Vercel's serverless functions run in isolated environments, limiting the potential blast radius of a security breach.

• Access control: Vercel allows granular control over team member permissions through role assignments, helping to enforce the principle of least privilege.

• Regular security audits: Vercel conducts regular third-party security audits to ensure the platform maintains a high level of security.

• GDPR and privacy compliance: Vercel adheres to GDPR guidelines and implements privacy-focused practices to protect user data.

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 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) 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 most collaboration will happen on Github or Bitbucket. 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.

Here's a handy table that summarizes the differences:

📖 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 building and deploying PWAs that work across multiple devices and platforms easy.

• eCommerce websites: If you're building a composable commerce storefront, Vercel is a fantastic choice. It's optimized for these sites and supports 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.