Remix Newsletter #29

Welcome to the 29th edition of the Remix Newsletter! This month brings performance improvements, bug fixes, and a security update to React Router. Additionally, we have enhancements to our documentation, lots of community resources for middleware, and several third-party packages to highlight including the new Rsbuild integration.

Let's dive in 💿

React Router v7.4.0, v7.4.1

We've shipped two releases since the last newsletter with bug fixes, improvements to our experimental features, and an important security fix:

Performance Improvements

• Deduplication of route.lazy function calls
• Better performance for future.unstable_middleware by optimizing route module blocking
• Fixed root loader data on initial load redirects in SPA mode
• Improved handling of ancestor pathless/index routes in lazy route discovery

Experimental Features

• Added support for route.unstable_lazyMiddleware for lazy loading of middleware logic
• Enhanced future.unstable_splitRouteModules to handle middleware exports
• Improved type safety for middleware functions
• Better integration with Vite environment API and other plugins

Security Updates

• Fixed a security vulnerability related to URL manipulation and cache pollution via Host and X-Forwarded-Host headers
• This security vulnerability only affects sites using @react-router/express or @remix-run/express

Check out the full React Router changelog ↗

Remix v2.16.1 - v2.16.4

We've also shipped a few patch updates to Remix:

• Fix shouldRevalidate behavior for clientLoader-only routes in ssr:true apps
• Better support for lazy route discovery and ancestor pathless/index routes
• Fixed various Vite-related issues including import analysis and file system watching
• Resolved conflicts with multiple copies of @remix-run/dev in routes.ts
• Fixed a security vulnerability related to URL manipulation and cache pollution via Host and X-Forwarded-Host headers (see above)

Check out the full Remix changelog ↗

Documentation Improvements

We've made several improvements to our documentation recently. The new "Picking a Mode" guide helps clarify the different ways you can use React Router depending on your project's needs:

• Declarative Mode: Provides basic routing features like URL matching and navigation. Perfect if you're coming from v6 or have your own data layer.
• Data Mode: Incorporates "data" features such as loaders, actions, and pending states while maintaining control over bundling and server abstractions. A good choice for more advanced apps that have special bundling requirements.
• Framework Mode: Wraps up "data" features with the React Router vite plugin to provide additional features such as type-safe href, intelligent code splitting, and support for SPA, SSR, and static rendering strategies. This is the successor to Remix v2 and the recommended starting point for modern React apps.

We've also expanded our getting started guides, brought back comprehensive API documentation, and added a new mode indicator that shows which features are available in Framework, Data, and Declarative mode. Look for the icons above throughout the docs to glean which APIs are available in each mode.

Learn more about picking your router mode ↗

React Router + Rsbuild

The Rspack team has released rsbuild-plugin-react-router, bringing Framework Mode to the Rspack ecosystem. This plugin is particularly exciting for webpack users because Rspack is designed as a drop-in replacement for webpack, offering the same familiar API but with dramatically improved build performance thanks to its Rust-based implementation.

The plugin provides seamless integration of React Router in Rsbuild, including type-safe routing, automatic code splitting, and support for all rendering strategies (SPA, SSR, and static). A unique value-add of the Rsbuild plugin is the experimental support for module federation.

Check out rsbuild-plugin-react-router ↗

The Community takes on Middleware

Since our release of experimental middleware support, the community has been hard at work creating resources to help you understand and use middleware in your React Router projects. Before we go on, here's your obligatory reminder that middleware is still an experimental feature and we do not recommend using it in production unless you like finding bugs for us and dealing with potential API changes in patch releases.

Alright, with the throat clearing out of the way, let's dive into the resources the community has created.

remix-utils now includes several middleware functions that make it easy to add authentication to your routes. The package includes middleware for session management, logging, basic auth, and more.

Check out remix-utils middleware ↗

Additionally, Sergio (the creator of remix-utils) has written two helpful tutorials on using middleware in React Router:

Read "Use middleware in React Router" ↗

Read "Test Middleware in React Router" ↗

And if you prefer learning via video, Alem Tuzlak has created an engaging walkthrough of the new middleware features, complete with real-world examples and practical tips:

Watch "React Router middleware is HERE!" ↗

Type-safe Search Params with nuqs

Want fully type-safe links including search params in your React Router app? Check out this video by the creator of nuqs showing how to combine React Router's href utility with nuqs to get type safety for both pathnames and search params.

Watch "Type-safe Search Params with React Router and nuqs" ↗

Resource to Share: "Remix vs React Router Framework"

Need to explain React Router Framework Mode to your team or manager? Brad Westfall from React Training has written the perfect article just for you. It breaks down the history and differences between Remix and React Router in a straightforward and approachable way. Bookmark this one for the next time someone asks you "so what's going on with Remix and React Router?" It still won't answer the question "why'd they drop the Remix brand?", but maybe we'll address that next month.

Read "Remix vs React Router Framework" ↗

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 ↗

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