Handling Data in React Applications

in 2023 and beyond

Eve Porcello

eve@moonhighway.com

@eveporcello

Agenda

• React Data Fetching
• GraphQL Clients
• @defer & @stream
• Server Components Intro
• Next.js App Router
• Data Fetching with Next.js
• Server Components-ifying Libraries

Agenda

• 9:00am - Start

• 10:30 - 10:45 - Break

• 12:15ish - Lunch (an hour)

• 2:45 - 3:00 - Break

• ~4:00 - End

Intros

• Your Name

• Where You're From

• What You're Hoping to Learn

Goals for today

• Survey the latest ways that data is handled in a React application
• Get hands on experience using everything
• Make choices from there

Client Apps (SPA)

Benefits

• Navigation without refresh
• Strong separation between server and client responsibilities
• Can achieve performance wins with lazy loading, code splitting, preloading

Drawbacks

• The bigger the bundle, the slower the app
• SEO Limitations
• Need additional help with data fetching/caching