*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
