@fastify/react@1.0.0
This release accompanies @fastify/vite@8+, which it relies upon.
Most features in this release have Developer Experience in mind.
Tip
If you're new to @fastify/react
Make sure to check out Matteo Collina's excellent write-up.
This is not a metaframework, but it might very well be mistaken as one.
The reason it can't really be considered a metaframework is because it relies purely on Fastify, Vite and @fastify/vite. Everything uses @fastify/vite hooks and the application shell is completely transparent and ejectable.
RSC support status
We have an actively developed experimental version supporting RSC, but currently it uses react-server-dom-webpack and has too many bugs and general quirkness, so I've decided to refactor it to use the new experimental react-server-dom-vite.
RSC support is likely coming in the next release, we're close!
New $app/ smart import prefix
Warning
BREAKING CHANGE
Previously, @fastify/react used /: as the prefix for its smart imports (virtual modules). This releases adopts the $app/ prefix adhering to the convention used by SvelteKit. With that, /: is effectively deprecated in the name of consistency.
Pregenerated preload tags for every route
@fastify/react will now generate one individual SSR HTML template for each route module, containing pregenerated preload tags for assets loaded within the route module.
This was inspired on the work of Jarle Friestad in vite-plugin-preload. Thanks Jarle!
Conditional client and server imports
No more client/index.js!
This has been in my wishlist for a long time. The Vite project root is no longer required to have the index.js file (the clientModule), which has joined the list of available virtual modules (or smart imports as @fastify/react calls them). In the vite build call to build the server bundle, just pass $app/index.js as the entry point now.
If you're using your client module file to provide additional properties to the server, you can still keep it in your Vite project folder and it will be used. Take note however that its default definition has been updated to:
import { createRoutes } from '@fastify/react/server'
export default {
routes: createRoutes(import('$app/routes.js')),
create: import('$app/create.jsx'),
context: import('$app/context.js'),
}The new $app/routes.js smart import is now simply the import.meta.glob() call for collecting route modules:
export default import.meta.glob('/pages/**/*.{jsx,tsx}')If you want to a different source directory for your route modules, just provide your own routes.js file. Note that this also eliminates the routing options that were previously available in @fastify/vue's Vite plugin.
New @fastify/react/server module
Previously, the core createRoutes() function was defined in the $app/routes.js smart import. Due to its significance in the setup, it is no longer encouraged to directly modify this function — unless you're contributing to the project of course! The @fastify/react/server now contains the createRoutes() function, used directly from the $app/index.js smart import as seen above.
New @fastify/react/client module
Previously, the core useRouteContext() hook was made available via the $app/core.jsx virtual module. Since it contains fundamental pieces of the setup, the $app/core.jsx smart import will be deprecated in future releases and move completely to @fastify/react/client at the library level.
The @fastify/react/client module also provides hydrateRoutes() to $app/create.jsx.
These are used internally by the $app/create.js and $app/mount.js virtual modules, respectively.
Trying it out
Use the react-base or react-kitchensink starters as recommended by the documentation.
Miscellaneous
Many thanks to my employer Feature.fm for supporting my work on this project.