Hello Remix fans, and welcome to newsletter #19!
We have a new feature hot off the release cycle, as well as a guest blog post, a case study, a new video about SPA mode, and this month's featured Remix Resource. Let's get started!
Remix v2.9
- Single Fetch (Unstable): This fetching strategy simplifies document and data requests by making them consistent in Remix. You can enabled it by setting
future.unstable_singleFetch to true in your config. Keep reading to learn what turning on Single Fetch enables.
- Undici: We are deprecating our Web Fetch polyfill and switching to
undici, the fetch implementation used by node internally. This will better prepare Remix apps to more smoothly drop the polyfill and use the built-in Node.js API in node 20+. If you're using installGlobals(), update it to installGlobals({ nativeFetch: true }) to switch.
- unstable_dataStrategy: Introduced in React Router v6.23.0, this is a lower-level API we added to enable Single Fetch. This API is for advanced use-cases and overrides how Remix handles
loader/action execution. You can read more about unstable_dataStrategy below.
Checkout the full Release Notes ↗
Single Fetch
When you enable Single Fetch, Remix will make a single HTTP call to your server on client-side transitions, instead of multiple HTTP calls in parallel (one per loader). This aligns document and data requests which makes client side routing simpler and more similar to how full page navigation works in a traditional MPA.
Another big benefit of Single Fetch is that you can return more complex data types from your loaders/actions without it being serialized. The following data types can now be used: BigInt, Date, Error, Map, Promise, RegExp, Set, Symbol, and URL.
This new fetching strategy is opt-in and will be the default in the next version of Remix. It is also marked unstable while we continue gathering feedback from the community to make sure we address any issues that may come up and ensure that the adoption path is as smooth as possible.
Read the Single Fetch docs ↗
unstable_dataStrategy
This is a low-level API introduced in React Router v6.23.0 and intended for advanced use-cases. This overrides Remix's internal handling of loader/action execution, and if done incorrectly will break your app code. unstable_dataStrategy is the underlying mechanism behind Single Fetch, but it can also be leveraged for use cases such as logging and middleware.
For most developers using Remix/React Router you won't ever need to touch this API, but for some this new low-level API may unlock some new ideas and use cases that were previously untenable. As with Single Fetch, this API is marked unstable, so please share any feedback you have with us.
Read the unstable_dataStrategy docs ↗
Internationalization with Remix
Arisa Fukuzaki, Senior DevRel Engineer at Storyblok, wrote a guest article on the Remix blog. In this post Arisa teaches you various strategies for implementing internationalization (i18n) in your Remix project. Discover the significance of i18n, gain an understanding of the core principles, and learn various strategies for effective i18n management with Remix.
Read Internationalization with Remix ↗
Case Study: Building Shop with Remix
At Shopify, we use Remix for a variety of applications, libraries, and projects. One of the largest sites built with Remix is Shop.app. Recently we sat down with the Shop team and asked them all about building Shop.app with Remix.
We've gathered their insights in this case study to share with the world. We hope you find this article interesting, inspiring, and informative when it comes to building large, production websites with Remix.
Read "Building Shop with Remix" ↗
Conform
This month our featured Remix Resource is Conform, a type-safe form validation library that utilizes web fundamentals to progressively enhance HTML Forms, created by Edmund Hung.
Conform is a great library for handling form data for a variety of projects, and it works with any server-based React framework, not just Remix. If you've been looking for a tool to better handle your form validation, look no further than Conform.
Check out Conform ↗
Deploying Remix to GitHub Pages
Now that SPA Mode is stable, there are a more ways than every to deploy your Remix app. Brooks took some time to show you how you can deploy your Remix SPA app to GitHub Pages, a simple and free static server.
We still believe most sites are going to be better off using a server, but for the situations where you don't need a server, don't want one, or can't use one, SPA mode has you covered. This tutorial is a nice intro to using SPA mode.
Watch "Deploying Remix to GitHub Pages" ↗
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! Get involved at:
Reach out to Brooks (our Developer Relations Manager) if you are interested in starting your own meetup.
That's all for this month! Let us know if you play with Single Fetch and have any feedback for us, if you found any of these resources helpful, or if you have any other Remix related questions. You can find us and the Remix community on Discord.
- The Remix Team