Skip to content

Getting Started

@fastify/react is @fastify/vite's core renderer for React. It is accompanied by @fastify/react/plugin, a Vite plugin that complements the renderer package.

It implements all of the features specified in Core Renderers, including automated routing, universal data fetching and head management. It's meant to be a lightweight Fastify-flavored replacement to Next.js and other full blown SSR React frameworks. It is Fastify-first in the sense that your Fastify server is responsible for setting everything up via @fastify/vite.

Below is an overview of all individual documentation topics and the order in which it makes the most sense to read them.

  • Project Structure covers the structure of a @fastify/react project, configuration, special folders and others conventions employed.
  • Router Setup covers how route modules get registered as actual routes, both on the server and the client.
  • Route Modules covers what makes up route modules, what special exports they have and how they work.
  • Route Context covers the universal route context initialization module and the useRouteContext() hook, available to all route modules and route layouts.
  • Route Layouts covers route layout modules.
  • Rendering Modes covers all different route module rendering modes.

Runtime requirements

  • Node.js v22+.
  • We recommend PNPM as a package manager.

Support for other JavaScript environments with HTTP support based on the Fetch and Service Worker standards is coming when fastify-edge is finished.

Starter templates

Since @fastify/vite is not a framework but rather a Fastify plugin, it can't run your application on its own, you need to have your Fastify server, a Vite configuration file, and the basic file structure that make up your frontend.

react-base

The react-base starter template includes just about the minimum set of files to get your @fastify/react application going. It contains no embedded examples other than pages/index.jsx, and no additional dependencies.

Download

We recommend using giget to download straight from GitHub.

giget gh:fastify/fastify-vite/starters/react-base#dev your-app
giget gh:fastify/fastify-vite/starters/react-base#dev your-app

Dependencies

react-kitchensink

The react-kitchensink starter template includes all of react-base plus a sample context.js initialization file and same additional example routes under pages/.

Download

We recommend using giget to download straight from GitHub.

giget gh:fastify/fastify-vite/starters/react-kitchensink#dev your-app
giget gh:fastify/fastify-vite/starters/react-kitchensink#dev your-app

Dependencies

All dependencies from react-base.

Known limitations

  • It's currently impossible to run multiple Vite development servers, which means @fastify/vite can only be registered once. Vite's new Environment API was created to avoid this necessity.

  • @fastify/react currently has no support for producing a fully functional static bundle, that is, even when you use clientOnly, you'd need to be running the Fastify server integrated with the @fastify/vite renderer. SPA support is planned for the next major release, see the project roadmap.

  • There's not hot reload for the context.js file. This should be addressed in the next major release, see the project roadmap.

Released under the MIT License.