Articles by Sergio Xalambrí

A web developer from Buenos Aires, Argentina. I work at Daffy as a Web Developer.

Improve SEO by not sending JS in Remix
When Google crawls your website, it will try to execute all the JavaScript it finds. And even if your app...
Use AMP with Remix
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
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
Users can enable a setting in their devices to indicate to websites that they prefer redu...
Add rolling sessions to Remix
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
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
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
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
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
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
Suppose we want to create a timeline component that lists different events. Each event type has a unique com...
Optional route segments with Remix
Let's say we have a URL structure like this: /:category/products /products Both routes need to work...
Destroy user session and while setting a flash message in Remix
The session API from Remix lets us set flash messages that we can read only once...
Add additional data before submitting on Remix
The Remix approach to submitting forms is to replace the <form> tag with their <Form> compone...
Redirect to an external website with Remix
Remix gives us a useful redirect helper function which lets us quickly create a new redirect Respon...
Bubble up data on Remix routes
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
Next.js released its new nested routes feature yesterday (Friday, 9th September). One of the things they ...
Parse Markdown with Markdoc in Remix
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
Dependency Injection is a way our function or class can receieve from the caller the instancie...
Using Zod to safely read env variables
Zod is a great library to do schema based validations and get fully typed objects as a result. Environmen...