Create a filter bar that stores its state in the URL. Use the OData query string format to parse and serialize the filters. Create a custom hook to manage the filter state.
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.
Use query parameters to implement server-side pagination with Remix. Create a rolling pagination component that shows the current page along with a few pages before and after it, like Google Search.
Use formdata for progressive enhancement and json for a better developer experience. Parse request bodies based on their content type, and parse fetchers read pending requests.
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.
Drizzle is a typescript ORM for type-safe database access and automatic migrations. Add it to your Remix app to get started with SQLite.
Use Conform to validate your forms serverside. Show errors on the client. Use Zod to generate your form schema.
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
Drizzle is a typescript ORM for type-safe database access and automatic migrations. Add it to your Remix app to get started with Cloudflare D1.
Use the useRouteLoaderData hook to access loader data from any component. Export a custom hook to make it easier to use. Use useMatches to find the ID of the route you want.
Use Remix's Defer feature in combination with an EventStream to stream progress updates to the client.
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.
Save forms automatically with useFetcher instead of useSubmit. Show a loading state while saving.
Use Remix's nested routes with react-transition-group and Tailwind CSS to fade between pages.
Write a Zod schema to typecheck your environment variables. Crash the app if any are missing. Add type definitions to process.env.
Debouncing helps reduce server load. Create a custom fetcher hook that adds debounce support. Modify the type of useFetcher to support extra features.
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.
The personal blog of Jacob Paris
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.
Improve user experience and productivity by making your UI faster. Persist data automatically, debounce saves, and show changes optimistically.
Save forms automatically with useDebounceFetcher. Make a reusable Input component. Compatible with Conform.
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 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.
Create your own route convention. Use a custom glob pattern. Add layouts automatically, or prepend an optional language segment.
Use OData to create a flexible query language for your database. Give your users pre-made queries or let them construct their own.