Remix
Open menu

Remix Newsletter #21

The Remix team is hard at work prepping the release of React Router v7. But that hasn't stopped us from shipping bug fixes, general improvements, and a shiny new API: Fog of War. We also have a few community projects we'd like to highlight.

Let's dive in 💿

Remix v2.10.0, v2.10.1, & v2.10.2

The big release this month is Fog of War (i.e., Lazy Route Discovery), which you can learn more about below. Remix v2.10.0–2 also includes 13 patches that:

  • Upgrade dependencies
  • Make several improvements to Single Fetch
  • Fix hydration bugs with HydrateFallback and Layout/ErrorBoundary
  • Improve Fog of War

We also made a number of improvements to React Router that support Fog of War and prepare for the React Router v7 release.

Read the full Changelog ↗

Fog of War

Three connected red dots hovering over a field of hexes. Underneath the red dots, the hexes are a light gray. To the left and right are unconnected black dots over black hexes, expanding infinitely in each direction

Fog of War is a new, unstable API you can opt into to improve the initial loading experience of your Remix application. This behavior will be the default experience in React Router v7.

Currently, Remix loads the complete route manifest in a JS file on initial load. When you enable "Fog of War," Remix will no longer send a full route manifest on initial load. Instead, your SSR render will only include the SSR routes in the initial manifest, and additional routes will be loaded as the user navigates around the application. Over time, the manifest grows to include the portions of the app the user navigated to.

You can try out Fog of War by turning on unstable_fogOfWar in your Vite config.

Read the Fog of War blog post ↗

Featured Resource: Remix Auth

sergiodxa/remix-auth GitHub project: Simple Authentication for Remix

Prolific Remix contributor, Sergio Xalambrí, is the author and maintainer of Remix Auth, the most popular authentication library in the Remix ecosystem.

Remix Auth is an open-source authentication solution for Remix.run applications. It is heavily inspired by Passport.js but completely rewritten from scratch to work on top of the Web Fetch API. Remix Auth can be dropped into any Remix-based application with minimal setup.

As with Passport.js, it uses the strategy pattern to support different authentication flows. Each strategy is published individually as a separate npm package.

Remix Auth offers:

  • Full Server-Side Authentication
  • Complete TypeScript Support
  • Strategy-based Authentication
  • Easy success and failure handling
  • Custom auth strategies
  • Persistent sessions

Get started with Remix Auth today ↗

Module Federation with React Router and Fog of War

Longtime Remix community member, Shane Walker, has been particularly excited about the new Fog of War API. Specifically, he saw some potential in the API beyond shrinking the route manifest.

With a little help from the Remix team, Shane was able to put together a demo showing how 2 different applications can be connected via module federation using React Router's new unstable_patchRoutesOnMiss API for lazy route patching.

Check out the React Router Module Federation Demo ↗

Fresh Code

Not afraid of the bleeding edge? Eager to stay up-to-date on the latest and greatest? These PRs might be of interest to you:

Join us Aug 6th for our next Roadmap Planning livestream ↗

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? Reach out to Brooks (our Developer Relations Manager) 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 ↗

Thanks for making it this far! We'll be in your inbox again next month. In the meantime, you can join the conversation on the Remix Discord 💿

- The Remix Team