Render Caching for Drupal 8

1. Render Caching in Drupal 8
by. John Doyle
10/2/2017
1/26/17

2. Who are we?
Full service provider of
branding, marketing, website
design & development, and
strategic communication
services
Proven methodology for
positioning companies to
scale and succeed in an
increasingly digital
environment
Trusted agency partner to
dozens of recognized
associations and
corporations

3. Fortune 500

7. Awards

8. My Background
・Credentials: B.S. Computer Science from
Virginia Tech
・Position: Chief Technology Officer @
Bluetext
・Interests: IoT, Gaming, Snowboarding,
Hiking, Fishing, etc…

9. Why are we here?

10. Why are we here?
・Render Arrays…
・Recap of Render Caching in D7
・Drupal 8 Render Caching
・Random Useful Things
10

11. Drupal 7 Render Arrays

13. Render Caching in Drupal 7
・Render Arrays provide a #cache property
・Pre-render property is used to handle complex logic before it
gets cached in the render array
13

14. Example Render Array in Drupal 7
function render_example_arrays() {
$interval = 60;
$demo['cache demonstration'] = array(
'#markup' => '',
'#pre_render' => array('render_example_cache_pre_render'),
'#cache' => array(
'keys' => array('render_example', 'cache', 'demonstration'),
'bin' => 'cache',
'expire' => time() + $interval,
'granularity' => DRUPAL_CACHE_PER_PAGE |
DRUPAL_CACHE_PER_ROLE,
),
);
}
14
・ 'keys' => an array of keys which will be
concatenated to form the cache key.
・ 'bin' => the name of the cache bin to be
used (as in 'cache' or 'cache_page', etc.
・ 'expire' => a Unix timestamp indicating
the expiration time of the cache.
・ 'granularity' => a bitmask indicating the
cache type. This should
be DRUPAL_CACHE_PER_PAGE, DRUPA
L_CACHE_PER_ROLE,
or DRUPAL_CACHE_PER_USER

15. Drupal 7 Render Cache Module
・#pre_render is used for
expensive callback functions
・If the logic was executed
in #markup or in the
render_example_arrays
( ) function, it would
never be cached.
・#cache is used to define
cache settings
15
function render_example_arrays() {
$interval = 60;
$demo['cache demonstration'] = array(
'#markup' => '',
'#pre_render' => array('render_example_cache_pre_render'),
'#cache' => array(
'keys' => array('render_example', 'cache', 'demonstration'),
'bin' => 'cache',
'expire' => time() + $interval,
'granularity' => DRUPAL_CACHE_PER_PAGE |
DRUPAL_CACHE_PER_ROLE,
),
);
}

16. Clearing the Cache in Drupal 7
16
//Clear a specific Cached Entity
cache_clear_all('cache:group:id', $bin);
//Clear a specific Cached Entity
cache_clear_all('cache:group', $bin, TRUE);
//Clear a specific Cached Entity
cache_clear_all('*', $bin, TRUE);

17. So… Whats the problem?
・Clearing cached pages that reference the entity I am clearing
・Referenced Entities
・Parent Entities
・Entities in Views
・etc…
17

18. Further Reading
・For more on Drupal 7 Render Caching:
・Render Arrays in Drupal 7
・Render Cache Module

19. Drupal 8 - The New World

22. Drupal 8 Render Array #cache property
22
• 'keys': Identifiers for cacheable portions of render arrays. These should be created and added
for portions of a render array that involve expensive calculations in the rendering process.
• 'contexts': Contexts that may affect rendering, such as user role and language. When no
context is specified, it means that the render array does not vary by any context.
• 'tags': Tags for data that rendering depends on, such as for individual nodes or user accounts,
so that when these change the cache can be automatically invalidated. If the data consists of
entities, you can use DrupalCoreEntityEntityInterface::getCacheTags() to generate
appropriate tags; configuration objects have a similar method.
• 'max-age': The maximum duration for which a render array may be cached. Defaults
to DrupalCoreCacheCache::PERMANENT (permanently cacheable).
'#cache' => [
'keys' => ['entity_view', 'node', $node->id()],
'contexts' => ['languages'],
'tags' => ['node:' . $node->id()],
'max-age' => Cache::PERMANENT,
],

23. Cache Keys
・Cache Keys are a representation of a set of code that you want
to make cacheable
・Typically something that is too expensive to render on
every page load
・Example: ‘entity_view’
23

24. Cache Context
・Cache Contexts define variations of what I am rendering.
・Does my display change based on user role?
・Does my display change based on language?
・Does my display change based on time of day?
・Does my display change based on location?
・Does my display change based on <insert here>?
24

25. Cache Tags
・Cache Tags outline identifiers that this render array depends
on to render properly
・Referenced Entity ID’s (Nodes, Paragraphs, Users, etc…)
・Custom Identifiers
25

26. Cache max-age
・Cache max-age determines how long the item I am rendering
can be cached for
・Defaults to “Permanent”
・Must always be set
26

27. Cache Tags
・Cache Tags are where the magic happens
・Cache Tags allow you to:
・identify dependencies to a render object
・invalidate pages where a child node is referenced across
the entire site
27

28. Cache Tags
・Cache Tags are where the headache happens
・Cache Tags force you to:
・Think about how you are rendering elements
・Plan out your caching architecture
・Do some real debugging in the theme layer when things
aren’t working
・Bang your head on your keyboard trying to figure out why
there are issues
28

30. Bubbling Your Cache Tags
・Getting your cache tags to bubble up correctly can be a
challenge
・Must render the #cache property of the render array in
twig templates
・Must handle bubbling cache tags manually if you manually
render entity displays
30

31. Example Twig Outputs
31
What Works:
・Render Entire Content Array
・Render Content Array without
fields
・Render Child Content Cache
Array
・This example is for a viewfield
<div class="content">
{{ content }}
</div>
<div class="content">
{{ content|without('comment', 'links') }}
</div>
{{ attribute(content['field_dynamic_content']|render,
'#cache') }}

32. Failing to Render the Content Array
・Failing to render the #cache property of the {{ content }} array
will result in failing to bubble up the proper cache tags
・This will lead to lots of debugging and replacement keyboards
32

33. More Random Useful Things

34. Advanced Topics: Lazy Loading
・Auto-placeholdering is the process of detecting poorly
cacheable (highly dynamic) pieces of your page and rendering
them later in the render process
・Uses the #lazy_builder callback
・More information: Drupal 8 Auto Placeholdering
34

35. Lazy Loading – Block Definition
35
• Define a block and set the build to
a #lazy_builder callback
• #create_placeholder = TRUE is
required here
• Set the cache to 0 (no-cache)
/**
* Provides a 'Lazy Block' block.
*
* @Block(
* id = "lazy_block",
* admin_label = @Translation("Lazy Block")
* )
*/
class LazyBlock extends BlockBase {
/**
* {@inheritdoc}
*/
public function build() {
$build['form'] = array(
'#lazy_builder' => array(
'demo_lazy_builder.form_load:loadLazyBlock',
array()
),
'#create_placeholder' => TRUE,
'#cache' => ['contexts' => [],
'max-age' => 0],
);
$build['#cache'] = ['max-age' => 0];
return $build;
}
}

36. Lazy Loading - Service
36
• Define your service callback
• Define your class that handles the
callback
services:
demo_lazy_builder.form_load:
class: Drupaldemo_lazy_builderLazyBlockLoader
arguments: []

37. Lazy Loading – Dynamic Logic
37
• Define a callback for your render
array with #lazy_builder
/**
* Class LazyBlockLoader.
*
* @package DrupalLazyBlockLoader
*/
class LazyBlockLoader {
/**
* @return array
*/
public function loadLazyBlock() {
$value = [
'#markup' => time(),
'#cache' => ['max-age' => 0],
];
return $value;
}
}

38. Cache Tag: node_list
・The node_list cache tag will get triggered to invalidate when
any node CRUD operation
・Useful for listing pages when you want new nodes to appear
・Want better performance?
・ View Custom Tags Module

39. Purge
・Purge is in a state where it is usable on production websites
・Acquia Purge has gone into Public Beta
・More information:
・Purge Module
・Acquia Purge Q&A
39

40. Known Issues/Troubleshooting

41. How can I Troubleshoot?
・Step 1: Open your twig template and render the {{content}}
array and see if it magically starts working.
・Step 2: Check your Manage Display options to ensure the
proper display formatter is selected. (ie. Rendered Entity)
・Step 3: Check out the cache tables to see what tags are
bubbling up.
・Step 4: Search the interwebs for known issues.
・Step 5: Patch or write some custom code to resolve the issue.

42. What do render cache tags look like?
・Cache Tags are a list of entity:id
・There are multiple render cache entries for each entity
・Role Based (Anonymous, Authenticated, etc…)
・Entity View Mode (Default, Teaser, Search Result, etc...)
node:1016 node:57541 node:57546 node:57551 node_view rendered user:1
config:filter.format.rich_text node:1016 node:57541 node:57546 node:57551 node_view rendered user:1

43. Confused Render Templates
・Scenario
・Internal Cache + Internal Dynamic Cache
・View Displays
・Node templates using node--view--<view_name>.html.twig
・Result
・View templates rendering the wrong node--view templates
・More info: https://www.drupal.org/node/2838950

44. Manage Display Matters
・Proper configuration of the Manage Display options matter.
・Example:
・Rendering a paragraph using Entity Label instead of
Rendered Entity will not bubble cache tags
・Example Issue w/ Paragraphs not bubbling up cache tags (It
does work when configured properly):
https://www.drupal.org/node/2855735

45. Questions?

46. Check us out:
www.bluetext.com

47. Drupal 8 References
・Cachability of Render Arrays
・Render API Overview
47