Dhananjay Kuber

Static & Dynamic Rendering of Block

When the markhup is statistically generated while saving the block in gutenburg editor is called as Static rendering and markhup returned by the block on the frontend is dynamically generated on the server it is called as Dynamic rendering of block.

Static Rendering

  • In static rendering, the markup is generated and saved when the block is saved in the Gutenberg editor.
  • The output returned from the Save operation is stored in the database.
  • When a client requests the content, the HTML stored in the post_content field is retrieved and displayed on the frontend.
  • Statically rendered blocks store all the necessary data in the database, including markup, output, and HTML.
  • If the plugin is unintentionally disabled, it provides a fallback option since the content is statically stored in the database.
  • Generally, static block rendering is faster than dynamic block rendering.
  • Example of static rendered block data:
<!-wp:button {"width":100}    <div class="wp-block-button has-custom-width wp-block-button_width-100">
        <a class="wp-block-button_link wp-element-button" href="https://wp.org">Click me!</a>
    </div>
<!-/wp:button →

Static Rendering Block

Dynamic Rendering

  • Blocks with dynamic rendering can define a markup representation of the block, which is processed on the server before sending the markup to the front end.
  • Dynamic blocks create the structure in real time when a request is made from the client.
  • The render.php file is used for dynamically rendering the blocks. This file has access to the block's attributes, content, and data.
  • In dynamically rendered blocks, the save function typically returns null.
  • Dynamic blocks only store the block delimiter comment along with block attributes, as shown below:
<!-- wp:latest-posts {"postsToShow":4,"displayPostDate":true} /-->

Dynamic Rendering Block

When to use Static Rendering and Dynamic Rendering

  • Static rendering is faster than dynamic rendering. If the content is not changing frequently then the static rendering is good choice for performance optimization
  • If content are real-time, dynamic and we need to perform complex operation which we cannot peroform while saving then the dynamic rendering is good option.