# How can I prerender my application on Vercel?

**Author:** Lee Robinson

---

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](https://vercel.com/templates).

## 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.

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](https://nextjs.org/learn/seo/introduction-to-seo/webcrawlers), but ultimately end up decreasing the end-user performance and [Core Web Vitals](https://vercel.com/docs/concepts/analytics/web-vitals#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:

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](https://nextjs.org/learn/foundations/how-nextjs-works/cdns-and-edge) 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:

- [Next.js](https://vercel.com/templates?framework=next.js)
  
- [SvelteKit](https://vercel.com/templates?framework=svelte)
  
- [Nuxt](https://vercel.com/templates/nuxt/nuxtjs-boilerplate)
  

And more. [See all frameworks](https://vercel.com/templates) and get started building today.

---

[View full KB sitemap](/kb/sitemap.md)