How to Use TANStack Query to share data between Remix loaders by sergiodxa
The blog of sergiodxa
The blog of sergiodxa
Hydration errors can be caused by dates, ad blockers, browser extensions, invalid HTML, 3rd party scripts, CSS in JS libs, character encoding, IDs, and more
Improve user experience and productivity by making your UI faster. Persist data automatically, debounce saves, and show changes optimistically.
React doesn't like mismatches between client and server rendering. Avoid it by rendering tricky content like dates only on the client. Fade it in for a smooth UI and to avoid layout shift.
Create and deploy a Remix app to AWS with SST.
Recently I tried setting up CDN on my remix.run website hosted on fly.io.
Create RPCs by exporting functions from your resource routes. Get full end-to-end type safety and autocompletion. Use custom fetcher hooks to get automatic revalidation, request cancellation, and more.
Safely type your handle data in Remix without needing to resort to duck typing with Symbols.
Use the Server Timing API to measure the performance of your app and find bottlenecks. I've built a server timing utility function for Remix. Merge the timing info from multiple loaders into a single request.
Should you host your Remix app on a serverless provider like Netlify, Vercel, Cloudflare Pages, or AWS Lambda? Or a long-lived server like Fly, Render, Railway, or DigitalOcean? This guide will help you choose the right hosting option for your app.
Create a progressively enhanced input field with "edit" and "preview" tabs like GitHub and Stack Overflow. Use Remix's useFetcher hook to render the markdown server-side. Set shouldRevalidate to false to make tab-switching instant.
Save forms automatically with useFetcher instead of useSubmit. Show a loading state while saving.
Learn how to generate social preview images for your website with Remix and Tailwind. Use Vercel's Satori package with Remix for dynamic open graph images. Fetch fonts from Google automatically.
Gowalla is all about sharing where you're going with close friends. We deal a lot in maps and map experiences. The case is not so different in our first web product, Lists, where you share places you care about. Here's an example of F1 Tracks Around ...
Server-side rendering breaks when the server is in a different timezone than your browser. Make your Remix server timezone agnostic with a timezone offset cookie.
Use Remix's nested routes with react-transition-group and Tailwind CSS to fade between pages.
A Remix action is an endpoint for POST requests, and all forms will submit to the same action. Add a name and value to your submit button to know which form was submitted, and use that to determine which action to take.
Este curso lhe trará habilidades para desenvolver aplicações com Remix.run e ajudará a compreender como o Remix funciona. Seu momento "ahá" está mais perto do que você imagina.
It seems everyone is using Chat GPT in their daily lives. From coding, to recipes, to blog generation, carefully crafted prompt engineering…
Decoupling data-fetching from rendering introduces some complexities if you want to lazily load your route components. Check out how the newly introduced `route.lazy()` method helps solve this to keep your app bundles small and your UX snappy!
Use Remix's Defer feature in combination with an EventStream to stream progress updates to the client.
Learn how to generate Open Graph images in your Remix app
Combine Sanity's blazing-fast CDN with Remix's cached at the edge pages.
Learn how to build feature-rich & highly reactive fullstack React applications with Remix.