2022

@AtilaFassina

Day 5 — States and Layouts

@AtilaFassina

DATA

FETCH

@AtilaFassina

↪ Declarative Data-Fetch

↪ Auto-Update

↪ Cache-Handling

@AtilaFassina

OPTIMISTIC

MUTATIONS

@AtilaFassina

click
mutation event
mutation request
response
update content
woohoo!

@AtilaFassina

click
mutation event
mutation request
response
update content
woohoo!

@AtilaFassina

click
mutation event
mutation request
💥
update content
woohoo!
update content
Pardon. retry?

@AtilaFassina

getServerSideProps
QueryClient
initialData

Hydrate page with data

cache query
mutate

Re-Render page w/ new data

update cache

Re-Render page w/ old data

pull from cache
warn user

@AtilaFassina

LAYOUT

PATTERN

@AtilaFassina

next.js lifecycle

_document.tsx

_app.tsx

layout.tsx

page1.tsx

component1

component2

component3

...

page2.tsx

component1

component4

component5

...

Renders once

Re-Renders on route change

Re-Renders on global state

Re-Renders on route state

Re-Renders on component state

Smashing Masterclass Day 5

By Atila

Smashing Masterclass Day 5

  • 299