Recharge
What do I do with my spare time
Outline
Something has existed for a long time but we ignore
1
BFCache
SPA, MPA, and more than these
2
Rendering on web
Competing Against Luck
The Power of moments
The Model Thinker
3
Books I read
BFCache
BFCache
Back Forward Cache
Optimize for the instant back and forward navigation
Aim to improve UX
BFCache
Browser Support
Supported in Firefox/Safari for many years
Chrome start to support in version 96 (2021 Q4)
BFCache
Browser Support
https://www.youtube.com/watch?v=cuPsdRckkF0
BFCache
Compare to HTTP Cache
HTTP Cache cache the resources
BFCache caches an entire snapshot
BFCache
How BFCache cache
JavaScript Stack & Heap
No need to re-parse DOM/CSSOM
No need to re-evaluate JS
BFCache
Observe BFCache
Browser Pageshow event
event.persisted
Chrome dev tool
BFCache
Observe BFCache
https://web.dev/bfcache/
BFCache
Observe BFCache
https://web.dev/bfcache/
BFCache
Pageview tracking issue
https://web.dev/bfcache/
BFCache
Never use the unload event
BFCache may disabled due to it
BFCache
Use beforeunload conditinoally
Rendering On web
Rendering on web
https://web.dev/rendering-on-the-web/
Server Rendering
https://web.dev/rendering-on-the-web/
Server Rendering
https://web.dev/rendering-on-the-web/
Flexible
TTI = FCP
Static Site Generators
https://jamstack.org/generators/
Static Site Generators
https://jamstack.org/generators/
Static Site Generators
Static Site Generators
https://jamstack.org/generators/
CDN Cache
No need to do the render/API call
No render server needed (JAM Stack)
Fully Client-Side Rendering
https://jamstack.org/generators/
Fully Client-Side Rendering
https://jamstack.org/generators/
Blank page (TTI >>> FCP)
Fast TTFB
Prerendering + CSR
https://jamstack.org/generators/
Prerendering static skeleton
Prerendering for SEO only
Server-Side Rendering + Rehydration
Server-Side Rendering + Rehydration
Recap
The More
MPA + Pjax
The More
Incremental Static Regeneration
https://vercel.com/docs/concepts/next.js/incremental-static-regeneration
The More
https://vercel.com/docs/concepts/next.js/incremental-static-regeneration
The More
https://vercel.com/docs/concepts/next.js/incremental-static-regeneration
Books I read
books
books
