How to Build a simple login and logout with Remix by sergiodxa
How to Persist the user locale using cookies with Remix & i18next by sergiodxa
How to Expose Remix Routes as API Endpoints by sergiodxa
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 …
How to Prefetch data for Remix Fetcher usage by sergiodxa
If you're using Remix, you can ask it to prefetch the data of a new route using `<Link prefetch`> prop, but if you need to use `fetcher.loa…
How to Create multiple top-level layouts in Remix by sergiodxa
How to Find and remove unused code with Knip by sergiodxa
How to Build an app with Remix and Bun by sergiodxa
How to Get the absolute URL in Remix's MetaFunction by sergiodxa
How to Use a CDN for your static assets in Remix by sergiodxa
How to Defer a Fetch response in Remix by sergiodxa
How to Prevent the Remix loader to run after document request by sergiodxa
How to Use React Portal in Remix by sergiodxa
How to Call an action from a loader in Remix by sergiodxa
How to Pass cookies from a Remix loader to an external API by sergiodxa
How to Create a CRUD with Remix by sergiodxa
How to Access the Search Params of a Request in Remix by sergiodxa
The blog of sergiodxa
How to Keep Your Loader Data Fresh in Remix by sergiodxa
The blog of sergiodxa
How to Upload Images in a Remix Application by sergiodxa
The blog of sergiodxa
How to Redirect with Search Param in Remix by sergiodxa
The blog of sergiodxa
How to Access the Loader Data in Remix by sergiodxa
The blog of sergiodxa
How to Abort Async Calls Inside Remix Loaders and Actions by sergiodxa
The blog of sergiodxa
How to Create a reusable Form component in Remix by sergiodxa
The blog of sergiodxa
How to Use TANStack Query to share data between Remix loaders by sergiodxa
The blog of sergiodxa
Use Remix as a SPA only by sergiodxa
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 Remix by sergiodxa
Users can enable a setting in their devices to indicate to websites that they prefer redu...
Add rolling sessions to Remix by sergiodxa
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 by sergiodxa
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 Remix by sergiodxa
If you're using multiple forms on the same route, you may use the useFetcher hook, which also...
Use `process.env` client-side with Remix by sergiodxa
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 by sergiodxa
Let's say you have a form with a few inputs. You want to persist the inputs' values after submitting...
Throwing vs. Returning responses in Remix by sergiodxa
When you code a loader/action (we'll call them data functions from now) in Remix, you can either retur...
Lazy-load React components in Remix by sergiodxa
Suppose we want to create a timeline component that lists different events. Each event type has a unique com...
Optional route segments with Remix by sergiodxa
Let's say we have a URL structure like this: /:category/products /products Both routes need to work...
Add additional data before submitting on Remix by sergiodxa
The Remix approach to submitting forms is to replace the <form> tag with their <Form> compone...
Bubble up data on Remix routes by sergiodxa
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 by sergiodxa
Next.js released its new nested routes feature yesterday (Friday, 9th September). One of the things they ...
Parse Markdown with Markdoc in Remix by sergiodxa
Markdoc is this new Markdown parser by Stripe, and it's a simple to use yet extendable library we can use i...
Dependency injection in Remix loaders and actions by sergiodxa
Dependency Injection is a way our function or class can receieve from the caller the instancie...
E2E test Remix with Vitest and Puppeteer by sergiodxa
Vitest is a testing framework, similar to Jest, but way faster, built on top of Vite, which uses esbuil...
Multiple forms per route in Remix by sergiodxa
Suppose you have a complex enough Remix application. In that case, you may have reached the point where a sing...
Add returnTo behavior to Remix Auth by sergiodxa
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 by sergiodxa
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 by sergiodxa
Suppose you rendered a <Link prefetch="intent" /> component in your UI with the idea of pref...
Use Remix with socket.io by sergiodxa
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 by sergiodxa
Remix has a feature called Resource Routes which let you create endpoints returning anything. Usin...
Avoid waterfalls of queries in Remix loaders by sergiodxa
Remix does a fantastic job of avoiding waterfalls everywhere. It preloads assets. It downloads JS a...
Run Next and Remix on the same server by sergiodxa
If you want to migrate a Next app to Remix, you may be tempted to do a complete migration. Still, if your ...
HTTP vs. Server-side Cache in Remix by sergiodxa
When you build a web application, you may reach a point where some performance problems could be solved by a...
On-Demand Hydration in Remix by sergiodxa
Remix makes it really easy to don't send JS to the browser. It even has a guide on how to let routes statically def...
Loader vs Route Cache Headers in Remix by sergiodxa
Document Request So, let's say you have a route at /my-super-route, and there you have a loader fun...
The useMatches hook in Remix by sergiodxa
If you use Remix, there's a hook that you can use called useMatches, this hook is a way to access some internal d...
Validating Remix forms with Constraints API by sergiodxa
The Constraints API is a browser API that has been available since the times of IE10, yep, that old....
Test Remix loaders and actions by sergiodxa
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 by sergiodxa
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 by sergiodxa
If you want to use Fathom for your analytics and use Remix to build your app, you can configure it to work quite quickly. ...
Automatic Revalidation in Remix by sergiodxa
If you have used SWR or React Query, you may be used to a feature both libraries have called automatic revalidat...
Sending data from layout to leaf routes in Remix by sergiodxa
Hey! This is outdated, Remix Outlet component now supports sending data to leaf routes using ...
Using Service Workers with Remix by sergiodxa
A Remix app is by default fast, the framework optimize a lot how the required resources for a page are loaded s...
Localizing Remix apps with i18next by sergiodxa
There's a lot if libraries to implement i18n in JS and React, and i18next is one of the most popular out ther...
Adding CSRF protection to Remix by sergiodxa
While you may not need CSRF if your cookies have the SameSite: Lax configured, it may still be a good idea to ...
Load only the data you need in Remix by sergiodxa
If you are used to build SPA and your APIs are REST you probably have found the issue with over fetching, t...
Server-Side authentication with Auth0 in Remix by sergiodxa
While this works, I recommend you to don't do all of this yourself, instead use Remix Auth with...
Using TailwindCSS with Remix by sergiodxa
Let's see how to do the setup of TailwindCSS for a project using Remix. Install Tailwind The first thing we ne...
Use ETags in Remix by sergiodxa
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...
Jest Matchers for Remix responses by sergiodxa
When testing the logic of an action in Remix, or any function returning a Response, even a Fetch API Response,...
Using Form Objects inside Remix actions by sergiodxa
In Remix, each route can export a single action function used to handle any non GET request received b...
Route protection in Remix with Policies by sergiodxa
A Policy is a design pattern used to define authorization rules that can be re-used easily across an app...
Redirect to the original URL inside a Remix action by sergiodxa
Let's say the user is currently at the URL /:username, and there's a button to follow that ...
If you want to add real-time capabilities to your Remix app without using an external service, the easiest way is proba...
Published on sergiodxa.com
HTTP vs. Server-side Cache in Remix by sergiodxa
When you build a web application, you may reach a point where some performance problems could be solved by a...
Test Remix loaders and actions by sergiodxa
If you are using Remix, most of your application code will live in the loaders and actions instead of React compo...
E2E test Remix with Vitest and Puppeteer by sergiodxa
Vitest is a testing framework, similar to Jest, but way faster, built on top of Vite, which uses esbuil...
The useMatches hook in Remix by sergiodxa
If you use Remix, there's a hook that you can use called useMatches, this hook is a way to access some internal d...
Loader vs Route Cache Headers in Remix by sergiodxa
Document Request So, let's say you have a route at /my-super-route, and there you have a loader fun...
Add rolling sessions to Remix by sergiodxa
Rolling sessions is a technique to extend the maxAge of a session cookie by resetting the cookie's expiration date...