Sitecore‘s „HTML Cache“ feature on renderings has been a great tool since the early days of Sitecore. While in the world of headless, we‘re actually caching JSON instead of HTML, the functionality of this cache remains the same:

• On first request, render the rendering and save it‘s output to a memory cache
• Clear entire memory cache if a publish job runs

There are caching variants and more but I won‘t go deeper into this topic as it has been covered many times already. Check the Sitecore docs for details.

Caveat: Renderings containing placeholders

Caching makes things fast, let‘s cache ALL THE THINGS! Not quite!
If a rendering contains placeholders, having the rendering‘s output cached will prevent any child renderings from being re-rendered. While this certainly makes things faster, you won‘t be able to use personalisation or any other kind of dynamic data on these child renderings.

Don‘t cache renderings containing placeholders.

Verify

Using Sitecore Headless / JSS has made it easy to determine which renderings contain a placeholder. This is due to the fact that we have to define placholders on each rendering. (This was not the case with MVC)

Use this Powershell script to create a report of problematic renderings:

$master = [Sitecore.Configuration.Factory]::GetDatabase("master");
$template = "{04646A89-996F-4EE7-878A-FFDBF1F0EF0D}" # JSON Rendering
$in = new-object System.Collections.Generic.List[Object]

Get-ChildItem $rootItem.FullPath -Path "/sitecore/layout/Renderings" -recurse |
Where-Object {
    ($_.TemplateId -eq $template) -and ($_["Cacheable"] -eq "1") -and ($_["Placeholders"] -ne "")
} |
ForEach-Object {
     $in.add($_);
}

$in | Show-ListView -Property   @{ Name="ID"; Expression={$_.ID}},
                                @{ Name="Path"; Expression={$_.Paths.FullPath}},
                                @{ Name="Placeholders"; Expression={$_.Placeholders}},
                                @{ Name="Cacheable"; Expression={$_.Cacheable}}

TL;DR