Compile-Time Data in LWR on Node.js

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.

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:

Global Data
Front Matter
Page Information
Markdown Metadata
Static Route Properties
Route Handlers
LWR Properties

When it comes to context objects, Markdown templates are a little different from HTML and Nunjucks templates. Context isn't passed into Markdown templates unless you use a route handler, which is a way of customizing the page response. "Route Handler Functions" in Server-Side Routing in LWR discusses this advanced topic.

From the file system, you can pass any static global context data into your app's content and layout templates. This data is available to all HTML or Nunjucks templates within your application. It is not available to component HTML templates, however.

This global data is then added to the context.

LWR reads any front matter out of a template and adds it to the context object. Front matter values are local to the template.

LWR uses the gray-matter parser to process front matter. This allows you to use YAML, JSON, TOML, or CoffeeScript to format front matter, or you can even set custom delimiters. The following is a YAML front matter example:

LWR has predefined the following front matter variables:

Variable	Supported Template Languages	Notes
`layoutTemplate`	HTML, Nunjucks, Markdown	Sets the layout template inside a content template. This value is overridden by the `layoutTemplate` set on the route.
`immutable`	Nunjucks	Set this variable 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.

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 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, this Markdown:

Produces this context object:

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

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

Context objects can optionally contain route handlers. Route handlers are functions that allow you to customize the page response for a route. "Route Handler Functions" in Server-Side Routing in LWR discusses this advanced topic.

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 (no 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: