Menu

Sitecore development company

What is layout service Sitecore Jss?

The Layout Service is a key feature in Sitecore JavaScript Services (JSS) and is fundamental to how JSS works. It is a Sitecore API that provides a JSON representation of an item’s layout. Essentially, it converts the item’s presentation details into JSON format which can then be consumed by a JSS application.

The Layout Service provides two key pieces of information:

1.Layout Data:  

This is a representation of the item’s layout, including placeholders and renderings. For each rendering, it includes the datasource item and any parameters. It allows the JSS application to construct a page by placing components into the correct placeholders.

2.Route Data:  

This includes the item’s fields, and can also include data from related items if they are linked via a datasource or a field like a Droplink. This provides the content that the components will display.

To use the Layout Service, your JSS app makes a HTTP GET request to the Layout Service endpoint, passing the route of the item it wants to get data for. For example:

https://your-sitecore-instance/sitecore/api/layout/render/jss?item=/my-page&sc_apikey={API_KEY}

The Layout Service then responds with a JSON object that includes both layout data and route data.

Here’s a simplified example of what the Layout Service might return:

/* Code Json */
{
  "sitecore": {
    "route": {
      "name": "home",
      "displayName": "Home",
      "fields": {
        "title": {
          "value": "Welcome to our website!"
        }
      },
      "placeholders": {
        "jss-main": [
          {
            "componentName": "SampleComponent",
            "fields": {
              "heading": {
                "value": "Hello, world!"
              }
            }
          }
        ]
      }
    }
  }
}
/* Code */

The `jss-main` placeholder includes a `SampleComponent` with a `heading` field.

The Layout Service enables the “decoupling” of the frontend and backend of a Sitecore site, facilitating the development of headless applications using JSS.