Solving hydration errors in Remix

Published on www.jacobparis.com

others / www.jacobparis.com2024-07-11

Custom routing with Remix

Create your own route convention. Use a custom glob pattern. Add layouts automatically, or prepend an optional language segment.

others / www.jacobparis.com2024-04-03

Debounce your useFetcher submissions with this custom Remix hook

Debouncing helps reduce server load. Create a custom fetcher hook that adds debounce support. Modify the type of useFetcher to support extra features.

others / www.jacobparis.com2024-03-03

Add Drizzle ORM to Remix Vite with Cloudflare D1

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.

others / www.jacobparis.com2024-02-25

Handle both JSON and FormData in Remix

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.

others / www.jacobparis.com2023-11-17

Redirecting from a resource route

Use redirect routes to redirect users to the right place. Implement dynamic next/previous buttons. Send users back to onboarding or login pages.

others / www.jacobparis.com2023-10-08

Server-side pagination with Remix

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.

others / www.jacobparis.com2023-09-26

Build a server-side filter UI with Remix

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.

others / www.jacobparis.com2023-09-19

URL based database filtering with OData

Use OData to create a flexible query language for your database. Give your users pre-made queries or let them construct their own.

others / www.jacobparis.com2023-08-28

Create a custom Remix hook to access loader data from any component

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.

others / www.jacobparis.com2023-07-13

Autosave form inputs with Remix

Save forms automatically with useDebounceFetcher. Make a reusable Input component. Compatible with Conform.

others / www.jacobparis.com2023-06-30

Form validation with Conform, Zod, and Remix

Use Conform to validate your forms serverside. Show errors on the client. Use Zod to generate your form schema.

others / www.jacobparis.com2023-06-18

Typesafe environment variables with Zod

Write a Zod schema to typecheck your environment variables. Crash the app if any are missing. Add type definitions to process.env.

others / www.jacobparis.com2023-06-12

Add Drizzle ORM to a Remix app

Drizzle is a typescript ORM for type-safe database access and automatic migrations. Add it to your Remix app to get started with SQLite.

others / www.jacobparis.com2023-06-02

Solving hydration errors in Remix

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

others / www.jacobparis.com2023-05-28

Guidelines for optimistic UI in modern CRUD apps

Improve user experience and productivity by making your UI faster. Persist data automatically, debounce saves, and show changes optimistically.

others / www.jacobparis.com2023-05-25

Progressively enhanced client rendering to avoid SSR hydration issues in Remix.

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.

others / www.jacobparis.com2023-05-16

Custom Fetcher Hooks are Remix's Typesafe RPCs

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.

others / www.jacobparis.com2023-04-30

Find and fix performance bottlenecks in your Remix app with Server Timing

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.

others / www.jacobparis.com2023-04-22

Where to host your Remix app in 2023

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.

others / www.jacobparis.com2023-04-18

Building a markdown input with a preview tab (like GitHub and Stack Overflow) with Remix

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.

others / www.jacobparis.com2023-04-12

Autosave form inputs on change or blur with Remix's useFetcher (not useSubmit)

Save forms automatically with useFetcher instead of useSubmit. Show a loading state while saving.

others / www.jacobparis.com2023-04-12

Generate open graph social preview images with Remix

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.

others / www.jacobparis.com2023-04-05

Server-side render dates across timezones with Remix

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.

others / www.jacobparis.com2023-04-02

Animated page transitions with Remix's nested routes

Use Remix's nested routes with react-transition-group and Tailwind CSS to fade between pages.

others / www.jacobparis.com2023-03-29

Multiple forms and actions on a page with Remix

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.

others2023-06-02

Solving hydration errors in Remix

www.jacobparis.com

Tutorials

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

Published on www.jacobparis.com

others / www.jacobparis.com2023-09-26

Build a server-side filter UI with Remix

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.

others / www.jacobparis.com2023-04-22

Where to host your Remix app in 2023

others / www.jacobparis.com2023-10-08

Server-side pagination with Remix

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.

others / www.jacobparis.com2024-02-25

Handle both JSON and FormData in Remix

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.

others / www.jacobparis.com2023-03-29

Multiple forms and actions on a page with Remix

others / www.jacobparis.com2023-06-12

Add Drizzle ORM to a Remix app

Drizzle is a typescript ORM for type-safe database access and automatic migrations. Add it to your Remix app to get started with SQLite.