Drupal 8, 9: Placeholder Strategy

<?php

namespace Drupal\example;

use Drupal\Core\Render\Placeholder\PlaceholderStrategyInterface;

/**
 * Provides placeholder strategy.
 */
final class ExamplePlaceholderStrategy implements PlaceholderStrategyInterface {

  /**
   * {@inheritdoc}
   */
  public function processPlaceholders(array $placeholders): array {
    return $placeholders;
  }

}

services:
  placeholder_strategy.example:
    class: Drupal\example\ExamplePlaceholderStrategy
    tags:
      - { name: placeholder_strategy }

$placeholders = [
  '<drupal-render-placeholder callback="example.slow_block_lazy_builder:build" arguments="" token="rN95G46IxS9VbeKtuyvSgOW60BLl5dHSdhNfTxBjBCI"></drupal-render-placeholder>' => [
    '#lazy_builder' => [
      'example.slow_block_lazy_builder:build', [],
    ],
  ],
  '<drupal-render-placeholder callback="Drupal\Core\Render\Element\StatusMessages::renderMessages" arguments="0" token="_HAdUpwWmet0TOTe2PSiJuMntExoshbm1kh2wQzzzAA"></drupal-render-placeholder>' => [
    '#lazy_builder' => [
      'Drupal\Core\Render\Element\StatusMessages::renderMessages', [NULL],
    ],
  ],
  'form_action_p_pvdeGsVG5zNF_XLGPTvYSKCf43t8qZYSwcfZl2uzM' => [
    '#lazy_builder' => [
      'form_builder:renderPlaceholderFormAction', [],
    ],
  ],
];

<?php

namespace Drupal\example\Render\Placeholder;

use Drupal\Component\Serialization\Json;
use Drupal\Component\Utility\Crypt;
use Drupal\Component\Utility\Html;
use Drupal\Core\Render\Placeholder\PlaceholderStrategyInterface;
use Drupal\Core\Site\Settings;
use Symfony\Component\HttpFoundation\RequestStack;

/**
 * Provides AJAX placeholder strategy.
 *
 * The placeholders on the page will be replaced with AJAX calls.
 */
final class AjaxPlaceholderStrategy implements PlaceholderStrategyInterface {

  /**
   * The module cookie name for no-JS mark.
   */
  public const NOJS_COOKIE = 'example_ajax_strategy_nojs';

  /**
   * The request stack.
   *
   * @var \Symfony\Component\HttpFoundation\RequestStack
   */
  protected $requestStack;

  /**
   * Constructs a new AjaxPlaceholderStrategy object.
   *
   * @param \Symfony\Component\HttpFoundation\RequestStack $request_stack
   *   The request stack.
   */
  public function __construct(RequestStack $request_stack) {
    $this->requestStack = $request_stack;
  }

  /**
   * {@inheritdoc}
   */
  public function processPlaceholders(array $placeholders): array {
    // If client doesn't have JavaScript enabled, fallback to default response
    // with blocking rendering, but client will receive all content. F.e. search
    // engines crawlers without JS still be possible to parse content.
    if ($this->requestStack->getCurrentRequest()->cookies->has(static::NOJS_COOKIE)) {
      return $placeholders;
    }

    foreach ($placeholders as $placeholder => $placeholder_render_array) {
      // Skip processing attribute placeholders.
      // @see \Drupal\Core\Access\RouteProcessorCsrf::renderPlaceholderCsrfToken()
      // @see \Drupal\Core\Form\FormBuilder::renderFormTokenPlaceholder()
      // @see \Drupal\Core\Form\FormBuilder::renderPlaceholderFormAction()
      if (!$this->placeholderIsAttributeSafe($placeholder)) {
        $placeholders[$placeholder] = $this->createAjaxPlaceholder($placeholder_render_array);
      }
    }
    return $placeholders;
  }

  /**
   * Determines whether the given placeholder is attribute-safe or not.
   *
   * @param string $placeholder
   *   A placeholder.
   *
   * @return bool
   *   Whether the placeholder is safe for use in a HTML attribute (in case it's
   *   a placeholder for a HTML attribute value or a subset of it).
   */
  private function placeholderIsAttributeSafe($placeholder): bool {
    return $placeholder[0] !== '<' || $placeholder !== Html::normalize($placeholder);
  }

