Tutorials — Sergio Xalambrí

Access React Router Context with AsyncLocalStorage

Fri, 06 Mar 2026 17:12:29 GMT

Access React Router's context from any function without passing it through every layer.

Create a Per-Request Database Instance with Middleware

Tue, 03 Mar 2026 05:37:11 GMT

Manage database lifecycle with React Router middleware, ensuring connections close even when errors occur.

Use Sec-Fetch Headers for CSRF Protection

Mon, 23 Feb 2026 04:49:51 GMT

Protect your React Router app from CSRF attacks using browser Sec-Fetch headers in middleware.

Dedupe Server Calls with Remix Utils Batcher

Sun, 19 Oct 2025 07:14:18 GMT

Prevent duplicate API calls in React Router loaders using Remix Utils Batcher middleware for better performance.

Transform FormData Between UI and Database in React Router

Wed, 15 Oct 2025 04:58:31 GMT

Transform form data to database objects and back using actions and loaders with proper separation of concerns.

Build a Master-Detail UI with React Router

Fri, 03 Oct 2025 06:42:21 GMT

Create a master-detail interface that adapts based on how users access it, full context when browsing, focused when direct.

Leverage React Router's Built-in Data Deduplication

Thu, 25 Sep 2025 06:08:18 GMT

Learn how React Router's built-in deduplication system uses references to eliminate duplicate data transmission when combining promises in y

Redirect Based on Screen Size in React Router

Wed, 13 Aug 2025 08:18:55 GMT

Learn how to use a nested index route with a clientLoader in React Router to conditionally redirect based on screen size, ensuring a smooth

Avoid Waterfalls in React Suspense

Tue, 12 Aug 2025 14:33:41 GMT

Learn how React Suspense boundaries can cause or prevent data loading waterfalls, the difference between nested and sibling boundaries, and

Handle deferred data in React Router

Thu, 31 Jul 2025 20:00:25 GMT

Three approaches to handle deferred promises in React Router v7: Await component, React.use hook, and direct promise rendering.

Use Action Routes in React Router

Sun, 20 Jul 2025 07:04:15 GMT

Learn how to structure server and client actions in React Router using a clear and scalable pattern. Centralize logic, handle forms, manage

Add a Color Scheme Toggle in React Router

Wed, 07 May 2025 05:55:43 GMT

Add a color scheme toggle to your React Router app using cookies for persistent, flash-free light, dark, or system preference.

Debounce Loaders and Actions in React Router

Mon, 14 Apr 2025 04:58:58 GMT

Debounce loaders and actions in React Router at the route level—cleaner code, better control, no extra wrappers needed.

Use client_id and client_secret in OAuth2

Sat, 05 Apr 2025 00:17:43 GMT

Use client_id and client_secret to authenticate your app with the Authorization Server in OAuth2 flows.

Use the OAuth2 Introspection Endpoint

Wed, 02 Apr 2025 19:03:39 GMT

Learn how to use the introspection endpoint in OAuth2 to validate opaque tokens and extract user and scope information.

Revoke a Refresh Token in OAuth2

Tue, 01 Apr 2025 00:02:49 GMT

Learn how to securely revoke refresh tokens in OAuth2 and prevent unauthorized access after logout or token compromise.

Use PKCE in OAuth2 Authorization Code Flow

Wed, 26 Mar 2025 03:26:52 GMT

Learn how to securely implement PKCE in the OAuth2 Authorization Code flow and why it’s useful for public and server-rendered apps.

Add Custom Claims to JWT Access Tokens

Tue, 25 Mar 2025 18:03:05 GMT

Learn how to add custom claims to JWT access tokens in OAuth2 without exposing sensitive data.

Validate exp, iat, and nbf in JWTs

Tue, 25 Mar 2025 06:27:23 GMT

Learn how to validate exp, iat, and nbf claims in JWT access tokens to ensure your API only accepts valid tokens.

Use `scope` to Authorize Actions in Your API

Mon, 24 Mar 2025 04:52:09 GMT

Learn how to use the scope claim in OAuth2 access tokens to authorize actions in your API with fine-grained permissions.

Validate JWTs with JWKS

