[London's Calling 2026] Boost your site performance with Experience Delivery for LWR

Discover how to leverage the new Experience Delivery feature for LWR to develop blazing fast sites. We’ll have a look at how you can make use of server-side rendering (SSR), content delivery network (CDN) or even Islands Architecture using hydration capabilities to achieve your goal. These obscure terms will be crystal clear for you at the end of this session.

1. #LDNsCall #LC26 Boost your site performance with Experience Delivery for LWR Fabien Taillon Partner & CTO, Texeï Salesforce MVP - Hall of Fame
2. Who am I Fabien Taillon - Partner & CTO at Texeï - Salesforce MVP - Hall of Fame - Paris Developer Group leader /in/fabientaillon @FabienTaillon https://www.fabientaillon.com https://www.texei.com
3. Why Experience Delivery Customers need faster sites built with Experience Cloud • Experience Cloud based on Aura template was slow • Lightning Web Runtime (LWR) was already a great improvement → Still need to enable sub-seconds page loads and improved FCP (First Contentful Paint) @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
4. LWR and Experience Delivery Concepts LWR • Heavy use of caching and CDN ◦ Think LWR vs Aura with publishing needed after LWC change Experience Delivery • SSR (Server-Side Rendering): render as much as possible server-side to improve page load time client-side • Hydration: JavaScript process of attaching event listeners and client-side functionality to server-rendered HTML so it becomes fully interactive in the browser • Island Architecture @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
5. Benefits of Server-Side Rendering Experience Delivery: Improve LWCs Load Time with Server Side Rendering - https://www.youtube.com/watch?v=GD3ODj8n7fg @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
6. Use of CDN (Content Delivery Network) Leverage Content Delivery Network(CDN) With Experience Cloud For An Enhanced User Experience https://www.learnexperiencecloud.com/article/Leverage-Content-Delivery-NetworkCDN-With-Experience-Cloud-For-An-Enhanced-User-Experience @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
7. Benefits with Experience Delivery Experience Delivery: Improve LWCs Load Time with Server Side Rendering - https://www.youtube.com/watch?v=GD3ODj8n7fg @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
8. Island Architecture @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com NOT the architecture you can find on a famous island
9. Island Architecture Island Architecture delivers static HTML with isolated interactive components hydrated separately for better performance. https://www.patterns.dev/vanilla/islands-architecture/ Static Content, same for everyone - Server-Side Rendered Dynamic Content - Client-Side Rendered @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
10. Island Architecture for LWC 3 types of options for LWC: • Server-Side Rendering (SSR) only - static page elements that don’t require hydration, like images or a menu… • Server-Side Rendering (SSR) with hydration - interactive page elements, like a carousel ◦ Hydration needed when: ▪ Use of renderedCallback ▪ @wire changing rendering ▪ Dynamic text or attributes changing on the client (<div>{dynamicText}</div>) ▪ Attaching events… • Client-Side Rendering (CSR) only - elements needing client-side APIs and data that can’t be rendered on the server side @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
11. Island Architecture for LWC Related tag in*.js-meta.xml • Server-Side Rendering (SSR) only • Server-Side Rendering (SSR) with hydration • Client-Side Rendering (CSR) only <capabilities> <capability>lightning__ServerRenderable</capability> </capabilities> <capabilities> <capability>lightning__ServerRenderableWithHydration</capability> </capabilities> No tag for CSR, default behavior @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
12. Rendering rules Component compositions will impact rendering • SSR-only components contain other SSR-only components • CSR-only components can contain any type of component ◦ But everything will be rendered Client-Side • SSR with Hydration components can contain SSR-only components ◦ But everything will be hydrated @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
13. Make Your Components Server-Side Ready • Can’t have any dependencies on browser APIs ◦ Window ◦ Document ◦ selector functions (template.querySelector...) ◦ … • asynchronous code doesn’t complete during SSR ◦ Promises ◦ async/await ◦ @wire ◦ XMLHttpRequest ◦ fetch ◦ … @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
14. Make Your Components Server-Side Ready • No user specific modules ◦ @salesforce/user ◦ @salesforce/userPermission ◦ … • Use light DOM (recommended) or native shadow DOM • Use Supported Base Components • SSR always runs as a guest regardless of the user requesting the page on a mobile or as an authenticated user @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
15. Make Your Components Server-Side Ready Make your code portable for Server-Side Rendering with import.meta.env.SSR if (!import.meta.env.SSR) { window.addEventListener("click", function (e) { console.log("CLICKED"); }); } @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
16. Apex Data Providers import { LightningElement, api } from "lwc"; export default class HeaderExperienceDelivery extends NavigationMixin(LightningElement) { @api myValue; ... } Apex public class ApexDataProvider { @AuraEnabled(cacheable=true scope='global') public static String getValue() { String myValue; /* Do stuff */ return myValue; } } LWC AppBuilder config Provide data for Server-Side Rendering @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
17. Example: Custom Navigation Menu • Very basic feature • Nothing dynamic • Nothing that needs to change without publishing @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
18. Custom Navigation Menu without Experience Delivery Getting App (HTML) Getting LWC (Framework + components) Running all JS Calling @wire Running Apex Render everything Maybe get some other computed resources like images @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
19. Custom Navigation Menu with Experience Delivery Getting App (HTML) Render everything • Everything ready as plain text HTML ◦ Menu Items ◦ Images ◦ … • Nothing needs to be queried or calculated • Everything can be cached to nearby CDN @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
20. Custom Navigation Menu without Experience Delivery Getting App (HTML) Getting LWC (Framework + components) Running all JS Calling @wire Running Apex Render everything @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
21. Getting App (HTML) Getting LWC (Framework + components) Running all SYNCHRONOUS JS Calling APEX DATA PROVIDERS Running Apex Render everything Getting App (HTML) Experience Builder Done only once at publish Custom Navigation Menu with Experience Delivery @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
22. Debug Linting ESLint plugin Audit ls force-app/main/default/lwc | xargs lwr audit --components SSR Playground npx -p @lwc/wds-playground playground namespace/component @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
23. Debug Specific HTML tags SSR with Hydration CSR @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
24. Limitations • Beta • Unsupported in Developer Edition and scratch orgs • Some Experience Cloud feature not supported ◦ Custom sitemaps, canonical URLs, and SEO-friendly URL slugs ◦ Authentication for enhanced domains ◦ Identity providers for custom domains ◦ Component variations ◦ Branding and themes ◦ Mobile Publisher ◦ Site archiving ◦ Login IP range restrictions ◦ Down for maintenance • /!\ /!\ Static assets that are available on authenticated pages are cached publicly and therefore potentially available to unauthenticated guest users /!\ /!\ @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
25. Enable Experience Delivery @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
26. Resources Experience Delivery Developer Guide https://resources.docs.salesforce.com/rel1/doc/en-us/static/pdf/experience_delivery.pdf Islands Architecture https://www.patterns.dev/vanilla/islands-architecture LWR SSR https://developer.salesforce.com/docs/platform/lwr/guide/lwr-ssr.html LWR CLI https://www.npmjs.com/package/lwr ESLINT LWC SSR https://github.com/salesforce/eslint-plugin-lwc/tree/master/docs/rules/ssr @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com
27. #LDNsCall #LC26 Q&A Fabien Taillon Partner & CTO, Texeï Salesforce MVP - Hall of Fame
28. #LDNsCall #LC26 Thank You Fabien Taillon Partner & CTO, Texeï Salesforce MVP - Hall of Fame