Title: Non-cacheable components/elements in AMP
Last modified: June 16, 2021

---

# Non-cacheable components/elements in AMP

 *  Resolved [FlixWatch Support](https://wordpress.org/support/users/flixwatchsupport/)
 * (@flixwatchsupport)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/non-cacheable-components-elements-in-amp/)
 * Hi,
 * 10% of the content on a page changes frequently so I am having a hard time getting
   things cached on time for the visitors.
 * Like in the above link, the “Streaming in” div would change as per the change
   in Netflix Database. Hence I wanted to make that element non-cacheable.
 * I have explored some options and found that either <amp-iframe> or <amp-list>
   can be used for this. However the problem with <amp-list> seems to be that it
   needs a static json file as a source which means for every post, I have to create
   another file. On the other hand <amp-iframe> is limited to 1 per page.
 * If there are any other options, please do share.
 * Regards
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fnon-cacheable-components-elements-in-amp%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 12 replies - 1 through 12 (of 12 total)

 *  Plugin Support [Milind More](https://wordpress.org/support/users/milindmore22/)
 * (@milindmore22)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/non-cacheable-components-elements-in-amp/#post-14562421)
 * Hello [@flixwatchsupport](https://wordpress.org/support/users/flixwatchsupport/)
 * Thank you for the support topic, I will recommend using [amp-list](https://amp.dev/documentation/components/amp-list/),
   It doesn’t require static json file as per [documentation](https://amp.dev/documentation/components/amp-list/#displaying-a-dynamic-list)
   it can be dynamic list.
 * I don’t know how you are fetching/updating data with Netflix DB
 * You can use the [amp-list](https://amp.dev/documentation/components/amp-list/)
   with
    1) [amp-state](https://amp.dev/documentation/components/amp-list/#initialization-from-amp-state)
 * Check how you are adding those countries check if you are able canvert data in
   json with [wp_json_encode](https://developer.wordpress.org/reference/functions/wp_json_encode/)
 *     ```
       <amp-state id="CountriesStreamingIn">
         <script type="application/json">
           {
             "items": <?php echo wp_json_encode( $countries ); ?>
           }
         </script>
       </amp-state>
       <amp-list
         width="auto"
         height="100"
         layout="fixed-height"
         src="amp-state:CountriesStreamingIn"
       >
         <template type="amp-mustache">
           <div class="url-entry">
             <a href="{{url}}">{{title}}</a>
           </div>
         </template>
       </amp-list>
       ```
   
 * 2) [Create custom endpoints.](https://developer.wordpress.org/rest-api/extending-the-rest-api/adding-custom-endpoints/)
 *     ```
       <amp-list
         width="auto"
         height="140"
         layout="fixed-height"
         src="https://yoursite.com/get/countries/?for_post=<?php echo get_the_ID(); ?>"
       >
         <template type="amp-mustache">
           <div class="url-entry">
             <a href="{{url}}">{{title}}</a>
           </div>
         </template>
       </amp-list>
       ```
   
 * Hope my suggestion helps!
 *  Thread Starter [FlixWatch Support](https://wordpress.org/support/users/flixwatchsupport/)
 * (@flixwatchsupport)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/non-cacheable-components-elements-in-amp/#post-14562757)
 * Thanks for the code Milind. I will use and update you.
 * > I don’t know how you are fetching/updating data with Netflix DB
 * This is coming from the database – get_terms.
 *  Thread Starter [FlixWatch Support](https://wordpress.org/support/users/flixwatchsupport/)
 * (@flixwatchsupport)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/non-cacheable-components-elements-in-amp/#post-14566096)
 * Hi Milind,
 * I used the amp-list with amp-state option first (since it looked easier), it’s
   displaying correctly. Unfortunately, the json data on page is also getting cached,
   so it won’t work. I will try the second option now.
 * Regards
 *  Plugin Support [Milind More](https://wordpress.org/support/users/milindmore22/)
 * (@milindmore22)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/non-cacheable-components-elements-in-amp/#post-14566832)
 * Hello FlixWatch
 * If countries are terms updating post terms should clear post cache, if not check
   your cache plugin to see they provide a hook/function to clear post cache on 
   update.
 * Using REST API endpoint is also a good option ensuring updated content is served
   on AMP cache.
 * I will keep this topic open just in case you need further assistance.
 *  Thread Starter [FlixWatch Support](https://wordpress.org/support/users/flixwatchsupport/)
 * (@flixwatchsupport)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/non-cacheable-components-elements-in-amp/#post-14569121)
 * Hi Milind,
 * I am closing this for now because it will take me some time to implement the 
   REST API solution.
 * I will update once it’s done.
 * Thanks for the help.
 * Regards
 *  Thread Starter [FlixWatch Support](https://wordpress.org/support/users/flixwatchsupport/)
 * (@flixwatchsupport)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/non-cacheable-components-elements-in-amp/#post-14570285)
 * Hi Milind,
 * I was trying an alternative to REST API custom endpoints by using the GET function:
 * 1.
 *     ```
       <amp-list
         width="auto"
         height="100"
         layout="fixed-height"
         src="https://www.flixwatch.co/stagin/region-data/?post_id=<?php echo $post->ID; ?>"
       >
         <template type="amp-mustache">
           <div>{{.}}</div>
         </template>
       </amp-list>
       ```
   
 * 2.
 *     ```
       <amp-script id="dataFunctions" script="local-script" nodom></amp-script>
       <script id="local-script" type="text/plain" target="amp-script">
         function getRemoteData() {
           return fetch('https://www.flixwatch.co/stagin/region-data/?post_id=<?php echo $post->ID; ?>')
             .then(resp => resp.json())
             .then(transformData)
         }
         exportFunction('getRemoteData', getRemoteData);
       </script>
         <amp-list
         id="amp-list"
         width="auto"
         height="100"
         layout="fixed-height"
         src="amp-script:dataFunctions.getRemoteData"
       >
         <template type="amp-mustache">
           <div>{{.}}</div>
         </template>
       </amp-list>
       ```
   
 * [https://www.flixwatch.co/stagin/movies/jungle-beat-the-movie/](https://www.flixwatch.co/stagin/movies/jungle-beat-the-movie/)
   
   [https://www.flixwatch.co/stagin/region-data/?post_id=72384](https://www.flixwatch.co/stagin/region-data/?post_id=72384)(
   If you check this link, it’s generating the JSON array) but it’s not getting 
   displayed.
 *  Thread Starter [FlixWatch Support](https://wordpress.org/support/users/flixwatchsupport/)
 * (@flixwatchsupport)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/non-cacheable-components-elements-in-amp/#post-14570293)
 * The script I am using to send the data:
 *     ```
       <?php
       $post_id = $_GET['post_id'];
       function get_region($post_id){
           $region_list = get_the_terms($post_id, 'region');
           if ($region_list != FALSE) :
               $region_array = [];
       	    $x = 0;
       	    foreach($region_list as $term_single) :
       	      $region_array[$x][0] = $term_single->name;
       	      $region_array[$x][1] = $term_single->slug;
   
                   $x++; 
       	    endforeach;
       	 else :
       	    $region_array = ["Not Streaming"]; 
   
           endif;
           echo wp_json_encode($region_array);
           return (wp_json_encode($region_array));
       }
       if(($post_id)){
           get_region($post_id);
       } 
   
       ?>
       ```
   
 *  Plugin Support [Milind More](https://wordpress.org/support/users/milindmore22/)
 * (@milindmore22)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/non-cacheable-components-elements-in-amp/#post-14570553)
 * Hello [@flixwatchsupport](https://wordpress.org/support/users/flixwatchsupport/)
 * Can you please try this approach instead of using amp-script
 * the php code
 *     ```
       $post_id = filter_input( INPUT_GET, 'post_id', FILTER_SANITIZE_NUMBER_INT );
   
       /**
        * Get Regions
        *
        * @param int $post_id
        * @return json
        */
       function get_region( $post_id ) {
   
       	$region_list = get_the_terms( $post_id, 'region' );
   
       	if ( ! empty( $region_list ) && ! is_wp_error( $region_list ) ) :
       		$region_array = array();
       		$x            = 0;
       		foreach ( $region_list as $term_single ) :
       			$region_array[ $x ]['title'] = $term_single->name;
       			$region_array[ $x ]['url']   = get_term_link( $term_single->slug, 'region' );
       			$x++;
       		endforeach;
       	else :
       		$region_array['items'] = array( 'Not Streaming' );
   
       	endif;
       	return wp_json_encode( array( 'items' => $region_array ) );
       }
   
       if ( ! empty( $post_id ) ) {
       	get_region( $post_id );
       }
       ```
   
 * the amp list on the frontend will be something like this
 *     ```
       <amp-list
         width="auto"
         height="100"
         layout="fixed-height"
         src="https://www.flixwatch.co/stagin/region-data/?post_id=<?php echo $post->ID; ?>"
       >
         <template type="amp-mustache">
           <div class="url-entry">
             <a href="{{url}}">{{title}}</a>
           </div>
         </template>
       </amp-list>
       ```
   
 * Hope this help!
 *  Thread Starter [FlixWatch Support](https://wordpress.org/support/users/flixwatchsupport/)
 * (@flixwatchsupport)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/non-cacheable-components-elements-in-amp/#post-14570669)
 * Hi Milind,
 * Thanks for the code. I have added the same in the template but it’s not visible
   on the frontend.
    [https://www.flixwatch.co/stagin/movies/and-tomorrow-the-entire-world-und-morgen-die-ganze-welt/](https://www.flixwatch.co/stagin/movies/and-tomorrow-the-entire-world-und-morgen-die-ganze-welt/)
   [https://www.flixwatch.co/stagin/region-data/?post_id=72360](https://www.flixwatch.co/stagin/region-data/?post_id=72360)
 *     ```
       <?php
       $post_id = filter_input( INPUT_GET, 'post_id', FILTER_SANITIZE_NUMBER_INT );
   
       /**
        * Get Regions
        *
        * @param int $post_id
        * @return json
        */
       function get_region( $post_id ) {
   
       	$region_list = get_the_terms( $post_id, 'region' );
   
       	if ( ! empty( $region_list ) && ! is_wp_error( $region_list ) ) :
       		$region_array = array();
       		$x            = 0;
       		foreach ( $region_list as $term_single ) :
       			$region_array[ $x ]['title'] = $term_single->name;
       			$region_array[ $x ]['url']   = get_term_link( $term_single->slug, 'region' );
       			$x++;
       		endforeach;
       	else :
       		$region_array['items'] = array( 'Not Streaming' );
   
       	endif;
       	var_dump(wp_json_encode( array( 'items' => $region_array ) ));
       	return wp_json_encode( array( 'items' => $region_array ) );
       }
   
       if ( ! empty( $post_id ) ) {
       	get_region( $post_id );
       }
   
       ?>
       ```
   
 *     ```
       <amp-list
         width="auto"
         height="100"
         layout="fixed-height"
         src="https://www.flixwatch.co/stagin/region-data/?post_id=<?php echo $post->ID; ?>"
       >
         <template type="amp-mustache">
           <div class="url-entry">
             <a href="{{url}}">{{title}}</a>
           </div>
         </template>
       </amp-list>
       ```
   
 *  Plugin Support [Milind More](https://wordpress.org/support/users/milindmore22/)
 * (@milindmore22)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/non-cacheable-components-elements-in-amp/#post-14570808)
 * Hello [@flixwatchsupport](https://wordpress.org/support/users/flixwatchsupport/)
 * Instead of var_dump can you please `echo` the result.
 * `var_dump(wp_json_encode( array( 'items' => $region_array ) ));`
 * `echo wp_json_encode( array( 'items' => $region_array ) );`
 *  Plugin Support [Milind More](https://wordpress.org/support/users/milindmore22/)
 * (@milindmore22)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/non-cacheable-components-elements-in-amp/#post-14570875)
 * [https://prnt.sc/15ss3hk](https://prnt.sc/15ss3hk)
 * The `var_dump` is making it invalid json `echo` the result and it and it should
   work fine.
 *  Thread Starter [FlixWatch Support](https://wordpress.org/support/users/flixwatchsupport/)
 * (@flixwatchsupport)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/non-cacheable-components-elements-in-amp/#post-14571349)
 * Ah, yes. It works perfectly. Thank you Milind.

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Non-cacheable components/elements in AMP’ is closed to new replies.

 * ![](https://ps.w.org/amp/assets/icon.svg?rev=2527602)
 * [AMP](https://wordpress.org/plugins/amp/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/amp/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/amp/)
 * [Active Topics](https://wordpress.org/support/plugin/amp/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/amp/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/amp/reviews/)

## Tags

 * [amp-list](https://wordpress.org/support/topic-tag/amp-list/)
 * [iframe](https://wordpress.org/support/topic-tag/iframe/)

 * 12 replies
 * 2 participants
 * Last reply from: [FlixWatch Support](https://wordpress.org/support/users/flixwatchsupport/)
 * Last activity: [4 years, 11 months ago](https://wordpress.org/support/topic/non-cacheable-components-elements-in-amp/#post-14571349)
 * Status: resolved