Course · Premium · Minimum Yearly plan

Client-Side State and Data Sync

Keep a page fast and correct when its data lives on a server. Query caches, normalized stores, server rendering, optimistic updates, sync and offline, one step at a time.

Lessons

Steps

About 2 hours

Duration

Your own

Pace

Get a Yearly or Lifetime plan to start

Short on time? Read the recap and interview answers

Curriculum

01
UI state and server state
Yearly or Lifetime plan
UI state belongs to the browser. Server state belongs to the server. Every component must see the same copy of it.
02
Normalize repeated records
Yearly or Lifetime plan
Every response that lists question 42 sends its own copy. A normalized store keeps one, by id.
03
Query keys and shared requests
Yearly or Lifetime plan
One key per piece of server data. Everyone who asks for it shares one request.
04
Stale-while-revalidate
Yearly or Lifetime plan
Show the cached copy at once, then check the server in the background.
05
Server rendering: loaders first, a cache when needed
Yearly or Lifetime plan
With SSR, loaders fetch on the server and rerun after a write. Add a client cache only where loaders fall short.
06
Update or refetch after a write
Yearly or Lifetime plan
A write leaves old copies in the cache. Update the ones you know, and refetch the rest.
07
Optimistic updates and rollback
Yearly or Lifetime plan
Show a change before the server confirms it, and undo it cleanly when the server says no.
08
Out-of-order responses
Yearly or Lifetime plan
The last request you send isn't always the last response you get.
09
Sync across tabs and devices
Yearly or Lifetime plan
Every tab and device has its own cache. Keep them in step with the server, and with each other.
10
Persisted caches and offline writes
Yearly or Lifetime plan
A reload empties the cache. Save it in the browser, and keep writes made offline until the network returns.
11
Choose where server data lives
Yearly or Lifetime plan
Every option keeps server data right in its own way. Pick per kind of data, not once for the whole app.
Final
The data sync challenge
Yearly or Lifetime plan
Twelve questions from across the course. Pass it to claim your certificate.