  /**
   * Creates an AJAX placeholder.
   *
   * @param array $placeholder_render_array
   *   The placeholder render array.
   *
   * @return array
   *   The renderable array with custom placeholder markup.
   */
  private function createAjaxPlaceholder(array $placeholder_render_array): array {
    $callback = $placeholder_render_array['#lazy_builder'][0];
    $args = $placeholder_render_array['#lazy_builder'][1];

    return [
      '#type' => 'html_tag',
      '#tag' => 'span',
      '#cache' => [
        'max-age' => 0,
      ],
      '#attributes' => [
        'data-ajax-placeholder' => Json::encode([
          'callback' => $placeholder_render_array['#lazy_builder'][0],
          'args' => $placeholder_render_array['#lazy_builder'][1],
          'token' => self::generateToken($callback, $args),
        ]),
      ],
      '#attached' => [
        'library' => ['example/ajax-placeholder'],
      ],
    ];
  }

  /**
   * Generates token for protection from random code executions.
   *
   * @param string $callback
   *   The callback function.
   * @param array $args
   *   The callback arguments.
   *
   * @return string
   *   The token that sustain across requests.
   */
  public static function generateToken(string $callback, array $args): string {
    // Use hash salt to protect token against attacks.
    $token_parts = [$callback, $args, Settings::get('hash_salt')];
    return Crypt::hashBase64(serialize($token_parts));
  }

}

  /**
   * The module cookie name for no-JS mark.
   */
  public const NOJS_COOKIE = 'example_ajax_strategy_nojs';

  /**
   * Constructs a new AjaxPlaceholderStrategy object.
   *
   * @param \Symfony\Component\HttpFoundation\RequestStack $request_stack
   *   The request stack.
   */
  public function __construct(RequestStack $request_stack) {
    $this->requestStack = $request_stack;
  }

  /**
   * Generates token for protection from random code executions.
   *
   * @param string $callback
   *   The callback function.
   * @param array $args
   *   The callback arguments.
   *
   * @return string
   *   The token that sustain across requests.
   */
  public static function generateToken(string $callback, array $args): string {
    // Use hash salt to protect token against attacks.
    $token_parts = [$callback, $args, Settings::get('hash_salt')];
    return Crypt::hashBase64(serialize($token_parts));
  }

  /**
   * Creates an AJAX placeholder.
   *
   * @param array $placeholder_render_array
   *   The placeholder render array.
   *
   * @return array
   *   The renderable array with custom placeholder markup.
   */
  private function createAjaxPlaceholder(array $placeholder_render_array): array {
    $callback = $placeholder_render_array['#lazy_builder'][0];
    $args = $placeholder_render_array['#lazy_builder'][1];

    return [
      '#type' => 'html_tag',
      '#tag' => 'span',
      '#cache' => [
        'max-age' => 0,
      ],
      '#attributes' => [
        'data-ajax-placeholder' => Json::encode([
          'callback' => $placeholder_render_array['#lazy_builder'][0],
          'args' => $placeholder_render_array['#lazy_builder'][1],
          'token' => self::generateToken($callback, $args),
        ]),
      ],
      '#attached' => [
        'library' => ['example/ajax-placeholder'],
      ],
    ];
  }

<span data-ajax-placeholder="{&quot;callback&quot;:&quot;example.slow_block_lazy_builder:build&quot;,&quot;args&quot;:[],&quot;token&quot;:&quot;dXani8FiRrPyb_5IdLcaYrd_1X7ngGmb1FT_n9b19lQ&quot;}"></span>

  /**
   * Determines whether the given placeholder is attribute-safe or not.
   *
   * @param string $placeholder
   *   A placeholder.
   *
   * @return bool
   *   Whether the placeholder is safe for use in a HTML attribute (in case it's
   *   a placeholder for a HTML attribute value or a subset of it).
   */
  private function placeholderIsAttributeSafe($placeholder): bool {
    return $placeholder[0] !== '<' || $placeholder !== Html::normalize($placeholder);
  }

  /**
   * {@inheritdoc}
   */
  public function processPlaceholders(array $placeholders): array {
    // If client doesn't have JavaScript enabled, fallback to default response
    // with blocking rendering, but client will receive all content. F.e. search
    // engines crawlers without JS still be possible to parse content.
    if ($this->requestStack->getCurrentRequest()->cookies->has(static::NOJS_COOKIE)) {
      return $placeholders;
    }

    foreach ($placeholders as $placeholder => $placeholder_render_array) {
      // Skip processing attribute placeholders.
      // @see \Drupal\Core\Access\RouteProcessorCsrf::renderPlaceholderCsrfToken()
      // @see \Drupal\Core\Form\FormBuilder::renderFormTokenPlaceholder()
      // @see \Drupal\Core\Form\FormBuilder::renderPlaceholderFormAction()
      if (!$this->placeholderIsAttributeSafe($placeholder)) {
        $placeholders[$placeholder] = $this->createAjaxPlaceholder($placeholder_render_array);
      }
    }
    return $placeholders;
  }

