TIP

You're seeing the new documentation suite for fastify-vite 2.3.0.

This is a work in progress. Please report issues on GitHub.

Fastify plugin for Vite integration
Build and run SSR client applications

A minimal and fast alternative to full blown mega SSR frameworks like Nuxt.js and Next.js.

  • Currently supports Vue 3 and React 17 — using the same modular renderer API.
  • Automatically registers individual Fastify routes for your client application routes.
  • Provides generic utilities for client hydration and isomorphic data fetching.
  • No magic app folder (.nuxt, .next), just start with the right boilerplate flavor.

Get started with Vue or React.

New to SSR?

In the literal sense, pretty much any web application can be said to be server-side rendered (SSR). The term was popularized following the birth of React and Vue and their support for creating JavaScript applications that can be prerendered on the server via Node.js prior to being delivered to the browser. This very nicely covered in this Google Developers article by Jason Miller and Addy Osmani.

In addition to being benefitial for SEO, this technique makes the client UI to render more quickly into view because the prerendered markup doesn't have to be recreated, just hydrated.

New to Fastify?

If you're just getting started with Fastify itself, check out Pawel Grzybek's From Express to Fastify in Node.js and Simon Plenderleith's How To Migrate Your App from Express to Fastify.

I'd also suggest spending some time getting familiarized with its notion of plugins, hooks, encapsulation and lifecycle, to understand what the fuss is all about and why you should care about going with Fastify for your next Node.js apps.

TIP

Matteo Colina's and Simon Plenderleith's video introductions are great if you need a little guidance.

There's also this article on VueJSDevelopers covering one of the first versions of fastify-vite — it tries to tell a longer story about how this plugin got started.

New to Vite?

Vite is a build tool with an integrated development server. It is based on Rollup and leverages ESM support in browsers to enable nearly instant Hot Module Replacement, or as it is popularly known, hot reload. Evan You's Vue Mastery course is possibly the best option if you need more guidance, but its documentation is generally straightforward and Vite itself is rather intuitive to get started with.

Also check out Evan You's Vite 2.0 announcement for more background.

Sponsors

See also acknowledgements.