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

[Portugal Dreamin 2025] Boost your site perform...

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

Avatar for Fabien Taillon

Fabien Taillon

June 27, 2025
Tweet

More Decks by Fabien Taillon

Other Decks in Programming

Transcript

  1. Boost your site performance with Experience Delivery for LWR Fabien

    Taillon Partner & CTO at Texeï Salesforce MVP - Hall of Fame
  2. 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
  3. 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
  4. @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
  5. 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
  6. @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
  7. 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
  8. @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.
  9. @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
  10. @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
  11. @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
  12. @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
  13. @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 ◦ …
  14. @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
  15. @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
  16. @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
  17. @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
  18. @FabienTaillon - https://www.fabientaillon.com - https://www.texei.com Getting App (HTML) Getting LWC

    (Framework + components) Example: Custom Navigation Menu without Experience Delivery
  19. @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
  20. @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
  21. @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
  22. @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
  23. @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
  24. @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
  25. @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
  26. @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
  27. @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
  28. @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 /!\ /!\
  29. @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