Last Updated: November 21, 2025
Remix
Full-stack React framework
Core Concepts
| Item | Description |
|---|---|
Loader
|
Server-side data loading |
Action
|
Server-side mutations |
Route Module
|
File-based routing |
Form
|
Progressive enhancement |
Error Boundary
|
Error handling |
Meta
|
SEO and document head |
Common Commands
npx create-remix@latest
Create new Remix app
npm run dev
Start development server
npm run build
Build for production
npm start
Start production server
Loader & Component
// app/routes/posts.$id.tsx
import { json, LoaderArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
export async function loader({ params }: LoaderArgs) {
const post = await getPost(params.id);
return json({ post });
}
export default function Post() {
const { post } = useLoaderData<typeof loader>();
return (
<article>
<h1>{post.title}</h1>
<p>{post.content}</p>
</article>
);
}Best Practices
- Use loaders for data fetching
- Use actions for mutations
- Leverage progressive enhancement
- Handle errors with error boundaries
💡 Pro Tips
Quick Reference
Remix runs on the server and client for optimal UX