LWR Compile-Time Data

After you understand the basics about templating and layouts with LWR, you can use the various data provided by LWR for more complex scenarios. The place to start is with context objects.

Understand Context Objects

LWR uses a route’s templates and context to render the response for a page request.

The context object that LWR passes into HTML and Nunjucks templates contains data from several locations. This data is merged into a single object in this order:

Markdown is a little different in this case. Context isn't passed into Markdown templates unless you use a custom route handler. Route handlers are an advanced topic, so for now know that a route handler is a function that is configured for a route, which allows you to customize the page response.

Global Data

You can pass any static global context into all HTML or Nunjucks templates within an application from the file system.

This global data is then added to the context.

Front Matter

LWR reads any front matter out of each HTML/Nunjucks template and adds it to the context. These properties are local to the template. The following properties have special meaning:

  • layoutTemplate: Sets the layout template inside a content template. This value is overridden by the layoutTemplate set on the route. This property does work for Markdown templates.
  • immutable: Set this property to false if the template contents are mutable; the default is true. Nunjucks templating allows mutable constructs to be embedded in a template's content, for example, random and cycler. Due to this capability, templates that use these features must mark the template as mutable so LWR can modify the cacheability of the page response.

Page Information

LWR can pass information about the page from the current route and request.

  • id: route.id
  • title: set to the first defined value of the following:
    • properties.title from the route or viewParams.title from the route handler
    • filename from route.contentTemplate
    • "LWR App"
  • url: the request URL, relative to the origin

Example 1: When the current browser location is http://localhost:3000/ and the route is:

Then, the page information is:

Example 2: When the current browser location is http://localhost:3000/recipes?sort=desc and the route is:

Then, the page information is:

The object is accessible via the page context variable in the HTML/Nunjucks templates:

Markdown Metadata

Markdown content templates produce context on their headings, which can be accessed from an HTML or Nunjucks layout template. Information on each heading starting with two or more # is included. For example:

produces:

The object is accessible via the headings context property in HTML/Nunjucks layout templates:

Static Route Properties

You can pass static context into HTML/Nunjucks templates from a route via its properties:

Route Handler Parameters

You can customize the page response using a route handler. A route handler is a function that is configured for a route.

Using route handlers is an advanced topic and isn't covered yet.

LWR

LWR automatically passes two context object properties:

  • body: Available in layout templates, a string containing the rendered page content that is output from the route's contentTemplate or rootComponent.
  • lwr_resources: A string containing all the scripts required to run your application, such as the Lightning Web Component library and LWR client resources. If this string is excluded from the page response, embedded Lightning web components don't render.
    • Note: The lwr_resources property is optional. If you have purely static HTML content and don’t need any Lightning web components, module resolution, or other LWR features, you don't require LWR resources in your layout. In the static site you created as your first project, the main_layout.njk file doesn't include lwr_resources.

Here are examples of HTML and Nunjucks layout templates that use both LWR properties:

HTML:

Nunjucks: