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.