services:
  placeholder_strategy.ajax_example:
    class: Drupal\example\Render\Placeholder\AjaxPlaceholderStrategy
    arguments: ['@request_stack']
    tags:
      - { name: placeholder_strategy }

<?php

namespace Drupal\example\Controller;

use Drupal\Component\Serialization\Json;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\RemoveCommand;
use Drupal\Core\Ajax\ReplaceCommand;
use Drupal\Core\Cache\CacheableMetadata;
use Drupal\Core\DependencyInjection\ContainerInjectionInterface;
use Drupal\Core\Routing\LocalRedirectResponse;
use Drupal\example\Render\Placeholder\AjaxPlaceholderStrategy;
use Symfony\Component\DependencyInjection\ContainerInterface;
use Symfony\Component\Finder\Exception\AccessDeniedException;
use Symfony\Component\HttpFoundation\Cookie;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpKernel\Exception\HttpException;

/**
 * Provides controller implementations for Ajax Placeholder strategy.
 */
final class AjaxPlaceholderController implements ContainerInjectionInterface {

  /**
   * The renderer.
   *
   * @var \Drupal\Core\Render\Renderer|object|null
   */
  protected $renderer;

  /**
   * {@inheritdoc}
   */
  public static function create(ContainerInterface $container): AjaxPlaceholderController {
    $instance = new static();
    $instance->renderer = $container->get('renderer');
    return $instance;
  }

  /**
   * Handles request with no JS enabled client.
   *
   * @param \Symfony\Component\HttpFoundation\Request $request
   *   The request.
   *
   * @return \Symfony\Component\HttpFoundation\Response
   *   The response.
   */
  public function noJsCookie(Request $request): Response {
    if ($request->cookies->has(AjaxPlaceholderStrategy::NOJS_COOKIE)) {
      throw new AccessDeniedException();
    }

    if (!$request->query->has('destination')) {
      throw new HttpException(Response::HTTP_BAD_REQUEST, 'The original location is missing.');
    }

    $response = new LocalRedirectResponse($request->query->get('destination'));
    // Set cookie without httpOnly, so that JavaScript can delete it.
    $response->headers->setCookie(new Cookie(AjaxPlaceholderStrategy::NOJS_COOKIE, TRUE, 0, '/', NULL, FALSE, FALSE, FALSE, NULL));
    $response->addCacheableDependency((new CacheableMetadata())->addCacheContexts(['cookies:' . AjaxPlaceholderStrategy::NOJS_COOKIE]));
    return $response;
  }

  /**
   * Handles request from AJAX and returns result.
   *
   * @param \Symfony\Component\HttpFoundation\Request $request
   *   The AJAX request.
   *
   * @return \Symfony\Component\HttpFoundation\Response
   *   The AJAX response.
   */
  public function process(Request $request): Response {
    $json = $request->getContent();
    $info = Json::decode($json);
    $callback = $info['callback'];
    $args = $info['args'];
    $token = $info['token'];

    // @see \Drupal\Core\Ajax\AjaxResponseAttachmentsProcessor
    $response = new AjaxResponse();
    if ($this->validateToken($callback, $args, $token)) {
      // @see \Drupal\Core\Render\Renderer::doCallback
      $render_array = [
        '#lazy_builder' => [$callback, $args],
        '#create_placeholder' => FALSE,
      ];
      $html = $this->renderer->renderRoot($render_array);
      $response->setAttachments($render_array['#attached']);

      // The placeholder will be replaced only if there is a result. If result
      // is empty (callback returns nothing or rendering doesn't provide HTML)
      // then we remove placeholder from the page.
      if (!empty($html)) {
        $response->addCommand(new ReplaceCommand(NULL, $html));
      }
      else {
        $response->addCommand(new RemoveCommand(NULL));
      }
    }
    else {
      $response->setStatusCode(Response::HTTP_UNPROCESSABLE_ENTITY);
    }

    return $response;
  }

