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

Thank you

Made with Slides.com