Create Sitecore Renderings, Layouts and their Types

When you work with Sitecore, understanding renderings, layouts, and their types is key to how pages are built and displayed. Think of it like assembling a webpage from reusable building blocks controlled by a CMS.

1. What is Rendering in Sitecore?

A rendering is a reusable component that outputs content on a page.

Examples:

• Header
• Navigation menu
• Hero banner
• Article list
• Footer

In Sitecore Experience Platform, renderings are the core building blocks of a page.

Types of Renderings

1. View Rendering

• Uses Razor (.cshtml) views
• No controller required
• Best for simple UI logic

Example: Static banner or simple text block

2. Controller Rendering

• Uses an MVC controller + action method
• Supports complex logic and data processing

Example: Product listing with filtering logic

3. Partial Rendering (Legacy)

• Based on Web Forms (.ascx)
• Older approach (less used in modern projects)

4. JSON Rendering (Headless)

• Returns structured JSON instead of HTML
• Used in headless setups (React, Next.js, etc.)

Works with Sitecore JSS

2. What is a Layout?

A layout defines the overall structure of a page.

Think of it like:

The skeleton where renderings are placed

Layout Responsibilities

• Defines placeholders (regions)
• Determines page structure (header, body, footer)
• Hosts renderings

Types of Layouts

1. MVC Layout

• Uses .cshtml
• Defines placeholders like:
  • header
  • main
  • footer

2. Web Forms Layout (Legacy)

• Uses .aspx
• Older approach

3. Headless Layout (Layout Service)

• Layout returned as JSON
• Frontend (React/Next.js) renders UI

3. What are Placeholders?

A placeholder is a dynamic region in a layout where renderings are inserted.

Example:

• main-content
• sidebar
• footer-links

Dynamic Placeholders

• Allow multiple instances
• Useful for reusable components (like multiple cards)

4. How Everything Works Together

Here’s the flow:

1. Layout defines structure
2. Placeholders define regions
3. Renderings fill those regions
4. Sitecore assembles everything into a page

In headless:

• Layout Service → JSON → Frontend renders UI

5. Rendering Parameters

Renderings can have parameters to control behavior.

Examples:

• CSS class
• Number of items to show
• Display style

Quick Analogy

• Layout = House blueprint
• Placeholders = Rooms
• Renderings = Furniture
• Rendering parameters = Furniture settings

6. Modern Sitecore Approach

Today, most projects use:

• MVC Renderings OR
• Headless (JSS + Layout Service)