  /**
   * Validates that provided token in payload is valid.
   *
   * Since this controller response for every POST request and execute code,
   * we must reduce possible thread income. The very first and simple solution
   * is to validate token from placeholder with what is actually expected.
   *
   * The token uses site 'salt' and can't be compromise if 'salt' is not leaked.
   * By this token we only allows callbacks that we expect. If callback or any
   * argument will be different from what we expect, the token will be
   * different.
   *
   * @param string $callback
   *   The callback function.
   * @param array $args
   *   The callback arguments.
   * @param string $provided_token
   *   The payload token.
   *
   * @return bool
   *   Whether token is valid and data is valid.
   */
  private function validateToken(string $callback, array $args, string $provided_token): bool {
    return AjaxPlaceholderStrategy::generateToken($callback, $args) == $provided_token;
  }

}

  /**
   * {@inheritdoc}
   */
  public static function create(ContainerInterface $container): AjaxPlaceholderController {
    $instance = new static();
    $instance->renderer = $container->get('renderer')
    return $instance;
  }

  /**
   * Handles request with no JS enabled client.
   *
   * @param \Symfony\Component\HttpFoundation\Request $request
   *   The request.
   *
   * @return \Symfony\Component\HttpFoundation\Response
   *   The response.
   */
  public function noJsCookie(Request $request): Response {
    if ($request->cookies->has(AjaxPlaceholderStrategy::NOJS_COOKIE)) {
      throw new AccessDeniedException();
    }

    if (!$request->query->has('destination')) {
      throw new HttpException(Response::HTTP_BAD_REQUEST, 'The original location is missing.');
    }

    $response = new LocalRedirectResponse($request->query->get('destination'));
    // Set cookie without httpOnly, so that JavaScript can delete it.
    $response->headers->setCookie(new Cookie(AjaxPlaceholderStrategy::NOJS_COOKIE, TRUE, 0, '/', NULL, FALSE, FALSE, FALSE, NULL));
    $response->addCacheableDependency((new CacheableMetadata())->addCacheContexts(['cookies:' . AjaxPlaceholderStrategy::NOJS_COOKIE]));
    return $response;
  }

example.ajax_nojs:
  path: /ajax-placeholder-nojs
  defaults:
    _controller: \Drupal\example\Controller\AjaxPlaceholderController::noJsCookie
  options:
    no_cache: TRUE
  requirements:
    _access: 'TRUE'

  /**
   * Validates that provided token in payload is valid.
   *
   * Since this controller response for every POST request and execute code,
   * we must reduce possible thread income. The very first and simple solution
   * is to validate token from placeholder with what is actually expected.
   *
   * The token uses site 'salt' and can't be compromise if 'salt' is not leaked.
   * By this token we only allows callbacks that we expect. If callback or any
   * argument will be different from what we expect, the token will be
   * different.
   *
   * @param string $callback
   *   The callback function.
   * @param array $args
   *   The callback arguments.
   * @param string $provided_token
   *   The payload token.
   *
   * @return bool
   *   Whether token is valid and data is valid.
   */
  private function validateToken(string $callback, array $args, string $provided_token): bool {
    return AjaxPlaceholderStrategy::generateToken($callback, $args) == $provided_token;
  }

  /**
   * Handles request from AJAX and returns result.
   *
   * @param \Symfony\Component\HttpFoundation\Request $request
   *   The AJAX request.
   *
   * @return \Symfony\Component\HttpFoundation\Response
   *   The AJAX response.
   */
  public function process(Request $request): Response {
    $json = $request->getContent();
    $info = Json::decode($json);
    $callback = $info['callback'];
    $args = $info['args'];
    $token = $info['token'];

    // @see \Drupal\Core\Ajax\AjaxResponseAttachmentsProcessor
    $response = new AjaxResponse();
    if ($this->validateToken($callback, $args, $token)) {
      // @see \Drupal\Core\Render\Renderer::doCallback
      $render_array = [
        '#lazy_builder' => [$callback, $args],
        '#create_placeholder' => FALSE,
      ];
      $html = $this->renderer->renderRoot($render_array);
      $response->setAttachments($render_array['#attached']);

      // The placeholder will be replaced only if there is a result. If result
      // is empty (callback returns nothing or rendering doesn't provide HTML)
      // then we remove placeholder from the page.
      if (!empty($html)) {
        $response->addCommand(new ReplaceCommand(NULL, $html));
      }
      else {
        $response->addCommand(new RemoveCommand(NULL));
      }
    }
    else {
      $response->setStatusCode(Response::HTTP_UNPROCESSABLE_ENTITY);
    }

    return $response;
  }

