Remix Guide

Menu
  • Official
    70
  • Tutorials
    273
  • Packages
    68
  • Events
    15
  • Showcase
    98
  • Templates
    50
  • Examples
    80
  • Opinions
    106
  • Docs
  • GitHub
  • Discord
  • Meetup
  • RSS
Tutorials
others / sergiodxa.com2023-06-05

How to Use TANStack Query to share data between Remix loaders by sergiodxa

The blog of sergiodxa

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 / docs.sst.dev2023-05-17

Use Remix with SST | SST

Create and deploy a Remix app to AWS with SST.

others / medium.com2023-05-16

How to setup Cloudflare CDN in a remix.run app/website with fly.io

Recently I tried setting up CDN on my remix.run website hosted on fly.io.

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.wking.dev2023-05-10

Using symbols to create type safe Remix handles without duck typing

Safely type your handle data in Remix without needing to resort to duck typing with Symbols.

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 / trying.dev2023-04-12

Build A Map View With Remix and MapKit JS

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 ...

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.

others / remix.dev.br2023-03-24

Curso Remix How To com Fabio Vedovelli

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.

others / medium.com2023-03-24

Building a context loaded chat assistant with OpenAI and Remix

It seems everyone is using Chat GPT in their daily lives. From coding, to recipes, to blog generation, carefully crafted prompt engineering…

others / www.youtube.com2023-03-22

Aula inaugural do curso Aprenda Remix com Fabio Vedovelli

others / remix.run2023-03-10

Lazy Loading Routes in React Router 6.4+

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!

others / www.jacobparis.com2023-03-06

Stream Progress Updates with Remix using Defer, Suspense, and Server Sent Events

Use Remix's Defer feature in combination with an EventStream to stream progress updates to the client.

others / www.mokhtar.dev2023-02-17

Dynamic OG images with Remix and Node.js | Mokhtar Mial

Learn how to generate Open Graph images in your Remix app

others / tom-sherman.com2023-02-11

Type safe context in Remix on Cloudflare Pages

others / www.sanity.io2023-02-09

How to build a Remix website with Sanity.io and live preview | Sanity.io guide

Combine Sanity's blazing-fast CDN with Remix's cached at the edge pages.

Show more
New Hot Top
others2022-09-10

Group related routes together in Remix by sergiodxa

sergiodxa.com
Tutorials

Next.js released its new nested routes feature yesterday (Friday, 9th September). One of the things they ...

Published on sergiodxa.com

others / sergiodxa.com2021-12-24

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...

others / sergiodxa.com2021-12-24

Test Remix loaders and actions by sergiodxa

If you are using Remix, most of your application code will live in the loaders and actions instead of React compo...

others / sergiodxa.com2022-05-18

E2E test Remix with Vitest and Puppeteer by sergiodxa

Vitest is a testing framework, similar to Jest, but way faster, built on top of Vite, which uses esbuil...

others / sergiodxa.com2022-01-11

Use Remix with socket.io by sergiodxa

If you want to add real-time capabilities to your Remix app without using an external service, the easiest way is proba...

others / sergiodxa.com2021-12-24

Validating Remix forms with Constraints API by sergiodxa

The Constraints API is a browser API that has been available since the times of IE10, yep, that old....

others / sergiodxa.com2022-01-06

Avoid waterfalls of queries in Remix loaders by sergiodxa

Remix does a fantastic job of avoiding waterfalls everywhere. It preloads assets. It downloads JS a...