Remix Newsletter #33

React Router v7.8.0 is out, people are playing with React Server Components in React Router, the remix-run/remix repository is starting to show some life, and we've got a new Remix Store Bundle you can purchase.

Let’s dive in! 💿

React Router v7.7.1-v7.8.0

React Router v7.7.1-v7.8.0 improves API consistency, moves middleware closer to stabilization, and brings bug fixes and performance improvements.

New Features

Consistent loaderData naming: We've addressed those annoying discrepancies in loader data values across the framework. Previously, in your components we referred to the data from the loader as loaderData, but in matches we referred to it as match.data. We've added new loaderData fields alongside existing data fields to align with the loaderData naming used in the new Route.* APIs. The old data fields are marked as deprecated and will be removed in the next major version.

Middleware API improvements: The biggest set of changes are focused on the unstable_middleware APIs as we move closer to stabilizing them. If you've adopted middleware for early testing, check the changelog for detailed changes (some of which are breaking) as we refine the developer experience.

Other Improvements & Bug Fixes

We've made significant improvements to the developer experience and fixed several important bugs:

• Add nonce prop support to Links & PrefetchPageLinks
• Switch Lazy Route Discovery to use standalone URLSearchParams to avoid Chrome performance bottlenecks
• Fix RSC compilation errors with React 18 and Webpack
• Improve UIMatch types to properly handle undefined data in error boundaries
• Various RSC Data Mode fixes for route revalidation and error handling

Check out the full React Router changelog ↗

React Server Components in Action

Our unstable React Server Component support has been out for about a month now, and we're enjoying seeing the community experiment with it and provide feedback. Our own team is also building with it in order to stress test and improve the developer experience.

Here's a demo and a community article focused on React Server Components in React Router.

RSC Dashboard SaaS Template

Remix team member Jacob Ebey has created a comprehensive dashboard SaaS template demonstrating RSC in production-ready scenarios, complete with a database, session-based signup & login, server components, server actions, middleware, data batching and caching, and a ton more.

This little demo is chock full of features and a great example of how you can build a production-ready application with React Server Components.

Play with the live demo ↗

Explore the dashboard SaaS template repo ↗

RSC Community Article

Raphaël shares his initial journey with React Server Components in React Router v7. He walks through his first impressions, migration experience, and overall thoughts. This is a helpful perspective for people already familiar with React Router and wanting to play around with our RSC support. In Raphaël's own words:

If you’re feeling adventurous, definitely give it a spin locally! Just expect stuff to break :)

Read "React Server Components in React Router – First Impressions" ↗

Remix 3 Development

Remix 3 has been in development long before we announced our plans back in May. It started primarily as a series of small, single-purpose packages built on web standards under Michael Jackson's remix-the-web repository.

We have continued to develop these packages and are happy to share that they have now found their home on the remix-run/remix repository in the v3 branch. From the README:

These packages should be useful for anyone who is building for the web. If you're using Remix, we've designed it from the start to work with web standards. If you're using some other framework, you should easily be able to integrate these tools into your workflow as well without going full-blown Remix. If you're building your own framework, we hope you'll be able to build on this foundation as well.

Currently we have published the following packages:

• @remix-run/fetch-proxy - HTTP proxies with the familiar fetch() API
• @remix-run/file-storage - Key/value storage for JavaScript File objects
• @remix-run/form-data-parser - Enhanced request.formData() with streaming uploads
• @remix-run/headers - Comprehensive HTTP header management toolkit
• @remix-run/lazy-file - Lazy-loaded, streaming Blobs and Files
• @remix-run/multipart-parser - High-performance streaming multipart parser
• @remix-run/node-fetch-server - Node.js HTTP servers using web-standard fetch()
• @remix-run/tar-parser - Fast, streaming tar archive parser

Read the Remix 3 README ↗

Remix Store Bundles

We're offering our first bundle on the Remix Store, and it comes with all the tools you need for your next great idea.

At $30 $24, this bundle comes with:

• The Remix highlighter
• The Remix pen
• The Remix notebook
• Remix Engineering sticker pack 01

Buy the Remix Home & Office Bundle ↗

Remix Jam

Remix Jam is less than 2 months away! Only a few tickets remain, so be sure to get yours today and join us in Toronto on October 10th.

If you're not able to make it, don't worry! We will have a livestream available during the event. Can't wait to show you what we've been cooking up with Remix 3 💽

Get your Remix Jam ticket ↗

P.S. If you're attending Remix Jam, don't forget to update your ticket with your t-shirt size! Need help? Just reply to this email for instructions.

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