remix

Remix Best Practices

Overview

Aspect	Recommendation
Version	Remix v2 / React Router v7
Data Loading	Loaders
Mutations	Actions
Forms	<Form> with progressive enhancement
Styling	Tailwind CSS

---

Project Structure

app/
├── routes/
│   ├── _index.tsx           # Home route (/)
│   ├── about.tsx            # /about
│   ├── users._index.tsx     # /users
│   ├── users.$id.tsx        # /users/:id
│   ├── users.$id.edit.tsx   # /users/:id/edit
│   └── api.users.tsx        # /api/users (resource route)
├── components/
│   ├── ui/
│   └── ...
├── lib/
│   ├── db.server.ts
│   └── session.server.ts
├── root.tsx
└── entry.server.tsx

---

Loaders (Data Fetching)

Basic Loader

// app/routes/users._index.tsx
import type { LoaderFunctionArgs } from '@remix-run/node'
import { json } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'
import { db } from '~/lib/db.server'

export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url)
  const page = Number(url.searchParams.get('page')) || 1
  
  const users = await db.user.findMany({
    take: 20,
    skip: (page - 1) * 20,
  })
  
  return json({ users, page })
}

export default function UsersPage() {
  const { users, page } = useLoaderData<typeof loader>()
  
  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  )
}

Loader with Params

// app/routes/users.$id.tsx
import type { LoaderFunctionArgs } from '@remix-run/node'
import { json } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'
import invariant from 'tiny-invariant'

export async function loader({ params }: LoaderFunctionArgs) {
  invariant(params.id, 'Missing user ID')
  
  const user = await db.user.findUnique({
    where: { id: params.id },
  })
  
  if (!user) {
    throw new Response('Not Found', { status: 404 })
  }
  
  return json({ user })
}