The Remix Evolution: How React Router v7 Enables Fast and Resilient Apps

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Introduction > Aurora Scharff > Consultant at Inmeta > Microsoft MVP > Norway, Oslo > Full-stack, web-focused: active Next.js developer - using Remix on the side

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, slick, resilient user experiences

Slide 6

Slide 6 text

> 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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 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 9

Slide 9 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 10

Slide 10 text

No content

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

Remix architecture

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

1: Compiler

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

2: HTTP Handler and Adapter

Slide 20

Slide 20 text

2: HTTP Handler and Adapter

Slide 21

Slide 21 text

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”

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Example: Remix Route Module “jokes.tsx”

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

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

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

Slide 35

Slide 35 text

4: Browser framework Hydration

Slide 36

Slide 36 text

4: Browser framework

Slide 37

Slide 37 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 > Remix enhances HTML API’ like and , tends to work before JS

Slide 38

Slide 38 text

4: Browser framework

Slide 39

Slide 39 text

4: Browser framework

Slide 40

Slide 40 text

Example: Remix Route Module “jokes.tsx”

Slide 41

Slide 41 text

Example: Remix Route Module “jokes.tsx”

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Example: Remix Route Module “jokes.tsx”

Slide 44

Slide 44 text

Progressive enhancement

Slide 45

Slide 45 text

npx create-react-router@latest my-react-router-app

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

Demo

Slide 51

Slide 51 text

Comparison to Next.js

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

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)

Slide 57

Slide 57 text

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)

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Remix & React 19

Slide 60

Slide 60 text

Pick what suits your needs and preferences

Slide 61

Slide 61 text

Resources “Remix Jokes” GitHub repo: aurorascharff/remix-jokes-rrv7

Slide 62

Slide 62 text

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/

Slide 63

Slide 63 text

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