Mon, 24 Mar 2025 04:39:27 GMT

Learn how to verify JWT access tokens securely using JWKS, without hitting your Authorization Server on every request.

Create a Per-Request Singleton with React Router Middleware

Tue, 11 Mar 2025 05:34:35 GMT

Create a per-request singleton in React Router middleware to optimize request-based caching and batching without persistent global state.

Test Middleware in React Router

Mon, 10 Mar 2025 19:17:05 GMT

Learn how to test React Router middleware using Bun Test, mock requests, and validate session handling in just a few simple steps.

Use middleware in React Router

Sat, 08 Mar 2025 07:43:41 GMT

Enable middleware in React Router 7.3.0 to intercept requests and enhance loaders and actions on both server and client.

Show a 404 in React Router

Sun, 02 Mar 2025 10:11:07 GMT

Download a file from a React Router route

Mon, 24 Feb 2025 06:15:30 GMT

Use Bullet to Detect N+1 Queries in Rails

Sat, 08 Feb 2025 22:30:12 GMT

Use Pandoc to convert a Markdown to a PDF and ePUB

Fri, 07 Feb 2025 19:32:44 GMT

Load Dynamic Stylesheets in React Router

Mon, 03 Feb 2025 05:02:01 GMT

Split routes config in React Router

Wed, 15 Jan 2025 05:36:05 GMT

Configure the tracking branch in Git

Tue, 14 Jan 2025 22:45:32 GMT

Reuse route modules in React Router

Mon, 13 Jan 2025 18:12:37 GMT

Populate Your Rails Database with Fixtures

Wed, 18 Dec 2024 21:03:28 GMT

Learn how to populate your Rails database with fixtures for testing and development.

Stub a method in a class with Minitest

Mon, 02 Sep 2024 17:49:10 GMT

Show toast after a Remix action

Fri, 30 Aug 2024 07:39:08 GMT

Learn to display a toast notification after a Remix action by utilizing the clientAction function to ensure consistent user feedback.

Simplify Component Imports with TypeScript Namespaces

Wed, 10 Jul 2024 21:34:33 GMT

Validate Form in Remix with clientAction

Tue, 18 Jun 2024 06:26:14 GMT

Generate Cloudflare environment type with wrangler

Tue, 18 Jun 2024 06:10:40 GMT

Configure scoped private packages in Bun

Tue, 18 Jun 2024 06:05:06 GMT

Use package.json#bin to create a CLI

Tue, 26 Mar 2024 22:01:17 GMT

Access location.state in Remix loaders and actions

Wed, 13 Mar 2024 22:39:02 GMT

Add i18n to a Remix Vite app

Fri, 08 Mar 2024 00:39:07 GMT

Autoload the correct Node version with NVM

Fri, 01 Mar 2024 17:12:49 GMT

Nest routes with dynamic params in Remix

Thu, 15 Feb 2024 16:52:53 GMT

Build a simple login and logout with Remix

Tue, 13 Feb 2024 05:57:59 GMT

Access React Router's loader data from a route ErrorBoundary

Tue, 13 Feb 2024 05:35:44 GMT

Use useRouteLoaderData hook to access route loader data inside ErrorBoundary components when handling errors.

Access React Router's Loaders Data in entry.client

Tue, 13 Feb 2024 05:25:07 GMT

Access loader data from entry.client.tsx using the global window.__reactRouterContext object before hydrating your app.

Handle not found URLs with Remix

Sat, 10 Feb 2024 04:07:57 GMT

Persist the User Locale Using Cookies with React Router and i18next

Wed, 07 Feb 2024 17:16:37 GMT

Store user language preferences in cookies to persist locale selections across sessions using middleware.

Add dynamic canonical URL to Remix routes

Sun, 04 Feb 2024 05:38:01 GMT

Add custom attributes to Markdoc code fences

Sat, 03 Feb 2024 05:12:14 GMT

@markdoc/markdoc@0.4.0

Enable Remix ~/ aliased imports in Vitest

Fri, 02 Feb 2024 00:09:44 GMT

Add syntax highlight to Markdoc using Prism.js

Wed, 31 Jan 2024 00:08:25 GMT

