Remix Newsletter #32

React Router hits a major milestone with unstable React Server Component support, a brief look at a new route matching library, and a sneak peek at the Remix Jam setlist.

Let's dive in! 💿

React Router v7.6.3-v7.7.0

React Router v7.6.3-v7.7.0 brings exciting new RSC APIs, enhanced developer experience improvements, and important bug fixes.

New Features

Unstable RSC APIs: v7.7.0 introduces long-awaited (and currently unstable_) React Server Component APIs for use with RSC in Data Mode. These APIs allow you to integrate with RSC-compatible bundlers to leverage Server Components and Server Functions in your React Router applications.

This is a huge milestone and an incredible effort from the whole team. Learn more about what this means and how to get started with these new APIs below.

Read the "React Server Components" docs ↗

Performance Improvements & Bug Fixes

We've also made a lot of improvements to React Router's developer experience, and fixed a number of small bugs. Here's a brief overview of what we've improved:

• Add support for Vite 7
• Handle InvalidCharacterError when validating cookie signature
• Pass a copy of searchParams to the setSearchParams callback function to avoid mutations of the internal searchParams instance
• In Framework Mode, clear critical CSS in development after initial render
• Strip search parameters from patchRoutesOnNavigation path param for fetcher calls
• Skip scroll restoration on useRevalidator() calls because they're not new locations
• Support unencoded UTF-8 routes in prerender config with ssr set to false
• Do not throw if the url hash is not a valid URI component
• Remove Content-Length header from Single Fetch responses
• Fix a regression in createRoutesStub introduced with the middleware feature
• Properly handle https protocol in dev mode
• Fix missing styles when Vite's build.cssCodeSplit option is disabled
• Fix prerender file locations when cwd differs from project root
• Improve chunk error logging when a chunk cannot be found during the build
• Do not serialize types for useRouteLoaderData<typeof clientLoader>
• Improve react-router CLI support for Deno templates
• Cleanup old package exports and dependencies

Check out the changelog for more ↗

React Server Component Support

React Router now has experimental support for React Server Components (RSC) in Data Mode. This means you can set up your React Router application to take advantage of:

• Server Component Routes
• Server Side Rendering (SSR)
• Client Components (via "use client" directive)
• Server Functions (via "use server" directive)

React Router provides low-level APIs to hook into RSC-compatible bundlers. With RSC, much of what's required to implement React Router's Framework Mode is now provided by React itself. That means we're able to introduce a more powerful RSC-powered Data Mode that brings most of Framework Mode's features to our lower level library APIs.

Why Data Mode?

From the React Router Governance doc:

Features are added at the lowest mode possible (declarative -> data -> framework) and then leveraged by the higher-level modes. This ensures that the largest number of React Router applications can leverage them.

This is no less true with RSC support. By adding support in Data mode, we accomplish 2 things:

1. We provide an onramp to RSC (if wanted) for the millions of React Router applications that aren't on framework mode
2. We create a foundation to build RSC support in Framework mode

React provides a pretty sophisticated architecture for frameworks to build on with RSC. Adding RSC support, even if you have no interest in taking advantage of all the bells and whistles it comes with, allows us to simplify the internal complexity required to build React Router Framework mode.

Additionally, as has always been true of our work on Remix and React Router, we get to provide React Server Components in a "guts out" approach. We believe you should be able to see and control exactly what's going on with your RSC setup, and that's exactly what we're giving you with these APIs.

Let me see it!

Instead of putting a tutorial inside of a newsletter, we figure it's better to just encourage you to read through our RSC docs and/or spin up a template:

• Parcel Template
• Vite Template

Again, RSC support is still experimental and subject to breaking changes. We recommend sticking with current Framework Mode or Data/Declarative APIs for production applications. If you notice any bugs, or have any suggestions, please let us know!

Read "React Router and React Server Components: The Path Forward" ↗

Route Pattern

We're excited to share a sneak peek of our new RoutePattern API: a powerful, low-level API we've developed for advanced URL pattern matching. This package is currently on v0.3.0 and we have several further improvements we plan to make.

React Router's URL matching is simple, but quite limited. As we're working on Remix 3 and planning the future of React Router, we wanted to offer a more sophisticated URL matching system that can handle complex routing scenarios while remaining performant and intuitive.

Route Pattern is our solution, supporting all JavaScript runtimes with features like optional segments, glob matching, parameter constraints, and multi-segment parameters.

Explore route-pattern ↗

Remix Store

We launched the Remix Store earlier this Summer and folks have been loving the merch so far. If you haven't already, check out the store and grab yourself a piece of Remix swag. We plan to have more drops coming later this year, so consider this just a taste.

Shop the Remix Store ↗

Remix Jam Setlist

Remix Jam is shaping up to be a pretty awesome event. We can't wait to share what we've been cooking, as well as celebrate the impact Remix has had the last 5 years.

There's only a few tickets left, so if you're interested in coming, don't wait any longer. Here's a sneak peek of the setlist so you can get an idea of what to expect.

Can't wait to jam 🎸

Get your Remix Jam tickets ↗

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 get started.

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