Remix Newsletter #16

Happy New Year!

We hope your year is off to a great start and you and your new workout routine make it to at least February.

While most of the world slowed down over the holiday season, the Remix team still managed to ship a lot of goodies such as Client Data, 15 Remix Singles, a new Resources page. and plenty of bug fixes. Let's dive in!

Remix v2.4.0 & v.2.4.1

The introduction of Client Data APIs allows you to opt-into running route loaders/actions in the browser via clientLoader/clientAction exports from your route.

Client Data via 3 new APIs: clientLoader, HydrateFallback, and clientAction
future.v3_relativeSplatPath for a breaking bug fix
Many of fixes and updates to the unstable Vite compiler

Checkout the full Release Notes ↗

Client Data

The introduction of Client Data APIs allows you to opt-into running route loaders/actions in the browser via clientLoader/clientAction exports from your route.

While we still recommend server loaders/actions for the majority of your data needs in a Remix app, these provide additional levers you can pull for more advanced use-cases such as:

Skip the Hop: Query a data API directly from the browser, using loaders only for SSR
Fullstack State: Augment server data with client data for your full set of loader data
One or the Other: Sometimes you use server loaders, sometimes you use client loaders, but not both on one route
Client Cache: Cache server loader data in the client and avoid some server calls
Migration: Ease your migration from React Router -> Remix SPA -> Remix SSR

Read the Client Data Guide ↗

Remix Singles "Trellix": Cookies, Auth, and Drag & Drop

Ryan dropped 1-2 Remix Singles on YouTube over the 12 days leading up to Christmas. These 15 bite-size videos walk you through implementing features in Trellix, a Trello clone with some not-so-basic user interactivity. These videos cover a wide range of topics:

Cookies
User Authentication
Protecting Routes
Pending UI
Optimistic Update
Optimistic Add
Drag and Drop

Watch Remix Singles "Trellix" ↗

Remix Resources

Scroll through of the Remix Resource page

We've added a new set of pages to the website to help you find useful templates, stacks, and libraries made the Remix community for the Remix community. We hope these pages will be a helpful set of resources as you're building better websites with Remix. Each month we will also announce a new featured resource.

The featured resource of the month is The Epic Stack by Kent C. Dodds

We have a lot of ideas to allow the community to contribute resources to these pages, and help support the contributors who make the Remix ecosystem and community so great.

Checkout Remix Resources ↗

Remix Tutorial on FreeCodeCamp

Remix and Strapi logos next to Paul and the title "Full Stack Tutorial"

Paul Bratslavsky created a free 2-hour course where he shows you how to harness the power of Remix with Strapi, a flexible, open-source Headless CMS, to build full-featured applications.

Checkout Remix and Strapi Crash Course – Full Stack Development ↗

Better MDX Route Support with Vite

Meme of Power Rangers transforming into the Megazord. Over each of the Power Rangers is listed a technology. First is webpack crossed out and replaced with vite. The second is babel crossed out and replaced with mdx. The third is typescript. The fourth react + remix. The fifth is tailwind with emotion crossed out. Finally the Megazord has "a static blog with 3 posts" but the word "static" is crossed out

Pedro and Mark are excited to show off another benefit of using Vite as Remix's compiler: better MDX Route support!

Vite makes it easy to process MDX files. Remix makes it easy to work with data. That means it's never been easier to make an overpowered blog with 3 posts 😎

Checkout the blog example by Mark and Pedro ↗

Fresh code

We have a lot of exciting RFCs and PRs bringing many new features to Remix. Here are 2 you should be able to use as soon as the next release:

Join our Roadmap Planning Tue, Jan 9th ↗

Connect at a Remix Meetups

Members of the community voluntarily run our Remix Meetups all around the globe with in-person and online options. These meetups are a great way to connect with and learn from other developers using Remix.