What is Lightning Web Runtime(LWR) in Salesforce?

Introduced in Spring 21, Experience Cloud's Build Your Own (LWR) Templates are lightweight templates that use the Experience Cloud's Lightning Web Runtime (LWR) platform. With this template, you can now provide your customers with fast CRM-friendly experiences such as fast marketing websites, microsites, and portals with sub-second page load times. 

What Pain Point does it Address? 

The problem LWR solves, apart from delivering at incredible speeds, is that it gives you more precise (“pixel perfect”) control over appearance/layout. 

Experience Cloud has an existing Build Your Own template that supports Aura and Lightning web components. However, the Build Your Own (LWR) template is based solely on the Lightning Web Components programming model. This template only supports Lightning web components, so it comes with fewer default components than the existing Build Your Own and OTB templates.

What about the Standard Pages? 

But we Can Add new Pages if we Want by clicking the new Page button at the bottom of the page:

Don't forget to check out: Salesforce Winter '23 Flow Updates

There are three types of pages, which we can create in LWR SITes: 

1. Standard Pages 
2. Object Pages 
3. CMS Content Pages 

1) The Lightning Web Runtime (LWR) Theme System allows you to modify basic and custom Lightning web components for a consistent look and feel across your LWR sites. The system makes it easy to apply branding across your site using dxp styling hooks mapped to theme panel properties.

2) SLDS can have few restrictions on how it can be rendered. SLDS references can now be completely removed.

Template Limitations: 

1) Unsupported Features and Settings 

2) Unlike the standard temples, the LWR template doesn’t come up with the default navigation menu. Create responsive navigation menus using LWC, Apex Controllers, and custom CSS. Custom navigation menus are fully configurable in Experience Builder. i.e. new menu items could be added.

3) Record list and record detail components. 

4) Audiences and page variations 

LWR templates give developers the flexibility to create pixel-perfect websites. LWR sites make extensive use of caching to improve the performance and scalability of live sites. This template is a barebones template as it only supports standard LWC components and a limited set of standard pages. This template is ideal for developers familiar with developing Lightning web components and working with Salesforce DX, the UI API, and Apex. 

How it is Different from Lightning Web Component (LWC)? 

• In LWC component includes, Index files, Scripts files, and some other files but in LWR Sites only a single Application File is built. 
• Commands for creating project is Different in both LWR And LWC without using Salesforce. 

           For LWC

npx create-app "Project Name" 
     npm run watch -To run the LWC Project

           For LWR     

npm init lwr 
npm install 
npm run dev

• The Project Structure in LWR is Very Light weighted in Comparison with LWC  
• It is very Simple and Clear 
• It is Fast 

Check out another amazing blog by Mohit here: What is the Database.Stateful Interface in Batch Apex?

How many Lightning Components Are there in Experience Cloud? 

There Are 2 Lightning run times: 

1) LWR Runtime  

2) Aura Runtime 

LWR runtime works only on LWC Components whereas Aura Runtime works with both Aura and LWC components. 

In Aura Runtime we do not need to republish our site again and again but in LWR Runtime we have republished our sites for every change. It's because of the way it stores the information in CDN as Cache files. 

LWR is 3 times faster than Aura Runtime.  

We can Fetch the data in LWR Template through using Salesforce CMS Workspace 

Example: Fetch the account id and Name From  Salesforce to LWR templates with the help of Grid & Tiles.  And insert a image through CMS Workspace.