How can I prerender my application on Vercel?

Prerendering is the process of generating HTML for each page in advance on the server, instead of having it all done by client-side JavaScript. Pre-rendering can result in better performance and SEO. Vercel supports prerendering using a variety of frontend frameworks.

What is Prerendering?

In a client-side web application, the browser receives an empty HTML shell from the server along with the JavaScript instructions to construct the UI. This is called client-side rendering because the initial rendering work happens on the user's device.

An example of a client-side rendered application.

In practice, this means that for a fully client-side rendered app, the user will see a blank page while the rendering work is being done.

There are services that add prerendering to client-side rendered applications through caching for web crawlers, but ultimately end up decreasing the end-user performance and Core Web Vitals. We recommend using a frontend framework that has prerendering built-in.

For example, comparing client-side rendering to a prerendered app, the user will see the constructed HTML immediately:

An example of a prerendered application.

Prerendering generates HTML for each page in advance, instead of having it all done by client-side JavaScript. Pre-rendering can result in better performance and SEO.

Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive. (This process is called hydration.)

Using Prerendering on Vercel

Vercel supports multiple frontend frameworks that enable pre-rendering, either through Static Site Generation (SSG) or Server-Side Rendering (SSR).

Static Site Generation

With Static Site Generation, the HTML is generated on the server, but unlike server-side rendering, there is no server at runtime. Instead, content is generated once, at build time, when the application is deployed, and the HTML is stored in a CDN and re-used for each request.

Server-Side Rendering

With server-side rendering, the HTML of the page is generated on a server for each request. The generated HTML, JSON data, and JavaScript instructions to make the page interactive are then sent to the client.

Popular Frameworks

Start using prerendered pages on Vercel today with these frontend frameworks: