--- title: How can I prerender my application on Vercel? description: Learn how to enable prerendering with your frontend framework on Vercel for better performance and SEO. url: /kb/guide/how-can-i-prerender-my-application-on-vercel canonical_url: "https://vercel.com/kb/guide/how-can-i-prerender-my-application-on-vercel" published: 2025-11-03 last_updated: 2026-02-03 authors: Lee Robinson related: - /docs/concepts/analytics/web-vitals install_vercel_plugin: npx plugins add vercel/vercel-plugin --- ## Related pages > **For AI agents:** Follow these links to understand how this page connects to the rest of the Vercel ecosystem. For the full cross-link map (inbound, outbound, prerequisites, and semantic neighbors), see the .graph.md link below. - [Partial prerendering: Building towards a new default rendering model for web applications](https://vercel.com/blog/partial-prerendering-with-next-js-creating-a-new-default-rendering-model?from=related&source_path=%2Fkb%2Fguide%2Fhow-can-i-prerender-my-application-on-vercel&source_site=vercel-kb&relationship=related) - [Getting started with Partial Prerendering](https://vercel.com/docs/partial-prerendering/quickstart?from=related&source_path=%2Fkb%2Fguide%2Fhow-can-i-prerender-my-application-on-vercel&source_site=vercel-kb&relationship=related) — Set up Partial Prerendering \\(PPR\\) in a Next.js App Router project: enable Cache Components, cache a static shell, and - [Partial Prerendering \\(PPR\\)](https://vercel.com/docs/partial-prerendering?from=related&source_path=%2Fkb%2Fguide%2Fhow-can-i-prerender-my-application-on-vercel&source_site=vercel-kb&relationship=related) — Partial Prerendering serves a cached static shell instantly, then renders and streams the dynamic parts of a page per re - [Introducing Serverless Pre-Rendering (SPR)](https://vercel.com/blog/serverless-pre-rendering?from=related&source_path=%2Fkb%2Fguide%2Fhow-can-i-prerender-my-application-on-vercel&source_site=vercel-kb&relationship=related) - [Build your own web framework](https://vercel.com/blog/build-your-own-web-framework?from=related&source_path=%2Fkb%2Fguide%2Fhow-can-i-prerender-my-application-on-vercel&source_site=vercel-kb&relationship=related) - [Supported Frameworks on Vercel](https://vercel.com/docs/frameworks/more-frameworks?from=related&source_path=%2Fkb%2Fguide%2Fhow-can-i-prerender-my-application-on-vercel&source_site=vercel-kb&relationship=related) — Learn about the frameworks that can be deployed to Vercel. - [Frameworks on Vercel](https://vercel.com/docs/frameworks?from=related&source_path=%2Fkb%2Fguide%2Fhow-can-i-prerender-my-application-on-vercel&source_site=vercel-kb&relationship=related) — Vercel supports a wide range of the most popular frameworks, optimizing how your application builds and runs no matter w - [Nuxt on Vercel](https://vercel.com/docs/frameworks/full-stack/nuxt?from=related&source_path=%2Fkb%2Fguide%2Fhow-can-i-prerender-my-application-on-vercel&source_site=vercel-kb&relationship=related) — Deploy Nuxt applications to Vercel and configure rendering, functions, middleware, routing, image optimization, and cach - [How to choose the best rendering strategy for your app](https://vercel.com/blog/how-to-choose-the-best-rendering-strategy-for-your-app?from=related&source_path=%2Fkb%2Fguide%2Fhow-can-i-prerender-my-application-on-vercel&source_site=vercel-kb&relationship=related) - [How to Deploy a Preact Site with Vercel](https://vercel.com/kb/guide/deploying-preact-with-vercel?from=related&source_path=%2Fkb%2Fguide%2Fhow-can-i-prerender-my-application-on-vercel&source_site=vercel-kb&relationship=related) — Create your Preact app and deploy it with Vercel. - [Does Vercel support Ruby on Rails applications?](https://vercel.com/kb/guide/does-vercel-support-ruby-on-rails-applications?from=related&source_path=%2Fkb%2Fguide%2Fhow-can-i-prerender-my-application-on-vercel&source_site=vercel-kb&relationship=related) — Learn how you can use Ruby on Rails with your frontend on Vercel. - [Vercel Integration Guide for SAP Composable Storefront](https://vercel.com/kb/guide/integration-guide-for-sap-composable-storefront?from=related&source_path=%2Fkb%2Fguide%2Fhow-can-i-prerender-my-application-on-vercel&source_site=vercel-kb&relationship=related) — Integrate Vercel and SAP Composable Storefront with advanced rendering methods by leveraging the Vercel Build Output API Full cross-link map for this page: [/kb/guide/how-can-i-prerender-my-application-on-vercel.graph.md](/kb/guide/how-can-i-prerender-my-application-on-vercel.graph.md?from=related&source_path=%2Fkb%2Fguide%2Fhow-can-i-prerender-my-application-on-vercel&source_site=vercel-kb&relationship=graph) 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.