Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[Polish Dreamin 2026] Boost your site performan...

[Polish Dreamin 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.

Avatar for Fabien Taillon

Fabien Taillon

March 20, 2026
Tweet

More Decks by Fabien Taillon

Other Decks in Programming

Transcript

  1. Who am I Fabien Taillon 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
  2. 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
  3. 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
  4. 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
  5. Use of CDN Content Delivery Network) @FabienTaillon - https://www.fabientaillon.com -

    https://www.texei.com 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
  6. 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
  7. Island Architecture Island Architecture delivers static HTML with isolated interactive

    components hydrated separately for better performance. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com https://www.patterns.dev/vanilla/islands-architecture/ Static Content, same for everyone - Server-Side Rendered Dynamic Content - Client-Side Rendered
  8. 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
  9. 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 @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com <capabilities> <capability>lightning__ServerRenderable</capability> </capabilities> <capabilities> <capability>lightning__ServerRenderableWithHydration</capability> </capabilities> No tag for CSR, default behavior
  10. 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
  11. 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
  12. 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
  13. Make Your Components Server-Side Ready Make your code portable for

    Server-Side Rendering with import.meta.env.SSR @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com if (!import.meta.env.SSR) { window.addEventListener("click", function (e) { console.log("CLICKED"); }); }
  14. Apex Data Providers @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com 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
  15. 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
  16. Custom Navigation Menu without Experience Delivery @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
  17. Custom Navigation Menu with Experience Delivery @FabienTaillon - https://www.fabientaillon.com -

    https://www.texei.com 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
  18. Custom Navigation Menu without Experience Delivery @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
  19. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com 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
  20. 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
  21. 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
  22. 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