How to use dynamic blocks with Full Page Cache in Magento 2?

Question

I am using Magento 2.3.2. I have some dynamics blocks which are getting called in some pages. If I disable FPC, the blocks are working fine. But as we enable FPC, They don't work perfectly.

Also, By calling them with cacheable="false" won't be good as it will disable FPC for full-page not that block. How should I disable Cache for a particular block or any application other solution to fix it.

Thanks in Advance!

Answer 1

A good solution here would be to fetch the block via AJAX. Mage2.tv has an excellent video guide on how to do this. I would definitely recommend watching the full video tutorial from Mage2tv, it will deal with this topic in depth.

As already noted, adding cacheable="false" to any block on the page will prevent the entire page from being cached by the full page cache, so this isn't a good solution if you want your page to be cached.

So hole punching (as this is called) via AJAX can go like this:

1. Create your module, add a new JS file. For example 'your-ajax-call.js'. So the location of the file will be: app/code/Vendor/YourModule/view/frontend/web/js/your-ajax-call.js.

Example content:

define(['jquery'], function ($) {
  'use strict';
  return function (config, element) {
    const url = '/fetch/content/from/url';
    $.get({
      url: url,
      cache: false,
      success: function (result) {
        element.innerHTML = result;
      }
    })
  }
})

Here we will fetch the dynamic content that's available on the url /fetch/content/from/url. You will need to create a controller that provides the needed content yourself.

2. Then in your PHTML, call your new JS file via data-mage-init:

<div data-mage-init='{"Vendor_YourModuleName/js/your-ajax-call": {}}'>
    <!-- The result of the AJAX call will be added here -->
    <div class="your-class">
      <span><?= __('Placeholder text') ?></span>
    </div>
  </div>

The content from /fetch/content/from/url will be inserted into the div via AJAX after the page load event and you have essentially 'bypassed' the full page cache for this block.

Answer 2

Unfortunately, since a portion of the page is not cacheable, it makes the entire page non-cacheable. The FPC is just that - a full page cache. It won't cache a part of the page.

The only thing you can do is accept the non-caching nature of the block.

Alternatively, I have found that some items that state that they are non-cacheable are in fact cacheable, eg. one module I have used was simply loading a single setting from the core_config_data table (that never changed after initial set up of the store) in the backend PHP, and then the block .phtml was using it to insert that setting into some javascript to fetch data from a third-party site. Simply changing the block to cacheable and hard-coding the setting into the javascript fixed the issue, since the data was never going to change.

You may find upon investigation that some of your non-cacheable blocks are the same.