*this post is the 3rd post in a 4 part series

Part 1: Introduction
Part 2: Supabase
Part 3: Vercel
Part 4: Svelte

When building the diversetalent.ai progressive web app we were spoilt for choice when choosing a hosting provider. However, one service fit our requirements perfectly: Vercel.com

We needed a provider that not only slotted in nicely with the rest of our stack (Svelte, Supabase & GitHub), but would also be able to scale in terms of performance and cost.

From seamless server-side rendering (SSR) with SvelteKit to effortless API endpoint creation and beyond, Vercel has provided us with the tools needed to build a fast, scalable, and dynamic web application.

Server-Side Rendering (SSR) with SvelteKit

Sometimes we need processing and API calls to be performed on the client/browser, other times it’s better to have this processing performed on a remote server.

When accessing sensitive parts of our database, or using services that require secret connection details, it’s best to be in control of these types of actions hidden within the confines of a server that we control. There are other scenarios, like performance & SEO, where SSR can be useful, but the main advantage for our scenario was security.

Vercel offers seamless support for SSR, especially when used with SvelteKit. This combination allowed us to a progressive web application that is fast, interactive & secure and SEO-friendly.

Easy API Endpoint Creation

With Vercel, creating and deploying serverless functions as API endpoints is straightforward. This feature enables developers to build a backend for their applications without managing servers, reducing development time and complexity. These serverless functions scale automatically with demand, ensuring that applications remain responsive under any load.

With Vercel, it really is just as easy as adding an ‘api’ folder to your project, and Vercel knows what you want to achieve.

Cost

Vercel offers a competitive pricing model with a generous free tier for developers and small projects. As projects grow, Vercel’s pricing scales based on usage, providing flexibility and cost-effectiveness for startups and large enterprises alike.

This model allows us to start small and scale our infrastructure as our needs evolve.

Integrations with GitHub

Vercel’s deep integration with GitHub streamlines the development workflow, enabling automatic deployments directly from GitHub repositories.

Each push to a branch or pull request triggers a deployment for us. Vercel then provides live URLs for previewing changes. This integration also supports our CI/CD workflow, making it easier to collaborate and review work before it goes live.

Ease of Use

Vercel is designed with simplicity in mind, offering an intuitive interface and straightforward deployment process.

Vercel simplifies the developer experience, allowing us to focus on building user value rather than managing infrastructure.

Logging

Vercel provides comprehensive logging capabilities, giving developers insight into their applications’ performance and usage. These logs are invaluable for debugging and optimizing applications, ensuring that any issues can be quickly identified and addressed.

CDN

Vercel’s global Content Delivery Network (CDN) ensures that our applications are delivered quickly to users worldwide. By caching content at edge locations, Vercel reduces load times, improving user experience and application performance.

Comparison with Similar Services

When comparing Vercel to similar hosting and platform-as-a-service (PaaS) providers, we evaluated several key areas:

Feature/Consideration Vercel Netlify AWS Amplify Firebase
SSR Support First-class for SvelteKit and others Good, with support for JAMstack Good, with SSR for React Limited, with workarounds for SSR
API Endpoint Creation Effortless with serverless functions Supported with serverless functions Integrated with AWS Lambda Integrated with Cloud Functions
Cost Free tier, scalable paid plans Free tier, scalable paid plans Free tier, pay-as-you-go pricing Free tier, pay-as-you-go pricing
GitHub Integration Deep integration, automatic deployments Deep integration, automatic deployments Limited compared to Vercel and Netlify Manual integration and deployments
Ease of Use Exceptionally user-friendly Very user-friendly Moderate, with a learning curve Moderate, with a learning curve
Logging Basic logging, detailed in paid plans Basic logging, detailed in paid plans Detailed logging with AWS tools Basic logging, more with Firebase extensions
CDN Global CDN, optimized for performance Global CDN, optimized for performance Global CDN, AWS infrastructure Global CDN, optimized for Firebase products

Vercel distinguishes itself with robust support for SSR, particularly with our chosen frontend framework (SvelteKit), and its seamless integration with GitHub.

With its commitment to ease of use, scalable costs, powerful features such as serverless API endpoint creation and a global CDN, Vercel was our top choice.

*this post is the 3rd post in a 4 part series

Part 1: Introduction
Part 2: Supabase
Part 3: Vercel
Part 4: Svelte