Dynamic block in WP Super Cache via Javascript?

Question

WordPress

When using the WP Super Cache 1.4.7 caching plugin, there is an issue with using dynamic content. The plugin's FAQ says that there are two ways to solve the problem:
1. Through the WP Super Cache plugins directory (wp-content/plugins/wp-super-cache/plugins/dynamic-cache-test.php)
2. Display dynamic content through JavaScript/AJAX. For example, like adsense banners, etc. The
first point is clear and there are instructions on the web on how and what to do. But with the second point of the problem. For example, I need to not cache a dynamic block of random entries:

<ul class="random_block">
<?php $randompost = $wpdb->get_results("SELECT ID FROM $wpdb->posts WHERE post_status = 'publish' AND post_type = 'post' ORDER BY RAND() LIMIT 10");
if ($randompost) {
foreach ($randompost as $post) {
$ID = $post->ID;
$postid = get_post($post->ID);
$title = $postid->post_title; ?>


  <li>
  <a href="<?php echo get_permalink($postid); ?>" class="wall" rel="bookmark">
      <?php the_post_thumbnail(array(150, 150, true)); ?>
  </a>
  
        <h2><a href="<?php echo get_permalink($postid); ?>" ><?php echo $title ?></a></h2>
  </li>

<?php } } ?>

</ul>

Question: How can I wrap this code in Javascript so that it is not cached by the WP Super Cache plugin?

Answer 1

Make an empty div, a function that, when the page loads, will make an Ajax request and put its result in this div. Well, the handler of this request, which will return the posts.
How to do all this is easy to google:
wp-kama.ru/id_2018/ajax-v-wordpress.html
habrahabr.ru/company/dataart/blog/271189
api.jquery.com/jquery.ajax:

Answer 2

You are not doing it right.
Firstly, it's better to use WP_Query()
Secondly, it's better to do random selections the wrong way. As you have done - it can slow down, such a request cannot be cached.
It is better to select 100-200 records, even with random sorting, cache them, later mix the resulting array in php, and show only 10 records.
something like this:
https://gist.github.com/Dimasmagadan/102bcfad9a83a...
All this will need to be stuffed into a function, and an action attached to it (as advised in the neighboring council)
add_action('wp_ajax...
In the right place site, we display an empty div with any class or id.Such a block can be easily cached.
We cling to the site js. In which we check the presence of this block ( if( $('.our-class').length )... ) , if it is, we make an ajax request to the site, insert the received data into our div.
So every time the page is refreshed, there will be random text in this block.
You can go further, take not 10 records from the server, but all 100. Cache them on the client side in localStorage, so there will be only one request to the server on the first load. All other updates of this block will go without contacting the server, they will be taken from localStorage