Create a CRUD with Remix

Thu, 25 Jan 2024 05:04:07 GMT

Pass Cookies from a React Router Loader to an External API

Mon, 22 Jan 2024 06:02:45 GMT

Forward browser cookies to external APIs by passing request headers through fetch calls.

Call an action from a loader in Remix

Mon, 22 Jan 2024 05:57:32 GMT

Use React Portal in Remix

Mon, 22 Jan 2024 05:48:48 GMT

Prevent the React Router Loader to Run after Document Request

Mon, 22 Jan 2024 05:04:15 GMT

Use clientLoader to prevent server loader execution during client-side navigation while keeping it on document requests.

Defer a Fetch response in Remix

Fri, 19 Jan 2024 23:39:03 GMT

Use a CDN for your static assets in Remix

Fri, 19 Jan 2024 23:32:26 GMT

Get the absolute URL in Remix's MetaFunction

Fri, 19 Jan 2024 23:26:21 GMT

Build an app with Remix and Bun

Fri, 19 Jan 2024 22:36:30 GMT

Find and remove unused code with Knip

Thu, 18 Jan 2024 22:24:28 GMT

Create multiple top-level layouts in Remix

Wed, 17 Jan 2024 00:15:29 GMT

Test meta tags using Playwright

Wed, 10 Jan 2024 22:47:06 GMT

Prefetch data for Remix Fetcher usage

Fri, 08 Dec 2023 22:31:58 GMT

