Building for the personalisation spectrum

A presentation at WaysConf in September 2023 in Kraków, Poland by Phil Hawksworth

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

TERM 1 TERM 2 Rendering Personalisation spectrum

“…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

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

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

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?

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

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

not-Client-side Build Server Edge Client-side 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

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.

Netlify + Gatsby Gatlify Netsby Getslify Natsflibby NAMING IS HARD

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.

RENDERING ISR Incremental Static Regeneration

RENDERING ISR Incremental Static Regeneration SWR Stale While Revalidate

ODB Render View User View User ISR Render

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

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

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

/ 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

At build time Data source At request time

Rendering sugar Nuxt / Astro / Eleventy / Next and others

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

Based on system preferences or user input

Based on recent navigation You may also be interest in

Many techniques and options across the personalisation spectrum

FINALLY Lessons Amid the confusion, what did we learn?

Never choose an approach until you understand the requirements

Never choose an approach until you understand the constraints

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

Phil Hawksworth
@philhawksworth

1 / 116

Simple sites can enjoy simple architectures and hosting strategies. But what happens when we need to offer more complex, dynamic experiences to our users? Or when we need to offer localisation or personalisation? Things can get difficult when we need to build and serve these sites with confidence.

Modern rendering models and workflows make this far more approachable than before. And technologies like Edge Functions allow us to enrich our sites with more advanced features for our users.

In this talk we’ll learn about popular approaches to rendering our sites, and see how we can choose between them. And we’ll explore a practical example using Edge Functions to deliver personalised experiences to our users without compromising on performance or robustness.

Building for the personalisation spectrum

Link for this presentation:

HTML code for embedding:

Share on social media: