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

Slide 1

Slide 1 text

The Remix Evolution: How React Router v7 Enables Fast and Resilient Apps Aurora Scharff @aurorascharff

Slide 2

Slide 2 text

Aurora Scharff > Norway, Oslo > Senior Consultant at Crayon Consulting > React Certification Lead at certificates.dev > Active RSC developer with Next.js App Router

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

https://remix.run/

Slide 5

Slide 5 text

> 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

Slide 6

Slide 6 text

https://remix.run/_docs/routing

Slide 7

Slide 7 text

> 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

Slide 8

Slide 8 text

> 10 years old and going strong > The most widely used dependency in the React Ecosystem > Shopify itself heavily depends on React Router

Slide 9

Slide 9 text

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)

Slide 10

Slide 10 text

Vite: Next Generation Frontend Tooling > Fast dev experience, optimized builds, rich plugin ecosystem > Risen substantially in popularity > Has replaced Create React App (CRA)

Slide 11

Slide 11 text

> 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()]

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

https://react.dev/blog/2025/02/14/sunsetting-create-react-app

Slide 19

Slide 19 text

React Router v7 “modes”

Slide 20

Slide 20 text

React Router v7 “modes”

Slide 21

Slide 21 text

Rendering strategies Server-side Rendering Static pre-rendering Single Page Application

Slide 22

Slide 22 text

Remix React Router (framework mode) architecture

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

1: Compiler

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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”

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Example: RR Route Module “notes.tsx”

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

4: Browser framework Hydration

Slide 41

Slide 41 text

4: Browser framework

Slide 42

Slide 42 text

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 and , tends to work before JS

Slide 43

Slide 43 text

4: Browser framework

Slide 44

Slide 44 text

4: Browser framework

Slide 45

Slide 45 text

Example: RR Route Module “notes.tsx”

Slide 46

Slide 46 text

Example: RR Route Module “notes.tsx”

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

Example: RR Route Module “notes.tsx”

Slide 49

Slide 49 text

“Progressive Enhancement”

Slide 50

Slide 50 text

Creating a React Router v7 app

Slide 51

Slide 51 text

npx create-react-router@latest my-app npx create-vite@latest npm i react-router Framework mode Data and Declarative mode

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

DEMO

Slide 58

Slide 58 text

RRv7 & React 19

Slide 59

Slide 59 text

RRv7 & React 19: vs use https://reactrouter.com/how-to/suspense

Slide 60

Slide 60 text

React “meta-frameworks”

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Pick what suits your needs and preferences

Slide 63

Slide 63 text

https://github.com/aurorascharff /react-router-v7-notes

Slide 64

Slide 64 text

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