[Portugal Dreamin 2025] 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.

Transcript

3. Boost your site performance with Experience Delivery for LWR Fabien Taillon Partner & CTO at Texeï Salesforce MVP - Hall of Fame
4. Partner & CTO at Texeï Salesforce MVP - Hall of Fame Paris Developer Group leader French Touch Dreamin team https://www.salesforce.com/trailblazer/fabien https://www.fabientaillon.com https://www.texei.com /in/fabientaillon/ @FabienTaillon Fabien Taillon
5. 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 Why Experience Delivery
6. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com 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
7. Benefits of Server-Side Rendering @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Experience Delivery: Improve LWCs Load Time with Server Side Rendering - https://www.youtube.com/watch?v=GD3ODj8n7fg
8. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com 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
9. Benefits with Experience Delivery @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Experience Delivery: Improve LWCs Load Time with Server Side Rendering - https://www.youtube.com/watch?v=GD3ODj8n7fg
10. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Island Architecture
11. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Island Architecture NOT the architecture you can find on a famous island
12. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Island Architecture Island Architecture delivers static HTML with isolated interactive components hydrated separately for better performance.
13. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Island Architecture https://www.patterns.dev/vanilla/islands-architecture/ Island Architecture delivers static HTML with isolated interactive components hydrated separately for better performance.
14. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Island Architecture https://www.patterns.dev/vanilla/islands-architecture/ Island Architecture delivers static HTML with isolated interactive components hydrated separately for better performance. Static Content, same for everyone - Server-Side Rendered Dynamic Content - Client-Side Rendered
15. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com 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
16. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com 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
17. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com 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
18. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Make Your Components Server-Side Ready (1/2) • 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 ◦ …
19. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Make Your Components Server-Side Ready (2/2) • 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
20. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Make Your Components Server-Side Ready if (!import.meta.env.SSR) { window.addEventListener("click", function (e) { console.log("CLICKED"); }); } Make your code portable for Server-Side Rendering with import.meta.env.SSR
21. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Apex Data Providers - Provide data for Server-Side Rendering 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
22. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Example: Custom Navigation Menu • Very basic feature • Nothing dynamic • Nothing that needs to change without publishing
23. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Getting App (HTML) Example: Custom Navigation Menu without Experience Delivery
24. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Getting App (HTML) Getting LWC (Framework + components) Example: Custom Navigation Menu without Experience Delivery
25. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Getting App (HTML) Getting LWC (Framework + components) Running all JS Example: Custom Navigation Menu without Experience Delivery
26. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Getting App (HTML) Getting LWC (Framework + components) Running all JS Calling @wire Example: Custom Navigation Menu without Experience Delivery
27. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Getting App (HTML) Getting LWC (Framework + components) Running all JS Calling @wire Running Apex Example: Custom Navigation Menu without Experience Delivery
28. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Getting App (HTML) Getting LWC (Framework + components) Running all JS Calling @wire Running Apex Render everything Example: Custom Navigation Menu without Experience Delivery
29. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Getting App (HTML) Getting LWC (Framework + components) Running all JS Calling @wire Running Apex Render everything Maybe get some other computed resources like images Example: Custom Navigation Menu without Experience Delivery
30. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Example: Custom Navigation Menu with Experience Delivery Getting App (HTML) Render everything
31. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Example: 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
32. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Getting App (HTML) Getting LWC (Framework + components) Running all JS Calling @wire Running Apex Render everything Example: Custom Navigation Menu without Experience Delivery
33. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Example: Custom Navigation Menu with Experience Delivery 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
34. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com 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
35. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Debug Specific HTML tags SSR with Hydration CSR
36. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com 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 /!\ /!\
37. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Enable Experience Delivery
38. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com 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