example.ajax_processor:
  path: /ajax-placeholder-processor
  defaults:
    _controller: \Drupal\example\Controller\AjaxPlaceholderController::process
  options:
    no_cache: TRUE
  requirements:
    _access: 'TRUE'

<noscript>
  <meta http-equiv="Refresh" content="0; URL=/ajax-placeholder-nojs?destination=/node" />
</noscript>

/**
 * Implements hook_page_attachments().
 */
function example_page_attachments(array &$attachments) {
  $attachments['#cache']['contexts'][] = 'cookies:' . AjaxPlaceholderStrategy::NOJS_COOKIE;

  $request = Drupal::request();
  $has_nojs_cookie = $request->cookies->has(AjaxPlaceholderStrategy::NOJS_COOKIE);

  if (!$has_nojs_cookie) {
    // When user has nojs cookie, we add special metatag which will be executed
    // by browser if JavaScript support is disabled. This will redirect user to
    // the special page which will put this cookie. The cookie will mark for us
    // that JS is not enabled and prevent from infinity redirect loop here.
    // @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
    // @see \Drupal\example\Controller\AjaxPlaceholderController::noJsCookie
    $attachments['#attached']['html_head'][] = [
      [
        '#tag' => 'meta',
        '#noscript' => TRUE,
        '#attributes' => [
          'http-equiv' => 'Refresh',
          'content' => '0; URL=' . Url::fromRoute('example.ajax_nojs', [], ['query' => Drupal::service('redirect.destination')->getAsArray()])->toString(),
        ],
      ],
      'example_ajax_nojs',
    ];
  }
  else {
    // If JavaScript is enabled and cookie is set, force delete it.
    $attachments['#attached']['html_head'][] = [
      [
        '#tag' => 'script',
        '#value' => 'document.cookie = "' . AjaxPlaceholderStrategy::NOJS_COOKIE . '=1; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT"',
      ],
      'example_ajax_nojs',
    ];
  }
}

/**
 * @file
 * AJAX placeholder strategy behaviors.
 */
(function ($, Drupal) {

  'use strict';

  Drupal.behaviors.exampleAjaxPlaceholderStrategy = {
    attach: function (context, settings) {
      const intersectionObserver = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const placeholderElement = entry.target
            intersectionObserver.unobserve(placeholderElement);
            this.load(placeholderElement);
          }
        })
      })

      $('[data-ajax-placeholder]', context).once('ajax-placeholder').each(function (placeholderElement) {
        intersectionObserver.observe(this);
      })
    },

    load: function (placeholderElement) {
      const ajax = new Drupal.ajax({
        url: '/ajax-placeholder-processor',
        progress: false,
        submit: placeholderElement.dataset.ajaxPlaceholder,
      })

      ajax.success = function (response, status) {
        // Call all provided AJAX commands.
        Object.keys(response || {}).forEach(i => {
          if (response[i].command && this.commands[response[i].command]) {
            if (!response[i].selector) {
              // Set selector by our element.
              response[i].selector = placeholderElement;
            }
            this.commands[response[i].command](this, response[i], status);
          }
        });
      };

      ajax.execute();
    },

    htmlStringToElement: function (htmlString) {
      htmlString = htmlString.trim();
      const template = document.createElement('template');
      template.innerHTML = htmlString;
      return template.content.firstChild;
    },
  };

})(jQuery, Drupal);

    htmlStringToElement: function (htmlString) {
      htmlString = htmlString.trim();
      const template = document.createElement('template');
      template.innerHTML = htmlString;
      return template.content.firstChild;
    },

    load: function (placeholderElement) {
      const ajax = new Drupal.ajax({
        url: '/ajax-placeholder-processor',
        progress: false,
        submit: placeholderElement.dataset.ajaxPlaceholder,
      })

      ajax.success = function (response, status) {
        // Call all provided AJAX commands.
        Object.keys(response || {}).forEach(i => {
          if (response[i].command && this.commands[response[i].command]) {
            if (!response[i].selector) {
              // Set selector by our element.
              response[i].selector = placeholderElement;
            }
            this.commands[response[i].command](this, response[i], status);
          }
        });
      };

      ajax.execute();
    },

    attach: function (context, settings) {
      const intersectionObserver = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const placeholderElement = entry.target
            intersectionObserver.unobserve(placeholderElement);
            this.load(placeholderElement);
          }
        })
      })

      $('[data-ajax-placeholder]', context).once('ajax-placeholder').each(function (placeholderElement) {
        intersectionObserver.observe(this);
      })
    },

