Building for the personalisation spectrum

Building for the personalisation spectrum Phil Hawksworth, Netlify

Oh, hello Phil Hawksworth Developer Experience, Netlify

n I d e k n i L s d a h re T Oh, hello Tw i t te r G i tH u @ PhilHawksworth Developer Experience, Netlify Bl ueS k y n o d o M as t b

Some terminology ( sorry )

TERM 1 TERM 2 Rendering Personalisation spectrum

Rendering

HTML / DOM

“…something something rendering on the server…” — Phil Hawksworth, 2013

“…ha ha ha do you just mean serving HTML?” — The person listening to Phil Hawksworth, 2013

Server Client

Robustness

The rule of least power https://unsplash.com/photos/iF5odYWB_nQ

Server Client

Build Server Client

Build Server Edge Client

“by thunder, there are a lot of ways to approach rendering!” — Phil Hawksworth, September 2023

The Personalisation Spectrum

We need the site to be personalised for the users — A requirement often expressed by my enterprise clients

What will the personalised content be, and does it currently exist? — A question I would always ask my enterprise clients

Technology Data Content Does the platform provide personalisation? Do we know who the user is, and what to show to them? Do we have all the content and ways to manage it?

It’s not all or nothing

The Personalisation Spectrum

The Personalisation Spectrum Not personalised Highly personalised Global Localised Segmented Personalised Universal content, served to all Different content served to visitors from specific locations or regions Batches of content served to identified cohorts of users Content intended for a specific individual, based on what we know about them

The rule of least power https://unsplash.com/photos/iF5odYWB_nQ

Let’s return to Rendering

A place for rendering

A time and a place for rendering

What / Where / When / How / Why

NAMING IS HARD More terminology

NAMING IS HARD

RENDERING SSG Static Site Generation Build Server Edge Client

TRADITIONAL STACK LOAD BALANCERS WEB SERVERS DATABASES VARIOUS INCREASINGLY POPULAR PROVIDERS ASSETS ON CDN BUILD AHEAD OF TIME CODE & CONTENT

RENDERING CSR Client side rendering Build Server Edge Client

When… the assets have arrived the user interacts

RENDERING SSR Server side rendering Build Server Edge Client

the-other-side Build Server Edge Client-side Client

Build Server Server-side Client-side Edge Client

Build Server Server-side? Client-side Edge Client

not-Client-side Build Server Edge Client-side Client

RENDERING SSR Server side rendering Build Server Edge Client

RENDERING ESR Edge side rendering Build Server Edge Client

TRADITIONAL STACK LOAD BALANCERS WEB SERVERS DATABASES VARIOUS INCREASINGLY POPULAR PROVIDERS SERVERLESS RUNTIME ASSETS ON CDN SERVERLESS RUNTIMES BUILD CODE & CONTENT

“so which one is best, Phil?” — Some of you, possibly, September 2023

“It depends” — Phil Hawksworth, September 2023

“Yeah. Great. Thanks.” — Some of you, possibly, September 2023

“It depends on what?” — Some of you, hopefully, September 2023

“I’m glad you ask” — Me again, September 2023

The rule of least power https://unsplash.com/photos/iF5odYWB_nQ

Best tool for digging a hole? https://unsplash.com/photos/qG6QtyOaOGQ

Serverside, doesn’t have to mean Serverful. If I can do things in advance, I will. If I can’t, but can do things serverless, I will. If I can’t, but can add a server, I will.

Increments DPR / ODB / DSG / ISR / FFS

Increments DPR / ODB / DSG / ISR

Netlify + Gatsby Gatlify Netsby Getslify Natsflibby NAMING IS HARD

Increments DPR / ODB / DSG / ISR

RENDERING DPR Distributed Persistent Rendering RENDERING RENDERING ODB DSG On-demand Builders Deferred Static Generation

DGIITBWUTFTIRTGIAATWWBE NAMING IS HARD Don’t generate it in the build. Wait until the first time it’s requested, then generate it and add it to what was built earlier.

TRADITIONAL STACK LOAD BALANCERS WEB SERVERS DATABASES VARIOUS INCREASINGLY POPULAR PROVIDERS SERVERLESS RUNTIME ASSETS ON CDN SERVERLESS RUNTIMES BUILD CODE & CONTENT

Increments DPR / ODB / DSG / ISR

RENDERING ISR Incremental Static Regeneration

RENDERING ISR Incremental Static Regeneration SWR Stale While Revalidate

ODB Render View User

ODB Render View User View User ISR Render

“Which is better, ISR or DPR”? — Some of you, possibly, September 2023

“It depends”

Deciding demands questions

What are the requirements?

EXAMPLE Social posts stash Applying different rendering techniques

Some requirements A URL for each of the 24,000 tweets Index pages listing each tweet with its URL Ability to search the tweets Retain a reasonable build time Avoid client-side rendering if possible A logical model that fits in my head SSG DPR ESR

JSON

/ Social index pages / Content pages Build Assets User JSON & Templates

www.hawksworx.com/notes/1/

Build duration 2 seconds

/ Post page view / Social index pages / Content pages Build JSON & Templates Assets DPR (ODB) User

www.hawksworx.com/note/mstdn/109913367394738833

/ Post page view / Social index pages / Content pages Build JSON & Templates Assets DPR (ODB) ESR / Search results page User

www.hawksworx.com/notes/search/?str=palo+alto www.hawksworx.com/notes/search/?str=render

Abstraction

At build time JSON At request time

At build time Data source At request time

Rendering sugar Nuxt / Astro / Eleventy / Next and others

Applying this to personalisation

The Personalisation Spectrum Global Localised Segmented Personalised

The Personalisation Spectrum Global Localised Segmented Personalised Pages generated at build time SSG

The Personalisation Spectrum Global Localised Segmented Personalised Global and localised pages generated at build time. + Users directed to appropriate URLs SSG

The Personalisation Spectrum Global Localised Segmented Personalised Global and localised pages generated at build time. + Users directed to appropriate URLs + Cookies and Edge Functions enrich views for returning users SSG ESR

The Personalisation Spectrum Global Localised Segmented Personalised Global and localised pages generated at build time. + Users directed to appropriate URLs + Cookies and Edge Functions enrich views for user preference, behaviours SSG ESR

Based on system preferences or user input

Based on recent navigation You may also be interest in

The Personalisation Spectrum Global Localised Segmented Personalised Global and localised pages generated at build time. + Users directed to appropriate URLs + Cookies and Edge Functions enrich views for user preference, behaviours SSG ESR

The Personalisation Spectrum Global Localised Segmented Personalised Global and localised pages generated at build time. + Users directed to appropriate URLs + Cookies and Edge Functions enrich views for user preference, behaviours + Personal content added via authenticated APIs SSG ESR CSR

Many techniques and options across the personalisation spectrum

FINALLY Lessons Amid the confusion, what did we learn?

There is no one right way

TRADITIONAL STACK LOAD BALANCERS WEB SERVERS DATABASES VARIOUS INCREASINGLY POPULAR PROVIDERS SERVERLESS RUNTIME ASSETS ON CDN SERVERLESS RUNTIMES BUILD CODE & CONTENT

Personalisation exists on a spectrum

Do work ahead of time if you can

You can mix and match rendering methods

Never choose an approach until you understand the requirements

Never choose an approach until you understand the constraints

Keep the rule of least power in mind

Not all of Phil’s tweets are pure gold

For more hawksworx.com netlify.com/blog/tutorials twitter.com/philhawksworth Phil Hawksworth, Netlify

Thanks Grab me for questions (or to say hello) Phil Hawksworth, Netlify findthat.at/personalisation