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

Dependencies

• fastify as the Node.js server.

• vite for the client application bundling.

• @fastify/vite for Vite integration in Fastify.

  • And its peer dependencies:
    • devalue
    • history
    • minipass
    • react
    • react-dom
    • react-router
    • @unhead/react
    • valtio

• @fastify/react for the React application shell.

• @vitejs/plugin-react for React support in Vite.

• @fastify/one-line-logger for better logging in development.

• tailwind and postcss-nestingfor Tailwind and CSS Nesting support.

• postcss-preset-env for access to all latest CSS features.

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

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.

• There's not hot reload for the context.js file.