https://vite-plugin-ssr.com
[vite-p]vite-plugin-ssr
[github][discord][twitter]
v0.4.40[changelog]
[compass] OverviewIntroductionVue TourReact Tour
Get StartedScaffold new appAdd to existing app
GuidesBasicsRoutingData FetchingPre-rendering (SSG)Access
pageContext anywhereMoreStatic Directory (public/)Hydration
MismatchLayoutsSPA, SSR, SSG, HTML-only.env FilesInternationalization
(i18n)File StructureCustom Exports/HooksPaths AliasesHTML Streaming
API RoutesClient-only ComponentsDynamic import()Error TrackingDebug
Build Your Own Framework
[road-fork] RoutingServer Routing VS Client RoutingFilesystem Routing
Route StringRoute FunctionActive LinksPage RedirectionBase URL
Catch-All RoutesRouting PrecedenceVue Router & React Router
DeployStatic hostsGitHub PagesCloudflare PagesNetlifyOther
ServerlessCloudflare WorkersVercelNetlify FunctionsAWS LambdaFirebase
OtherDockerOther
IntegrationData fetchingApollo (GraphQL)Vue QueryRelay (GraphQL)
Wildcard API (RPC)urql (GraphQL)gRPC (RPC)OtherData storeVuexRedux
PiniaPullStateOtherAuthenticationNextAuth.jsOtherCSS, styling, CSS
frameworksTailwind CSS / Windi CSSWindi CSSVuetifyCSS-in-JS
styled-componentsBoostrap (Vanilla JS)Sass / Less / StylusOtherUI
frameworksSveltePreactSolidAngularOtherOtherMarkdownHTTPShapiOther
[?] APICorepageContextGlobal configprerender config
includeAssetsImportedByServerdisableAutoFullBuildNode.js & browser
.page.js * export { Page } * export { onBeforeRender }Node.js
.page.server.js * export { Page } * export { onBeforeRender }
* export { passToClient } * export { render } * export { prerender }
* export { doNotPrerender }renderPage()escapeInjectprerender()
programmaticBrowser.page.client.js * export { Page } * export {
render } * export { clientRouting }navigate()Routing.page.route.js
_default.page.route.js * export { filesystemRoutingRoot } * export {
onBeforeRoute }Special pages_default.page.*_error.page.js
[close]
[vite]vite-plugin-ssr
[vite-plugi]
vite-plugin-ssr
Like Next.js/Nuxt but as do-one-thing-do-it-well Vite plugin.
Scaffold a new Vite + vite-plugin-ssr app
$ npm init vite-plugin-ssr
Explore how it's like to use vite-plugin-ssr
[vue]Vue Tour[react]React Tour
---------------------------------------------------------------------
Control
Use any UI framework (React, Vue, Svelte, Solid, ...) and any tool
you want (any frontend library, web technology, deploy environment,
Vite plugin, ...).
With vite-plugin-ssr, you integrate tools manually and keep
architectural control.
Learn more
[chevron]
With vite-plugin-ssr, you control how your pages are rendered:
// /pages/about.page.js
// Environment: Browser & Node.js
// vite-plugin-ssr uses Filesystem Routing: the file `/pages/about.page.js` matches the URL `/about`.
// `Page` can be anything you want -- typically a React/Vue/Svelte/... component.
export function Page() {
return <>
About
This is our first vite-plugin-ssr app.
}
// /renderer/_default.page.server.js
// Environment: Node.js
import { escapeInject, dangerouslySkipEscape } from 'vite-plugin-ssr'
// This can be any UI framework (React, Vue, Svelte, ...)
import { renderToHtml } from 'my-favorite-ui-framework'
// You control how `Page` is rendered to HTML
export async function render({ Page }) {
const pageHtml = await renderToHtml(Page)
const title = 'My first vite-plugin-ssr app'
return escapeInject`
{title}
${dangerouslySkipEscape(pageHtml)}
`
}
// /renderer/_default.page.client.js
// Environment: Browser
import { hydrateDom } from 'my-favorite-ui-framework'
// You control how `Page` is hydrated
export async function render({ Page }) {
await hydrateDom(Page)
}
This level control means you can use and integrate any tool you want.
Zero-config
vite-plugin-ssr gives you control only where it matters.
Everything else just works without the need to configure anything.
Simple
With vite-plugin-ssr you integrate tools manually; while it means
more work, it gives you a fundamentally simpler & more stable
foundation to build upon.
The clean cut between vite-plugin-ssr and your UI framework (React/
Vue/...) makes reasoning about your app easier.
Learn more
[chevron]
Less easy, but simpler
With vite-plugin-ssr you integrate tools yourself. This usually means
more work and it's less easy; getting started is often slower.
But the black box nature of frameworks like Next.js/Nuxt is limiting
and requires brittle workarounds. In the end, you waste time fighting
the framework.
In contrast, vite-plugin-ssr is transparent: it gets out of your way
and integrating tools is simply a matter of following the tool's
official installation guide.
In a nutshell: vite-plugin-ssr is less easy, but simpler.
Stable foundation
Frameworks need to constantly keep up with the ecosystem, whereas
do-one-thing-do-it-well tools can quickly stabilize.
Actually, vite-plugin-ssr is already stable: breaking changes are
only about improving the design of vite-plugin-ssr which means that
you can expect your integrations to keep working in the future.
Clean cut
There is no conflation between vite-plugin-ssr and your UI framework
(React/Vue/...). This makes reasoning about your app a lot easier.
Fun
Last but not least, manual integration is fun & insightful! (Whereas
fighting a framework is unnecessary & pesky.)
[mechanical] Full-fledged
Filesystem Routing, Data fetching, Pre-rendering, Layouts, HMR, i18n,
Link Prefetching, HTML Streaming.
Client Routing (fast page navigation) or Server Routing (simple
architecture).
All render modes: SSR, SPA, MPA, SSG, HTML-only. Each page can use a
different mode.
Learn more
[chevron]
Fast HMR
Blazing fast HMR powered by Vite [vite].
HMR stays fast as you scale thanks to Vite's novel lazy-transpiling
approach.
Routing
Pages are automatically routed:
FILESYSTEM URL
pages/index.page.js /
pages/about.page.js /about
pages/faq/index.page.js /faq
pages/movie/@id/index.page.js /movie/1, /movie/2, /movie/3, ...
You can also use so-called Route Strings and Route Functions.
// Route String
export default '/movie/@id'
// Route Function -- for full flexibility
export default pageContext => pageContext.urlPathname === '/admin' && pageContext.isAdmin
You can choose between:
* Client Routing for a faster page navigation. (DOM mutation upon
page navigation.)
* Server Routing for a simpler app architecture. (Full HTML reload
upon page navigation.)
Render Modes (SSR, SPA, SSG, HTML-only)
For each page, you can choose between:
* SSR: the page's HTML is rendered at request-time.
* SSG: the page's HTML is pre-rendered at build-time.
* SPA: the page is not rendered to HTML; it's only loaded &
rendered in the browser.
* HTML-only: the page is rendered only to HTML with zero/minimal
browser-side JavaScript.
For example, you can render an admin panel as an SPA while rendering
marketing pages only to HTML with zero browser-side JavaScript.
This very website, https://vite-plugin-ssr.com, is HTML-only and
loads only few KBs of JavaScript (which implements the few bits of
interactivity such as the collapsible LEARN MORE sections of this
page).
Deploy anywhere
Deploy anywhere (Vercel Serverless/Edge/ISR, Cloudflare Workers, AWS
EC2/Lambda, Firebase, Google Cloud, ...).
Pre-render your app and deploy it to any static host (Netlify, GitHub
Pages, Cloudflare Pages, ...).
Fits Cloudflare Workers's small worker size requirement like a glove.
Learn more
[chevron]
It's just a middleware
From the server-side point of view, vite-plugin-ssr is just a server
middleware.
import { renderPage } from 'vite-plugin-ssr'
// `app` can be any server framework such as Express.js/Fastify/Koa/Hapi/...
app.get('*', async (req, res) => {
// `renderPage()` can also be used in serverless environments such as
// Cloudflare Workers and Vercel
const { httpResponse } = await renderPage({ urlOriginal: req.url })
res.send(httpResponse.body)
})
Pre-rendering (aka SSG)
You can also pre-render your app to remove the need for a production
Node.js server and deploy to any static host (Cloudflare Pages,
GitHub Pages, Netlify, ...).
$ vite build
vite building for production...
42 modules transformed.
vite-plugin-ssr pre-rendering HTML...
3 HTML documents pre-rendered.
dist/client/index.html
dist/client/about/index.html
dist/client/404.html
Cloudflare Workers + vite-plugin-ssr =
Thanks to vite-plugin-ssr's lean architecture, your app is much less
limited by Cloudflare Workers's 1MB bundle size limit.
Rock-solid
The source code of vite-plugin-ssr has no known bug, every release is
assailed against a heavy suite of automated tests, and it's used in
production by many companies.
Scalable
DX that scales to hundreds of kLOCs: HMR & dev start that stays fast,
powered by Vite [vite].
Architectural flexibility that scales from small hobby projects to
large-scale enterprise projects.
Learn more
[chevron]
Lazy-transpiling
One of Vite's foundational novelty is lazy-transpiled development:
instead of transpiling your entire codebase before starting
developing, Vite transpiles only loaded code.
For example, if you define 100 pages and then open a page in the
browser, then only the code for that one page is transpiled while the
code for all other 99 pages is left untouched.
Thanks to lazy-transpiling, you can scale to a (very) large codebase
while keeping fast HMR & development start.
No black box
At scale, Next.js/Nuxt's black-box nature become painfully limiting.
In contrast, vite-plugin-ssr is transparent: you keep control over
both the server- and browser-side.
As you scale, you usually need increasingly custom SSR integrations;
vite-plugin-ssr's flexibility accommodates such needs.
Vite + SSR + Scale =
At (very) large scale, you can progressively replace vite-plugin-ssr
with Vite's native SSR API which is lower-level and highly flexible.
If you're Netflix and perfecting UX leads to a substantial revenue
increase, then vite-plugin-ssr and Vite's native SSR API are what you
are looking for.
Large production apps are using Vite for its speed.
Tweet 1398240747661533184
Tweet 1392901819135795202
Tweet 1409983946201370626
Tweet 1423324336845426691
[?] Fast
State-of-the-art performance with Code Splitting, Client Routing,
Link Prefetching, and Fast Cold Starts.
Lighthouse Score: 100%.
Learn more
[chevron]
Code Splitting
The browser-side of each page loads only the code it needs, while
sharing common chunks between pages for optimal cacheability. Powered
by Rollup [rollup].
Client Routing
Upon page navigation, instead of loading and rendering the next page
on both the server-side and browser-side, the next page is loaded &
rendered only on the browser-side.
Link Prefetching
You can preload links for instantaneous page navigation.
Fast Cold Starts
On the server-side, pages are as well lazy-loaded: adding pages
doesn't increase the cold start of your (serverless) deployment.
Fun
vite-plugin-ssr is simple, clear, and robust: no magic, no unexpected
behavior, no conflation, no bugs (known in vite-plugin-ssr's source
code).
With vite-plugin-ssr, you are under control; it's addictively fun.
[vike] Build Your Own Framework
Use vite-plugin-ssr to Build Your Own Framework. Hundreds of lines of
code are enough to build your own Next.js / Nuxt.
Build internal company frameworks to scale your teams, or enhance
your product with a bespoke framework to delight your users, or just
keep architectural control.
Craftsmanship
Crafted with attention to details and care for simplicity.
Upsteam contributions to Vite and others.
GitHub and Discord conversations are welcome.
[?] Cutting Edge
We regularly participate in RFCs and we are usually among the first
to support the latest techniques.
---------------------------------------------------------------------
Explore how it's like to use vite-plugin-ssr
[vue]Vue Tour[react]React Tour
---------------------------------------------------------------------
[heart] Sponsor
vite-plugin-ssr is free and open source, made possible by wonderful
sponsors.
[label][medalGold] Gold
Contra
[label][medalSilve] Silver
ccoli
[label][medalBronz] Bronze
My Favorite Quilt Store
[spacedawww]
[codthing]
[Junaidhkn]
[zgfdev]