Remix
Open menu

Remix Newsletter #28

Welcome to the 28th edition of the Remix Newsletter. We have a ton of updates to share this month, so let's dive in 💿

React Router v7.2.0, v7.3.0

We've added several new features to React Router to continue improving type safety and Single Page Applications (SPAs):

  • Type-safe href utility: Get full type-safety for your links with path auto-completion and param validation (more on this below)
  • Enhanced pre-rendering with SPA fallback: Better support for combining pre-rendered paths with SPA mode
  • Root loaders in SPA mode: You can now use a loader in the root route when using SPA mode (ssr: false)

Additionally, we've introduced a number of unstable features for you to try out. As always, please open an issue if you run into any problems:

  • Middleware support: Experimental support for route middleware (more on this below)
  • Client-side context: Added context support to client-side data routers
  • Split route modules: Experimental support for splitting route modules in framework mode (more on this below)
  • Vite Environment API: Added experimental support for Vite Environment API
  • Serialization brand types: Added unstable_SerializesTo brand type for library authors like the folks working on Apollo GraphQL

We've also made a few (ok, like 30) patch improvements. Here are a few highlights:

  • Better handling of manifest-skew after new deploys
  • Better handling of revalidations across pre-render/SPA boundaries
  • Improved prefetch performance for CSS side effects
  • Better alignment of dev server behavior with static file server behavior
  • Fixed single fetch requests when using a basename
  • Improved support for custom build configurations
  • Better HTTPS support in the dev server
  • Improved integration touch points for platform adapters/presets like Vercel and Cloudflare

This is just the surface, and we have a whole lot more we're working on.

Checkout the full React Router changelog ↗

Remix v2.16.0

We also shipped an update to Remix with some important improvements:

  • Vite v6 support: Remix now officially supports Vite v6
  • Better manifest version handling: When using Lazy Route Discovery, Remix will now detect manifest version mismatches after a new deploy and trigger a document reload
  • Improved SPA mode: Fixed revalidation optimizations in SPA mode

Checkout the full Remix changelog ↗

Split Route Modules

Split Route Modules by Mark Dalgleish, Staff Developer. Background is an atom seemingly made out of liquid with droplets floating out into space

React Router v7.2.0 introduced Split Route Modules as an experimental feature.

In framework mode, route modules contain all exports for a route in a single file. React Router will automatically split your server exports (loader, action, etc.) from your client exports (clientLoader, clientAction, HydrateFallback, etc.) into separate chunks. However, all of your client exports are still bundled into the same module, which means that when navigating to a route, the browser has to download and parse the entire module (including the component) before it can start running the clientLoader.

With the flip of a flag, Split Route Modules improves this loading experience by having the React Router Vite plugin automatically split your route module client exports into separate chunks during the production build. This allows the browser to download and execute your clientLoader independently from your component, potentially improving performance for routes with client data fetching.

The feature is available behind the future.unstable_splitRouteModules flag:

Code showing how to enable Split Route Modules in React Router. The code displays a react-router.config.ts file with a configuration object that sets the 'unstable_splitRouteModules' flag to true.

Read "Split Route Modules" ↗

Better type safety with href

The type-safe href utility is the latest feature in providing a delightful type-safe experience when working with React Router. href helps you discover all the valid paths and params you can navigate to, and will surface type errors if you ever change your route configuration and break your links:

Code showing how to use the href utility in a React Router application. The code displays a React component that uses the href utility to create a link to a product with the ID "remix-crewneck". The link is passed to the Link component as the to prop.

Experimental Middleware Support

React Router v7.3.0 introduces experimental middleware support behind the future.unstable_middleware flag. Middleware allows you to run logic before and after your route handlers, making it perfect for cross-route concerns like logging, authentication, redirects, and more.

To enable middleware, update your react-router-config.ts file:

Code showing how to enable middleware in a React Router application. The code displays a react-router.config.ts file with a configuration object that sets the 'unstable_middleware' flag to true.

Once enabled, you can define middleware functions that run sequentially before and after your route handlers:

Code showing middleware functions serverLogger and authMiddleware in the unstable_middleware array, and clientLogger in the unstable_clientMiddleware array

Here's a simple example of an authentication middleware function:

Code example showing authentication middleware that creates a user context, extracts a user from the session, and makes it available to loaders via context

Middleware comes with a better, more type-safe context system that works on both the server and client. Additionally, middleware and context are available in both framework mode and library mode.

Checkout the release notes for more details ↗

Featured Community Resources

We want to highlight a few blog posts and videos from the community we think you'll find helpful. If you have any resources you'd like to share, please do so on the #showcase channel in the Remix Discord.

Debouncing in React Router v7

David Adams shares a clever technique for debouncing requests in React Router v7 using clientLoader. Instead of using complex state management with useEffect and multiple hooks, you can leverage an AbortSignal inside of a clientLoader to create a clean debouncing solution that prevents unnecessary server requests during rapid user interactions like typing in a search field.

Read "Debouncing in React Router v7" ↗

Throwing vs. Returning Redirects in React Router

Sergio Xalambrí explains the key differences between throwing and returning redirects in React Router. While both approaches achieve the same result in most cases, throwing a redirect stops execution at all levels, making it particularly useful for authentication helpers and other reusable functions. The article also covers how to properly handle redirects inside try/catch blocks.

Read "Throwing vs. Returning Redirects in React Router" ↗

href and unstable_splitRouteModules Videos

Alem Tuzlak has uploaded a few new videos walking through many of the new and experimental features that have been making it into React Router. The most recent two videos highlight the new href utility, and unstable_splitRouteModules (in case you still aren't sure what it is 😉). If you prefer video explainers, Alem's channel is a great resource to subscribe to.

Connect at a Remix Meetup

Remix Meetups are run voluntarily by members of the community all around the globe with in-person and online options. These meetups feature local speakers, hackathons, workshops, and more!

Find a meetup near you ↗

Remix Meetups all around the world

No meetups near you? Reply to this email if you are interested in starting your own meetup. We've even created some guides to help you successfully start a Remix Meetup.

Starting a New Remix Meetup ↗

If you enjoy getting this email, please let us know! We'd love to hear from you, what you like about Remix and these updates, and any suggestions you have to improve them.

- The Remix Team