Remix is a full-stack React framework. After building production apps with Remix, here’s how to use it effectively.

Remix Basics

Installation

npx create-remix@latest
cd my-remix-app
npm run dev

Route Structure

app/
├── routes/
│   ├── _index.tsx
│   ├── about.tsx
│   └── users.$id.tsx
└── root.tsx

Data Loading

Loader Function

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

export async function loader({ params }) {
    const user = await getUserById(params.id);
    return json({ user });
}

export default function User() {
    const { user } = useLoaderData<typeof loader>();
    return <div>{user.name}</div>;
}

Mutations

export async function action({ request }) {
    const formData = await request.formData();
    const name = formData.get('name');
    
    await createUser({ name });
    return redirect('/users');
}

Forms

Form Handling

import { Form } from '@remix-run/react';

export default function CreateUser() {
    return (
        <Form method="post">
            <input name="name" />
            <button type="submit">Create</button>
        </Form>
    );
}

Best Practices

  1. Use loaders - Server-side data
  2. Handle errors - Error boundaries
  3. Optimistic UI - Better UX
  4. Nested routes - Layout composition
  5. Resource routes - API endpoints
  6. Type safety - TypeScript
  7. Testing - Unit and integration
  8. Performance - Code splitting

Conclusion

Remix enables:

  • Full-stack React
  • Server-side rendering
  • Optimistic UI
  • Better performance

Start with loaders and actions, then add nested routes. The patterns shown here build production web applications.

Remix full-stack framework from February 2022, covering data loading and mutations.