The Remix Evolution: How React Router v7 Enables Fast and Resilient 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 Exploring the World of Remix: A Guide to Building Resilient and Performant Web Apps Aurora Scharff @aurorascharff
2. Introduction > Aurora Scharff > Consultant at Inmeta > Microsoft MVP > Norway, Oslo > Full-stack, web-focused: 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, slick, resilient user experiences
6. > 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
7. > 10 years old and going strong > The most widely used dependency in the React Ecosystem > Shopify itself heavily depends on React Router
8. 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)
9. 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()]
15. Remix architecture
17. 1: Compiler
18. 2: HTTP Handler and Adapter > Remix 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
19. 2: HTTP Handler and Adapter
20. 2: HTTP Handler and Adapter
21. 3: Server framework > MVC-like framework, familiar to Rails/Laravel developers > Remix is the View and the Controller, model is up to you > Remix is UI-focused rather than model-focused > No split between View and Controller > Executed with “Remix Route Modules”
23. Example: Remix Route Module “jokes.tsx”
34. 3: Server framework > Remix scales down > Not every page needs a bunch of JavaScript > Not every user interaction requires more than default behavior > Most Remix apps work before JS loads in the browser > Remix Route Modules: React components with their own API route, can load and submit data to themselves on the server
35. 4: Browser framework Hydration
36. 4: Browser framework
37. 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 > Remix enhances HTML API’ like <a> and <form>, tends to work before JS
38. 4: Browser framework
39. 4: Browser framework
40. Example: Remix Route Module “jokes.tsx”
41. Example: Remix Route Module “jokes.tsx”
43. Example: Remix Route Module “jokes.tsx”
44. Progressive enhancement
45. npx create-react-router@latest my-react-router-app
50. Demo
51. Comparison to Next.js
52. pros √ Straightforward √ Inline with web standards √ Progressive enhancement out-of- the-box √ Can be upgraded to (rrv7) √ Deploy anywhere with adapters √ Some type-safe routing (rrv7) Remix
53. pros √ Straightforward √ Inline with web standards √ Progressive enhancement out-of- the-box √ Can be upgraded to (rrv7) √ Deploy anywhere easily √ Some type-safe routing (rrv7) neutrals • Less opinionated • Fewer abstractions • Customizable routing • More HTML-y and less React-y Remix
54. pros √ Straightforward √ Inline with web standards √ Progressive enhancement out-of- the-box √ Can be upgraded to (rrv7) √ Deploy anywhere easily √ Some type-safe routing (rrv7) neutrals • Less opinionated • Fewer abstractions • Customizable routing • More HTML-y and less React-y Remix cons × Less mature SSG-story (rrv7) × Early days of React Server Components (it’s coming soon) × Route bound (RRM) and less composable
56. pros √ Mature React Server Component implementation √ Mature SSG-story (ISR, etc.) √ Innovative features (PPR, “use cache”) √ Familiar to React devs √ Optimized hosting on Vercel Next.js (App Router)
57. pros √ Mature React Server Component implementation √ Mature SSG-story (ISR, etc.) √ Innovative features (PPR, “use cache”) √ Familiar to React devs √ Optimized hosting neutrals • Opinionated • Advanced file-based routing (i.e parallell routes) • More abstractions • More React-y and less HTML-y Next.js (App Router)
58. pros √ Mature React Server Component implementation √ Mature SSG-story (ISR, etc.) √ Innovative features (PPR, “use cache”) √ Familiar to React devs √ Optimized hosting Next.js (App Router) cons × More complex, server-first with RSC × Harder to learn and understand × Deviates from web standards × Migration is a rewrite neutrals • Opinionated • Advanced file-based routing (i.e parallell routes) • More abstractions • More React-y and less HTML-y
59. Remix & React 19
60. Pick what suits your needs and preferences
61. Resources “Remix Jokes” GitHub repo: aurorascharff/remix-jokes-rrv7
62. Further learning > Remix docs: https://remix.run/docs/en/main > React Router docs: https://reactrouter.com/start/framework/installation > Remix jokes tutorial: https://remix.run/docs/en/main/tutorials/jokes > Remix official tutorial: https://remix.run/docs/en/main/start/tutorial > Remix community example apps: https://github.com/remix-run/examples/
63. Resources: Remix → React Router v7 > Blog 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
64. Thank you Twitter: @aurorascharff GitHub: @aurorascharff Blog: aurorascharff.no