Skip to main content

Remix

Features​

  • Built for the Modern Web
    • Progressive enhancement >> limited JavaScript
    • Native APIs >> relies heavily on native browser features
  • Data Loading Optimization
  • Full-Stack Capabilities
  • Nested Routes
  • Excellent Developer Experience
    • TypeScript-first
    • Fast Refresh
    • Error boundaries
  • Server-Side rendering & Streaming
  • Simple form handling
  • Zero Client-side javascript required
  • Built-in Asset Optimization
  • SEO & Accessibility
  • Deployment Flexibility

Use cases​

  • Content-heavy applications: Blogs, news sites, documentation.
  • E-commerce platforms: Where fast page loads and dynamic data fetching are critical.
  • Progressive Web Apps (PWAs): Remix’s offline-first and performance-focused design make it ideal.
  • Dashboards: Nested routes and SSR make it great for admin tools.

Install & Setup​

npx create-remix@latest my-remix-app
cd my-remix-app

npm install
npm run dev

Project structures​

Project structure
Details

app/

Application source: components, nested routes, and root.

Contains

  • components/ — Reusable UI components for the app.
  • routes/ — Route modules and nested route folders.
  • root.tsx — Top-level layout and error boundary.

Fundamental​

Routing​

Project structure
Details

app/

Application source files and route definitions.

Contains

  • components/ — Reusable UI components that do not participate in routing.
  • routes/ — Remix route modules that build the URL tree.
  • root.tsx — Top-level layout, error boundary, and shared document markup.
Project structure
Details

app/

Folder that contains route folders and the root app shell.

Contains

  • routes/ — Route directory with nested route folder conventions.
  • root.tsx — Application shell and error handling.

Examples​

concerts._index.tsx
export default function Concerts() {
  return <>Waiting here!</>;
}
concerts.$concertId.tsx
import type { LoaderFunctionArgs } from "@remix-run/node";
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

export const loader = async ({ params }: LoaderFunctionArgs) => {
  return json({ concertId: params.concertId });
};

export default function Concert() {
  const { concertId } = useLoaderData<typeof loader>();
  return <>Your id: {concertId}</>;
}

References​