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...
When you build a web application, you may reach a point where some performance problems could be solved by a...
If you are using Remix, most of your application code will live in the loaders and actions instead of React compo...
Vitest is a testing framework, similar to Jest, but way faster, built on top of Vite, which uses esbuil...
If you want to add real-time capabilities to your Remix app without using an external service, the easiest way is proba...
If you use Remix, there's a hook that you can use called useMatches, this hook is a way to access some internal d...
Document Request So, let's say you have a route at /my-super-route, and there you have a loader fun...
Rolling sessions is a technique to extend the maxAge of a session cookie by resetting the cookie's expiration date...
If you're using multiple forms on the same route, you may use the useFetcher hook, which also...
The blog of sergiodxa
The blog of sergiodxa
The Constraints API is a browser API that has been available since the times of IE10, yep, that old....
Remix does a fantastic job of avoiding waterfalls everywhere. It preloads assets. It downloads JS a...
Using Server-Sent Events (SSE) you can keep a connection between a browser (client) and an HTTP server open an...
A Remix app is by default fast, the framework optimize a lot how the required resources for a page are loaded s...
Remix has a feature called Resource Routes which let you create endpoints returning anything. Usin...
Markdoc is this new Markdown parser by Stripe, and it's a simple to use yet extendable library we can use i...
Dependency Injection is a way our function or class can receieve from the caller the instancie...
While you may not need CSRF if your cookies have the SameSite: Lax configured, it may still be a good idea to ...
The blog of sergiodxa
There's a lot if libraries to implement i18n in JS and React, and i18next is one of the most popular out ther...
React introduced a one-way data flow where a parent component has some data (state) and passes it to the children...
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...
If you're using Remix Auth, you may want to add support to return the user to where it was before redirectin...
If you want to migrate a Next app to Remix, you may be tempted to do a complete migration. Still, if your ...
A Policy is a design pattern used to define authorization rules that can be re-used easily across an app...
Remix's philosophy is to kill all the spinner! This is amazing, but sometimes it's not possible. Connections may be...
Suppose you have a complex enough Remix application. In that case, you may have reached the point where a sing...
The Remix approach to submitting forms is to replace the <form> tag with their <Form> compone...
Let's say you have a form with a few inputs. You want to persist the inputs' values after submitting...
When you code a loader/action (we'll call them data functions from now) in Remix, you can either retur...
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...
While this works, I recommend you to don't do all of this yourself, instead use Remix Auth with...
Remix always does SSR on document requests. Then it works as an MPA until JS loads and React hydrates your app. At that ...
Let's say the user is currently at the URL /:username, and there's a button to follow that ...
Suppose we want to create a timeline component that lists different events. Each event type has a unique com...
Suppose you rendered a <Link prefetch="intent" /> component in your UI with the idea of pref...
The blog of sergiodxa
If you have used SWR or React Query, you may be used to a feature both libraries have called automatic revalidat...
When testing the logic of an action in Remix, or any function returning a Response, even a Fetch API Response,...
I have been migrating a Next.js app to Remix for a few months. I already wrote how to run them ...
Let's say we have a URL structure like this: /:category/products /products Both routes need to work...
Let's see how to do the setup of TailwindCSS for a project using Remix. Install Tailwind The first thing we ne...
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 …
If you want to use Fathom for your analytics and use Remix to build your app, you can configure it to work quite quickly. ...
Hey! This is outdated, Remix Outlet component now supports sending data to leaf routes using ...
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...
In Remix, each route can export a single action function used to handle any non GET request received b...
Next.js released its new nested routes feature yesterday (Friday, 9th September). One of the things they ...
Users can enable a setting in their devices to indicate to websites that they prefer redu...
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…
If you are used to build SPA and your APIs are REST you probably have found the issue with over fetching, t...
The blog of sergiodxa
The blog of sergiodxa
The blog of sergiodxa
The blog of sergiodxa
If you want to migrate a Next app to Remix, you may be tempted to do a complete migration. Still, if your ...
When you build a web application, you may reach a point where some performance problems could be solved by a...
If you are using Remix, most of your application code will live in the loaders and actions instead of React compo...
Vitest is a testing framework, similar to Jest, but way faster, built on top of Vite, which uses esbuil...
If you want to add real-time capabilities to your Remix app without using an external service, the easiest way is proba...
If you use Remix, there's a hook that you can use called useMatches, this hook is a way to access some internal d...
Document Request So, let's say you have a route at /my-super-route, and there you have a loader fun...