If you're using Remix, you can ask it to prefetch the data of a new route using Link's prefetch prop, but if you need to use `fetcher.loa…

Keep Your Loader Data Fresh in Remix

Fri, 01 Dec 2023 05:35:33 GMT

Using the useRevalidator hook we can revalidate our loader data on an interval to ensure that our data is always fresh. How fresh can depe…

Expose Remix Routes as API Endpoints

Mon, 27 Nov 2023 18:43:34 GMT

If you're building a Remix web app, and then you decide to expose an API from that app, you may be tempted to try to reuse the same routes …

Access the Search Params of a Request in React Router

Wed, 22 Nov 2023 23:17:29 GMT

Learn how to access URL search params in React Router loaders and components using the URL and URLSearchParams APIs.

Upload Images in a Remix Application

Mon, 23 Oct 2023 23:40:03 GMT

If you want to add file upload to let users send you images, e.g., for an avatar, Remix provides a few (still unstable for some reason) too…

Redirect with Search Param in Remix

Fri, 06 Oct 2023 23:47:03 GMT

Let's say you want to ensure a specific search param is always set. To do so, you can first check if the search param is set, and if not, r…

Access the Loader Data in Remix

Thu, 05 Oct 2023 20:33:52 GMT

If you're using Remix, you may have noticed that the loader data is not passed to the components as props. This is because the loader data …

Abort Async Calls Inside Remix Loaders and Actions

Sun, 24 Sep 2023 07:41:49 GMT

Let's say you're writing a loader that needs to do a fetch call to get some data, something simple just for the example: ```ts import { js…

Get Remix route params `entry.server`

Fri, 08 Sep 2023 16:36:36 GMT

If you have a parameter like the locale `/:locale/*` that you want to get in entry.server for any reason, you can use the `EntryContext` ob…

Test meta tags with Cypress

Wed, 06 Sep 2023 04:42:31 GMT

If you want to ensure your webs have the correct meta tags like the title, description, Open Graph or Twitter Cards. We can test the title…

Strongly type Remix route IDs

Mon, 17 Jul 2023 23:33:22 GMT

When using something like `useRouteLoaderData()` we need to provide the route ID of the route we want to get the data from. This could als…

Strongly type public assets in Remix

Mon, 17 Jul 2023 15:29:17 GMT

Remix gives us two ways to work with assets, we can import them directly and get a string to the hashed file path, or we can place the file…

Create a reusable Form component in Remix

Fri, 07 Jul 2023 22:35:43 GMT

Let's say we want to build a custom Form component for our application, this Form will do things inside like rendering a hidden input with …

Sync text input with URLSearchParam in Remix

Thu, 06 Jul 2023 17:28:54 GMT

Let's say we're building a search form that needs to keep the value on the search params as the user type. We could directly update on the…

Use TanStack Query to Share Data between React Router Loaders

Mon, 05 Jun 2023 16:01:26 GMT

Share data between React Router loaders efficiently using TanStack Query to avoid duplicate fetches and improve performance.

Logout from Auth0 with Remix Auth

Wed, 24 May 2023 04:41:20 GMT

If you're using Remix Auth together with Auth0, you may found out that if you just use the logout method from Remix Auth and try to login a…

Send Node.js ReadStream objects from Remix loaders

Mon, 15 May 2023 21:00:05 GMT

If you're creating route in Remix that needs to send a file from you may want to use `node:fs` to get the file content from the system and …

Reset a form on success in Remix

Mon, 15 May 2023 20:46:56 GMT

If you have a form with one or more uncontrolled inputs you may have seen the case where the user submits the form but the inputs are not c…

Use `qs.parse` to use nested form fields in Remix

Mon, 15 May 2023 18:51:52 GMT

The traditional way to parse a form body in Remix is by using `request.formData()` to get a new FormData object, then use `formData.get()` …

Send JSON to a Remix action

Sat, 13 May 2023 23:14:44 GMT

While [there's a proposal to add support for this](https://github.com/remix-run/remix/discussions/1959#discussioncomment-2205718), right no…

Set Multiple Cookies in the Same Response in React Router Loaders

Fri, 12 May 2023 22:34:08 GMT

Set multiple Set-Cookie headers in loader responses using header arrays or the Headers.append method.

Close SSE connection from the server in Remix

Wed, 10 May 2023 23:43:44 GMT

If you're using SSE in a Remix app, you may find you want to be able to close the connection from the server. The [Remix Utils `eventStrea…

Measure performance with the Server-Timing header in React Router

Sun, 30 Apr 2023 06:20:25 GMT

Add performance measurements to response headers to inspect route timing from the browser DevTools.

Automatically commit sessions on Remix

Tue, 04 Apr 2023 21:37:26 GMT

When you use Remix's session feature you have to always remember to commit your session before sending the response. This is a simpler fun…

Customize Remix AppLoadContext type

Thu, 16 Mar 2023 21:17:58 GMT

Turn on Caps Lock on Cypress

Tue, 14 Mar 2023 17:27:21 GMT

If you're testing a feature that depends on Caps Lock to be on, e.g. detect Caps Lock and warn on password inputs. You can test this works …

Delete a Cookie using Remix cookie helpers

Mon, 13 Feb 2023 22:41:53 GMT

If we have set a cookie and we need to tell the browser to delete it, we can do that with a simple trick, we can set the cookie value to an…

Add runtime SSG and ISR to Remix

Sun, 29 Jan 2023 05:24:17 GMT

If you came to Remix from the Next.js world, you might wonder how to use SSG and ISR with Remix. The framework doesn't support it; instead…

Improve SEO by not sending JS in Remix

Wed, 25 Jan 2023 20:24:28 GMT

When Google crawls your website, it will try to execute all the JavaScript it finds. And even if your app…

Use AMP with Remix

Mon, 23 Jan 2023 23:10:44 GMT

If for any reason, you want to add AMP to your Remix app, there are a few things you need to do. First, go to your `app/root…

Use Remix as a SPA only

Mon, 23 Jan 2023 22:39:20 GMT

Remix always does SSR on document requests. Then it works as an MPA until JS loads and React hydrates your app. At that …

Downgrade to MPA if Users Prefer Reduced Data in React Router

Thu, 15 Dec 2022 18:03:02 GMT

Detect the Save-Data header and conditionally disable client-side JavaScript to reduce data usage.

Add rolling sessions to Remix

Thu, 01 Dec 2022 20:32:16 GMT

Rolling sessions is a technique to extend the maxAge of a session cookie by resetting the cookie's expiration date…

Use Server-Sent Events with Remix

Fri, 25 Nov 2022 23:45:39 GMT

Using Server-Sent Events (SSE) you can keep a connection between a browser (client) and an HTTP server open an…

Progressively Enhance the useFetcher Hook in React Router

Wed, 16 Nov 2022 22:13:23 GMT

Support both JavaScript and no-JavaScript users by detecting hydration state in fetcher forms.

Use `process.env` client-side with Remix

Wed, 09 Nov 2022 16:58:37 GMT

Use process.env client-side with Remix The process.env thing is a Node.js-only feature that many front-end developers adopted as something t…

Persist inputs after a form submit in Remix

Thu, 20 Oct 2022 22:11:55 GMT

Let's say you have a form with a few inputs. You want to persist the inputs' values after submitting…

Lazy-load React components in Remix

Wed, 12 Oct 2022 21:31:09 GMT

Suppose we want to create a timeline component that lists different events. Each event type has a unique com…

Destroy User Session and While Setting a Flash Message in React Router

Wed, 21 Sep 2022 20:48:27 GMT

Set flash messages while destroying user sessions using cookie or database session storage.

Add additional data before submitting on Remix

Wed, 21 Sep 2022 20:31:22 GMT

The Remix approach to submitting forms is to replace the

Redirect to an external website with Remix

Wed, 21 Sep 2022 20:07:18 GMT

Remix gives us a useful redirect helper function which lets us quickly create a new redirect Respon…

Bubble up data on Remix routes

Tue, 13 Sep 2022 23:04:17 GMT

React introduced a one-way data flow where a parent component has some data (state) and passes it to the children…

Group related routes together in Remix

Fri, 09 Sep 2022 17:51:15 GMT

Next.js released its new nested routes feature yesterday (Friday, 9th September). One of the things they …

Parse Markdown with Markdoc in Remix

Thu, 21 Jul 2022 22:43:43 GMT

Markdoc is this new Markdown parser by Stripe, and it's a simple to use yet extendable library we can use i…

Optimize image loading with plain HTML

Mon, 09 May 2022 17:31:08 GMT

If you're building some page like a landing with some images, you may want to optimize how these images l…

Add returnTo behavior to Remix Auth

Fri, 25 Feb 2022 03:34:26 GMT

If you're using Remix Auth, you may want to add support to return the user to where it was before redirectin…

Share session and cookies between Next and Remix

Thu, 24 Feb 2022 21:52:55 GMT

I have been migrating a Next.js app to Remix for a few months. I already wrote how to run them …

Fix double data request when prefetching in Remix

Thu, 24 Feb 2022 20:45:58 GMT

Suppose you rendered a component in your UI with the idea of pref…

Run Tailwind and Remix in Parallel with PM2

Wed, 19 Jan 2022 05:37:24 GMT

If you use Remix together Tailwind (and you should!), you may have found out that you need to run th…

Use Remix with socket.io

Tue, 11 Jan 2022 21:20:22 GMT

If you want to add real-time capabilities to your Remix app without using an external service, the easiest way is proba…

Generate a PDF in Remix with Resource Routes

Mon, 10 Jan 2022 16:43:09 GMT

Remix has a feature called Resource Routes which let you create endpoints returning anything. Usin…

Avoid waterfalls of queries in Remix loaders

Thu, 06 Jan 2022 17:05:58 GMT

Remix does a fantastic job of avoiding waterfalls everywhere. It preloads assets. It downloads JS a…

Run Next and Remix on the same server

Mon, 03 Jan 2022 18:49:57 GMT

If you want to migrate a Next app to Remix, you may be tempted to do a complete migration. Still, if your …

Test Remix loaders and actions

Thu, 25 Nov 2021 06:53:55 GMT

If you are using Remix, most of your application code will live in the loaders and actions instead of React compo…

Use NProgress in a Remix app

Wed, 24 Nov 2021 16:07:35 GMT

Remix's philosophy is to kill all the spinner! This is amazing, but sometimes it's not possible. Connections may be…

Use Fathom with Remix

Thu, 23 Sep 2021 21:47:25 GMT

If you want to use Fathom for your analytics and use Remix to build your app, you can configure it to work quite quickly. …

Fix `gyp: No Xcode or CLT version detected!` error

Thu, 09 Sep 2021 16:34:31 GMT

Fix gyp: No Xcode or CLT version detected! error If you have this error, and you running xcode-select --install tells you you have them inst…

Use Dependabot to keep Remix up-to-date

Wed, 08 Sep 2021 17:45:06 GMT

If you use Dependabot to keep your project dependencies up-to-date, and if you use Remix you may have no…

Load only the data you need in Remix

Fri, 18 Jun 2021 16:45:32 GMT

If you are used to build SPA and your APIs are REST you probably have found the issue with over fetching, t…

Use ETags in Remix

Wed, 16 Jun 2021 16:32:36 GMT

ETags are strings used to identify a particular version of a resource. If the URL is the identity of a resource the ETag is t…

Redirect to the original URL inside a Remix action

Thu, 20 May 2021 21:29:16 GMT

Let's say the user is currently at the URL /:username, and there's a button to follow that …

Read search params with JS

Tue, 18 May 2021 16:31:40 GMT

If you need to read the search params (aka query string) from a URL in JS the most common way is to use one of the mu…

Use ActiveModel::Serializer with non ActiveRecord object

Mon, 17 May 2021 20:15:30 GMT

If you are trying to serialize an object which is not an instance of ActiveRecord, when…

Serialize list of items with ActiveModel::Serializer

Mon, 17 May 2021 18:42:02 GMT

Most of the them, when working on Rails with ActiveModel::Serializer you will do something …

Use serializers with JSON.stringify and JSON.parse

Wed, 12 May 2021 23:19:48 GMT

If you are working with an API which expects and returns keys without using camelCase, e.g if…

Force a locale in Rails I18n from the params

Tue, 11 May 2021 05:02:35 GMT

If you want to change the local used for internationalization a single time from the params of the …

Add missing `created_at` and `updated_at` columns in Rails

Tue, 23 Mar 2021 22:53:31 GMT

Add missing created_at and updated_at columns in Rails If, like me, you forgot to add the t.timestamps when creating a new table, you may …

Build your own RSS Reader

Mon, 01 Feb 2021 05:53:03 GMT

RSS is a standard way to use XML to share content from a website so other apps could read it and show it in a differen…

Keep Heading Levels Consistent with React Context

Sun, 31 Jan 2021 22:37:23 GMT

When building for the web one of the most common elements are the heading tags (h1 to h6) …

Use TailwindCSS Typography with Dark Mode Styles

Mon, 16 Nov 2020 06:57:08 GMT

Since TailwindCSS v2 it comes with dark mode support. Enabling it is really simple, in the `tai…

Use SWR with Geolocation

Fri, 19 Jun 2020 05:36:42 GMT

Learn how to use SWR with the Geolocation WebAPI to show the user location in a map and keep it up-to-date with any change.

Sync WebApp Session Status between Tabs with SWR

Fri, 15 May 2020 07:11:20 GMT

Implement a synced session status using SWR to keep the user logged in/out in all the tabs or windows

Sync SWR cache with Web Storage

Fri, 15 May 2020 05:28:17 GMT

Use Web Storage to retain SWR cache between page reloads

Configure Google Suite MX records in Vercel

Tue, 12 May 2020 05:10:09 GMT

Use Google Suite with a domain whose NS records is in Vercel

Report Web Vitals in Next.js

Mon, 11 May 2020 17:49:13 GMT

Measure the performance of our Next.js application with Web Vitals

Use React.Suspense to wait for an image to load

Sat, 09 May 2020 09:13:43 GMT

Learn how to use React.Suspense to handle the loading state of an image.

Purge unused CSS with TailwindCSS

Sat, 09 May 2020 09:05:38 GMT

Learn how to use the built-in purge support of Tailwind to remove unused classes in production.

Setup a redirect inside a project deployed to Vercel

Sat, 09 May 2020 08:37:03 GMT

Learn how you can create a redirect in any project deployed to the Vercel platform.

Use a scoped registry with Yarn

Sat, 09 May 2020 08:23:30 GMT

Learn how you can configure Yarn to use a different registry for scoped packages

Automatically Publish to npm using GitHub Actions

Tue, 29 Oct 2019 15:49:37 GMT

Create a GitHub Actions workflow to automatically publish new version of a package when creating a new release on GitHub.