ajax-placeholder:
  version: VERSION
  js:
    js/ajax-placeholder.js: {}
  dependencies:
    - core/drupal
    - core/drupal.ajax

<?php

namespace Drupal\example;

use Drupal\Core\Entity\EntityTypeManagerInterface;
use Drupal\node\NodeInterface;

/**
 * Provides lazy builder for slow block content.
 */
final class SlowBlockLazyBuilder {

  /**
   * The node storage.
   *
   * @var \Drupal\Core\Entity\EntityStorageInterface
   */
  protected $nodeStorage;

  /**
   * Constructs a new SlowBlockLazyBuilder object.
   *
   * @param \Drupal\Core\Entity\EntityTypeManagerInterface $entity_type_manager
   *   The entity type manager.
   *
   * @throws \Drupal\Component\Plugin\Exception\InvalidPluginDefinitionException
   * @throws \Drupal\Component\Plugin\Exception\PluginNotFoundException
   */
  public function __construct(EntityTypeManagerInterface $entity_type_manager) {
    $this->nodeStorage = $entity_type_manager->getStorage('node');
  }

  /**
   * Build content with noticeable delay.
   *
   * @return array
   *   The renderable array result for lazy builder.
   */
  public function build(): array {
    sleep(3);

    $node_ids = $this->nodeStorage->getQuery()
      ->condition('status', NodeInterface::PUBLISHED)
      ->condition('type', 'article')
      ->range(0, 20)
      ->addTag('example_random')
      ->execute();
    $nodes = $this->nodeStorage->loadMultiple($node_ids);

    return array_map(function (NodeInterface $node) {
      return [
        '#type' => 'container',
        'link' => $node->toLink()->toRenderable(),
      ];
    }, $nodes);
  }

}

  /**
   * Constructs a new SlowBlockLazyBuilder object.
   *
   * @param \Drupal\Core\Entity\EntityTypeManagerInterface $entity_type_manager
   *   The entity type manager.
   *
   * @throws \Drupal\Component\Plugin\Exception\InvalidPluginDefinitionException
   * @throws \Drupal\Component\Plugin\Exception\PluginNotFoundException
   */
  public function __construct(EntityTypeManagerInterface $entity_type_manager) {
    $this->nodeStorage = $entity_type_manager->getStorage('node');
  }

  /**
   * Build content with noticeable delay.
   *
   * @return array
   *   The renderable array result for lazy builder.
   */
  public function build(): array {
    sleep(3);

    $node_ids = $this->nodeStorage->getQuery()
      ->condition('status', NodeInterface::PUBLISHED)
      ->condition('type', 'article')
      ->range(0, 20)
      ->addTag('example_random')
      ->execute();
    $nodes = $this->nodeStorage->loadMultiple($node_ids);

    return array_map(function (NodeInterface $node) {
      return [
        '#type' => 'container',
        'link' => $node->toLink()->toRenderable(),
      ];
    }, $nodes);
  }

/**
 * Implements hook_query_TAG_alter() for 'example_random'.
 */
function example_query_example_random_alter(AlterableInterface $query) {
  $query->orderRandom();
}

  example.slow_block_lazy_builder:
    class: Drupal\example\SlowBlockLazyBuilder
    arguments: ['@entity_type.manager']

<?php

namespace Drupal\example\Plugin\Block;

use Drupal\Core\Block\BlockBase;

/**
 * Provides a slow block.
 *
 * @Block(
 *   id = "example_slow_block",
 *   admin_label = @Translation("Slow block"),
 *   category = @Translation("Custom")
 * )
 */
final class SlowBlock extends BlockBase {

  /**
   * {@inheritdoc}
   */
  public function build(): array {
    // Rand argument to exclude from internal caching.
    $rand = rand(0, 1000);
    $build['content'] = [
      '#lazy_builder' => ['example.slow_block_lazy_builder:build', [$rand]],
      '#create_placeholder' => TRUE,
    ];
    return $build;
  }

}