The Name Is Confusing

“Lightning Web Runtime” (LWR) means different things in different contexts. Let’s untangle them.

LWR in Experience Cloud. A newer, performance-focused runtime for Experience Cloud sites. Replaces the older Aura-based runtime. Same Salesforce environment, different rendering pipeline.

LWR Hybrid. Running LWC components outside Salesforce — in a standalone Node.js app that can still interact with Salesforce. The “Hybrid” name captures that it’s LWC, but running in a non-Salesforce host.

Both are “LWR.” This article focuses on LWR Hybrid specifically.

What LWR Hybrid Enables

LWR Hybrid lets you:

  • Build web apps using LWC outside the Salesforce org.
  • Reuse LWC components between in-Salesforce and external apps.
  • Deploy to any hosting (Vercel, Netlify, AWS, Cloudflare).
  • Authenticate to Salesforce from the external app to fetch data.

The tagline: “LWC everywhere.” The reality: “LWC where it genuinely fits, with tradeoffs.”

When LWR Hybrid Makes Sense

You have LWC expertise and want to use it on external sites. If your team knows LWC and has to build a marketing site, a partner portal, or a standalone app, LWR Hybrid avoids learning a new framework.

You need sophisticated off-platform interactions. Embedded chat widgets, e-commerce front-ends, dashboards for non-Salesforce users — built with LWC and deployed externally.

Component reuse between platform and off-platform is genuinely valuable. A shared product card used on both Experience Cloud and your main website.

When It Doesn’t Make Sense

Your team is already productive in React/Vue/Svelte. LWR Hybrid is not obviously better than mainstream SPA frameworks for most needs. Switching has a cost.

Your only requirement is an Experience Cloud site. Use LWR in Experience Cloud directly; don’t externalize unless necessary.

You want broad community ecosystem. LWC’s npm ecosystem is growing but still dwarfed by React’s.

Fast hosting is critical and platform limits bother you. External hosting via LWR Hybrid works but doesn’t automatically match React’s performance-optimized tooling out of the box.

Architecture of an LWR Hybrid App

Structurally:

  • Project scaffold via the @lwc/create-lwr tool or equivalent.
  • LWC components written in the usual syntax.
  • Routing via LWR’s file-based router (similar to Next.js routes).
  • Build pipeline produces static or SSR bundles.
  • Authentication to Salesforce via standard OAuth flows.
  • Data layer — GraphQL, REST, or direct Apex REST calls to Salesforce.

Deploy the output bundle to any static host or Node.js host.

Data Access From External LWR

You can’t use @wire with Salesforce-hosted Apex directly from an external app — the wire service is Salesforce-platform-specific. Options:

REST API with fetch. Call Salesforce REST APIs directly, with OAuth bearer tokens.

GraphQL. Salesforce exposes a GraphQL endpoint; query from LWR with a GraphQL client library.

BFF pattern. Run a Backend-for-Frontend service that translates between your LWR app and Salesforce. Cleaner separation; more infrastructure.

For production apps, a BFF is usually right — it centralizes auth, rate limiting, and data shaping.

Authentication Patterns

Public-facing LWR app:

  • Guest users — limited data, often served from a cached GraphQL endpoint.
  • OAuth 2.0 login — users authenticate via Salesforce, receive token, app stores it client-side or via HttpOnly cookies.
  • Session management — refresh tokens on expiry.

Sensitive data shouldn’t pass through the client unnecessarily. Use a BFF to proxy authenticated calls.

Performance

LWR Hybrid produces fast bundles when built correctly:

  • SSR for first-paint speed (content arrives from server).
  • Hydration for interactivity.
  • Code splitting per route.
  • Asset optimization standard.

Benchmark-wise, comparable to Next.js or SvelteKit for similar workloads.

Comparison to React / Next.js

Be honest about tradeoffs.

React wins on: ecosystem size, hiring pool, community tooling, documentation depth.

LWR Hybrid wins on: reuse with in-Salesforce components, LWC’s standards-based approach (Web Components), smaller bundle sizes for equivalent apps.

Tie: performance, developer ergonomics, deploy options.

For a team with strong React skills and no LWC component reuse to leverage, React remains the safer default.

Case Studies (Hypothetical)

Partner portal. A Salesforce customer builds a partner portal on LWR Hybrid. Components used here are also used inside their internal Salesforce sales app. Single source of truth for product display, pricing cards, etc. Makes sense.

Marketing site. Marketing site in LWR Hybrid authenticates leads via Salesforce OAuth and creates records. Reasonable, but marketing-site needs (CMS integration, marketing tooling) are often better served by dedicated marketing-site builders.

Customer portal with deep CRM integration. Customer self-service portal. LWR Hybrid works, but Experience Cloud is also designed for this — evaluate both before choosing.

Migration From Other Frameworks

If you’re considering moving an existing React app to LWR Hybrid:

  • Don’t, unless there’s a clear reuse win.
  • The migration cost is always higher than “just rewriting components.” Routing, state management, data patterns all differ.
  • Incremental adoption (running LWR Hybrid alongside existing app, migrating pages gradually) is possible but complex.

Common Pitfalls

Expecting parity with Salesforce platform features. LDS, @wire, platform events — these aren’t available off-platform. Different patterns required.

Underestimating hosting and operational complexity. Salesforce manages hosting for platform apps. LWR Hybrid is yours to operate.

Overcommitting to LWR for all off-platform work. Pick the right tool per project. LWR isn’t the answer to every question.

Frequently Asked Questions

Is LWR Hybrid free?

The runtime itself is open source. Hosting costs are your responsibility. Connected App licensing for OAuth may apply depending on use case.

Can I publish LWR Hybrid to npm?

LWR Hybrid apps are deployed to hosts, not npm. Shared components can be published as npm packages and consumed by LWR and other LWC projects.

Does LWR Hybrid work with Salesforce DX?

Yes — project scaffolds can integrate with DX for the Salesforce-facing parts (Apex, metadata deployment).

What about SSR?

LWR supports server-side rendering via Node.js. SSR vs. SSG (static) is configurable per route.

Share