A discussion our utilising edge compute to turbo charge personalisation

1. Netlify
Henry Smith
Solution Engineer
Unlocking Personalisation
on the Edge

2. Connect all your tools,
services, and code into
one workflow.
Run it all from the edge,
close to each user
Build sites, stores, and
apps in record time.
1 2 3
Connect Build Run
One Git-based workflow for all your code, tools, & services
One environment from dev to production.
Netlify
One workflow. One platform.
Netlify Web Development Cloud

3. Personalisation by Numbers
71% of customers expect personalisation
(McKinsey)
of digital businesses are
investing in personalisation
(Forrester)
89%
report an uplift
from personalisation
(Econsultancy)
4 in 5
of companies experience a
rise in conversion rates after
personalising their website
(Econsultancy)
94%
Netlify

4. Personalise
Without
Compromise
Netlify
out

5. Location Matters
Client-Side Server-Side
Edge
✔ Simple
✔ Scalable
✗ Poor performance
✗ Content Flash
✗ Less secure
✗ Single channel
✔ Access to backend
✔ Major changes
✔ Secure
✔ Multi-channel
✗ Average performance
✗ Scale
✔ Performance
✔ Scalable
✔ Secure
✔ Access to backend
✔ Multi-channel
✔ SEO

6. Edge Functions
CDN
Origin
Netlify Functions
Client Request
Netlify

7. Edge Functions
CDN
Origin
Netlify Functions
V8 Deno Runtime
Fast execution and low latency
Suitable for:
▪ Localisation
▪ Suggested/Personalised content
▪ A/B Testing
▪ Redirects/Rewrites
▪ Authentication
JavaScript & TypeScript Support
Netlify

8. https://personalise.netlify.app/

9. if (pathname === "/") {
if (personalisationCookie) {
return NextResponse.redirect(`${origin}/home`);
}
} else {
if (!personalisationCookie) {
return NextResponse.redirect(`${origin}/`);
}
}
Cookie Redirect
Cookie Present ?
No Yes

10. if (bucket === "b") {
response.rewriteHTML("#main-body", {
element(element) {
element.setAttribute("style",
"background-color:#3aafa9; color:white;");
},
});
}
A/B Test
Automated bucket assignment based
on cookies
Rewriting static pages on the edge
depending on bucket

11. Personalised Greeting
const message = `Welcome ${firstName} ${lastName}`;
response.setPageProp("message", message);
response.replaceText("#personalBanner", message);
Rewrite inner text to match users
name inside an edge function.

12. Cached Content
Prefetch
On-demand Builder
/.netlify/builders/generateBlog/cars
Submit
Cached JSON
{
“title”: …
“post”: …
“image”: …
}
Edge Function
■ Pre-generate content from
ChatGPT onBlur
■ Cache JSON response using on-
demand builder
■ Fetch cached content on /home
load
■ Populate content using Edge
function setPageProps

13. Localisation
■ Suggestion of products
based on the location of the
request.
■ Changing the currency.
■ Redirecting to specific
locale
const currencyOverride =
middlewareRequest.nextUrl.searchParams.get("country");
let country = currencyOverride ? currencyOverride :
nextRequest.geo.country;
let currency = getParamByISO(country, "symbol");
response.setPageProp("currency", currency);
response.replaceText("#currency", currency);
UK
France