Exploring the World of Remix: A Guide to Building Resilient and Performant Web Apps

For 10 years, React Router has been a core part of the React ecosystem. Now, with Remix merging into React Router v7, millions of React Router apps can upgrade to powerful features like automatic code splitting, simplified data loading, form actions, server rendering, and static site generation. This allows React developers to enhance existing projects or build new ones easily.

In this session, we'll explore how Remix, now part of React Router, enables developers to build robust web applications that stand the test of time. Attendees will learn about the Remix build process using Vite and how Remix adapters enable flexible deployment on various platforms like Vercel, Netlify, and Cloudflare Workers.

We'll also explore how Remix reimagines the MVC architecture with Remix Route Modules, which streamline development by combining server-side data loading, UI rendering, and interactivity into a single, cohesive file. Additionally, we'll highlight how Remix's built-in features, like optimistic UI updates and intuitive form management, enable developers to create responsive and engaging user interfaces.

Transcript

1. The Remix Evolution: How React Router v7 Enables Fast and Resilient Apps Aurora Scharff @aurorascharff
2. Aurora Scharff > Norway, Oslo > Senior Consultant at Crayon Consulting > React Certification Lead at certificates.dev > Active RSC developer with Next.js App Router
4. https://remix.run/
5. > Full stack, React-based web framework/meta-framework > Released in 2020, acquired by Shopify in 2022 > Focuses on web standards to deliver fast, resilient user experiences
6. https://remix.run/_docs/routing
7. > Full stack, React-based web framework/meta-framework > Released in 2020, acquired by Shopify in 2022 > Focuses on web standards to deliver fast, resilient user experiences > Written by the React-router team > Uses React Router as it’s largest dependency after React itself
8. > 10 years old and going strong > The most widely used dependency in the React Ecosystem > Shopify itself heavily depends on React Router
9. It’s clearly good, but we want features like: > Automatic code splitting > Simplified data loading > Form actions > Simplified pending states > Optimistic UI > Server rendering (SSR)
10. Vite: Next Generation Frontend Tooling > Fast dev experience, optimized builds, rich plugin ecosystem > Risen substantially in popularity > Has replaced Create React App (CRA)
11. > Remix bet on Vite in 2023 and deprecated classic compiler > Opened Remix to more users > SPA-mode for client-apps > remix.config.js -> vite.config.ts > plugins: [remix()]
18. https://react.dev/blog/2025/02/14/sunsetting-create-react-app
19. React Router v7 “modes”
20. React Router v7 “modes”
21. Rendering strategies Server-side Rendering Static pre-rendering Single Page Application
22. Remix React Router (framework mode) architecture
24. 1: Compiler
25. 2: HTTP Handler and Adapter > React Router (framework mode) runs on the server, but is not actually a server > Just a handler that is given to the actual JS server > Built on Web Fetch API instead of Node.js > Can be run in any Node.js server + non-Node.js environments
26. 3: Server framework > MVC-like framework, familiar to Rails/Laravel developers > React Router (framework mode) is the View and the Controller, model is up to you > UI-focused rather than model-focused > No split between View and Controller > Executed with “Route Modules”
28. Example: RR Route Module “notes.tsx”
39. 3: Server framework > React Router (framework mode) scales down > Not every page needs a bunch of JavaScript > Not every user interaction requires more than default behavior > Apps can work before JavaScript loads in the browser
40. 4: Browser framework Hydration
41. 4: Browser framework
42. 4: Browser framework > Assets don’t need to be re-downloaded > Assets don’t need to be parsed again > Data fetched is smaller than the entire document > The React Router framework enhances HTML APIs like <a> and <form>, tends to work before JS
43. 4: Browser framework
44. 4: Browser framework
45. Example: RR Route Module “notes.tsx”
46. Example: RR Route Module “notes.tsx”
48. Example: RR Route Module “notes.tsx”
49. “Progressive Enhancement”
50. Creating a React Router v7 app
51. npx create-react-router@latest my-app npx create-vite@latest npm i react-router Framework mode Data and Declarative mode
57. DEMO
58. RRv7 & React 19
59. RRv7 & React 19: <Await> vs use https://reactrouter.com/how-to/suspense
60. React “meta-frameworks”
61. Rendering approach Hybrid, assumes hydration Server-first Client-first Server Components Experimental Yes, and is the default Planned Data fetching Client/server route loaders Server components (or client- side with libraries) Route loaders + utilities, integrated with SWR caching Routing Code-based (optional file-based), nested routing File-based, nested routing (feature-rich with i.e., parallel routes) File-based (optional code based), nested routing Server features Loaders, Actions, middleware Server Functions (React 19), API routes, middleware createServerFn(), API-routes, middleware Rendering strategies CSR, SSR + streaming, SSG (v7) CSR, SSR + streaming, SSG, ISR, PPR, “use cache” CSR, SSR + streaming, SSG Type safety Autogenerated route types + href() utility Statically typed links 100% type safe (links, params, search params ++) Migration Incremental, seamless from React Router < v7 Rewrite Migration
62. Pick what suits your needs and preferences
63. https://github.com/aurorascharff /react-router-v7-notes
64. Resources > Merge blogpost by the Remix team: https://remix.run/blog/merging-remix-and-react-router > Upgrading from React Router v6: https://reactrouter.com/upgrading/v6 > Migrating from Remix: https://reactrouter.com/upgrading/remix > React Router docs: https://reactrouter.com/start/framework/installation > React Router examples: https://github.com/remix-run/react-router/tree/main/examples > React Router (framework mode) architecture: https://remix.run/docs/en/main/discussion/introduction
66. THANK YOU @aurorascharff aurorascharff.no @aurorascharff