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. Exploring the World of Remix: A Guide to Building Resilient and Performant Web Apps Aurora Scharff @aurorascharff
2. Introduction > Aurora Scharff > Norway, Oslo > Consultant at > Currently hired at > Active Next.js developer - using Remix on the side
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, slick, 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)
12. > 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()]
19. https://react.dev/blog/2025/02/14/sunsetting-create-react-app
20. React Router v7 “modes”
21. React Router v7 “modes”
22. Rendering strategies Server-side Rendering Static pre-rendering Single Page Application
23. Remix React Router (framework mode) architecture
25. 1: Compiler
26. 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 like Vercel, Netlify etc. + non-Node.js environments like Cloudflare Workers
27. 2: HTTP Handler and Adapter https://github.com/remix-run/react-router-templates/blob/main/node-custom-server/server/app.ts
28. 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”
30. Example: RR Route Module “notes.tsx”
41. 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 > RR Route Modules: React components with their own API route, can load and submit data to themselves on the server
42. 4: Browser framework Hydration
43. 4: Browser framework
44. 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
45. 4: Browser framework
46. 4: Browser framework
47. Example: RR Route Module “notes.tsx”
48. Example: RR Route Module “notes.tsx”
50. Example: RR Route Module “notes.tsx”
51. “Progressive Enhancement”
52. Creating a React Router v7 app
53. npx create-react-router@latest my-app npx create-vite@latest npm i react-router Framework mode Data and Declarative mode
59. DEMO
60. RRv7 & React 19
61. RRv7 & React 19: <Await> vs use https://reactrouter.com/how-to/suspense
62. https://github.com/aurorascharff /aurorascharff/react-router-v7- notes
63. 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
64. https://reactrouter.com/tutorials/address-book
66. THANK YOU X: @aurorascharff Bluesky: aurorascharff.no GitHub: @aurorascharff Blog: aurorascharff.no