Tweet
Tweet

Slide 1

Slide 1 text

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 > Norway, Oslo > Consultant at > Currently hired at > 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, 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, slick, 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

No content

Slide 12

Slide 12 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 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

No content

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

React Router v7 “modes”

Slide 21

Slide 21 text

React Router v7 “modes”

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Remix React Router (framework mode) architecture

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

1: Compiler

Slide 26

Slide 26 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 like Vercel, Netlify etc. + non-Node.js environments like Cloudflare Workers

Slide 27

Slide 27 text

2: HTTP Handler and Adapter https://github.com/remix-run/react-router-templates/blob/main/node-custom-server/server/app.ts

Slide 28

Slide 28 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 29

Slide 29 text

No content

Slide 30

Slide 30 text

Example: RR Route Module “notes.tsx”

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

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 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 > RR Route Modules: React components with their own API route, can load and submit data to themselves on the server

Slide 42

Slide 42 text

4: Browser framework Hydration

Slide 43

Slide 43 text

4: Browser framework

Slide 44

Slide 44 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 45

Slide 45 text

4: Browser framework

Slide 46

Slide 46 text

4: Browser framework

Slide 47

Slide 47 text

Example: RR Route Module “notes.tsx”

Slide 48

Slide 48 text

Example: RR Route Module “notes.tsx”

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

Example: RR Route Module “notes.tsx”

Slide 51

Slide 51 text

“Progressive Enhancement”

Slide 52

Slide 52 text

Creating a React Router v7 app

Slide 53

Slide 53 text

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

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

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

DEMO

Slide 60

Slide 60 text

RRv7 & React 19

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 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

Slide 64

Slide 64 text

https://reactrouter.com/tutorials/address-book

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

THANK YOU X: @aurorascharff Bluesky: aurorascharff.no GitHub: @aurorascharff Blog: aurorascharff.no