Defer Loading

WireDrupal offers a wire:init directive to run an action as soon as the component is rendered. This can be helpful in cases where you don't want to hold up the entire page load, but want to load some data immediately after the page load. Think of it as BigPipe of Drupal but instead, it makes a standalone requests to itself.

Bellow is an example of loading some Nodes after the component renders on the page.

class ShowNodes extends WireComponent {

  public bool $readyToLoad = FALSE;

  public function loadNodes(): void {

    $this->readyToLoad = TRUE;

  }

  public function render(): View {

    return View::fromTpl('show_nodes', [
      'nodes' => $this->readyToLoad
        ? Node::loadMultiple([2, 3])
        : [],
    ]);

  }

}

The Twig template would look as bellow.

<div wire:init="loadNodes">

  <ul>
  
    {% for node in nodes %}
    
      <li>{{ node.label }}</li>
      
    {% endfor %}
    
  </ul>
  
</div>

The loadNodes action will be run immediately after the Wire component renders on the page.