Static websites are fast. When you deploy static frontends to Vercel, we automatically serve them from every edge of our global Smart CDN network.
But static websites are also... static. Static site generators create all your pages during the build process — all of them, all at once. Ever had to quickly fix a typo in a page, only to wait minutes or hours for your change to go live?
Today, we are introducing Serverless Pre-Rendering, an industry-defining feature of our Smart CDN network that allows you to get the best of both worlds: the speed and reliability of static, and the versatility of dynamic data rendering.
Let's start with a demo. You’ve built a landing page. You used React, Next.js, CSS-in-JS (or your favorite modern frontend stack). All of which you pushed to GitHub or GitLab for it to be automatically deployed.
We don’t want to wait, so for this demo we wanted to edit the data in real-time. For the task, we picked our favorite document editing tool, Notion, and queried its API from Next.js.
In this video, you can see that we make edits to the Notion page, and it makes updates to the site instantly.
Towards the end of the video, we measure the performance of this dynamic page. The response is instant, from our CDN edge. Using Serverless Pre-rendering, you can provide an instant experience even with dynamic content.
How does that work?
When an end-user accesses your website, we always serve a static version.
A Serverless Function computes a new copy querying dynamic APIs in the background.
No matter how much traffic you are serving, only one background invocation is made at an interval you decide.
What this means for you:
No more hard decisions between static and dynamic. SPR marries both paradigms.
If your backend is slow, your responses are still always fast.
Your backend functions and datasources can go down, and you will likely tolerate their downtime.
Traffic to your backend is minimized, which results in massive cost reductions.
As we’ll see next, the best part is that this integrates easily into your existing codebase, and takes advantage of a HTTP standard proposal.