How to Deliver Dynamic AMP Content Using JSON

Yes, dynamic content is totally possible with Accelerated Mobile Pages (AMP) and JSON plays a role
Using JSON endpoints, AMP pages maintain lightning-fast speeds without losing the benefits of dynamic content

Since its inception in 2015, the Accelerated Mobile Pages (AMP) initiative has been known for delivering mobile speed due to lightweight design and its use of the Google content delivery network to cache pages. In fact, delivering AMP pages from the Google Cache is a key component to secure super-fast page load times.

While Google’s cache is very fast, this traditionally means storing and delivering static, non-changing pages. However, sometimes content needs to be generated that is specific to a user or that needs to be less than 15-seconds old. And for e-commerce sites, this is often the case regarding a product’s pricing and availability. So what about pages with non-static, dynamic content?

Dynamic content is used on almost all major websites. Commonly, it takes the form of a search bar with live suggestions, in-page content filtering, customized user content, or time specific data — all of which greatly affect user engagement and allow for a better user experience for visitors. By utilizing JSON endpoints, in AMP, it’s possible to maintain lightning-fast speeds without losing the benefits of dynamic content. 

How JSON Works

Dynamic content is added to AMP pages through specific AMP components designed to utilize JSON. These components request data from a JSON endpoint and display the returned data as a well-formed DOM fragment for users to consume at optimal times during page-view.

This process does not just happen when the page first loads. As a user interacts with the site they’ll often trigger actions that will request data from a JSON endpoint, which will then update the data in the page’s AMP components, causing the page to update.

AMP requests and renders this JSON through the use of amp-list. Amp-list makes the JSON request directly from your servers to your AMP, and uses a mustache template to format and render the data in the desired layout. As a result, customized content is shown.

By utilizing amp-list and a JSON endpoint, AMP pages can apply live content to sites, while still delivering the unmatched mobile speed that makes AMP so valuable. Now that you have a basic understanding of how it all works, here are examples:

  • Campmor hiking boots: Products matching the category are requested via amp-list and rendered on page load. Additionally, as the user adds filters, sorts the products, or wants to see the next page of results, an updated request is made to the JSON endpoint for new data which is then rendered and displayed.
  • NetNutri: As a user types in the search bar, amp-list requests JSON to show related products and their corresponding images.
  • AT&T iPhone 7: As a user types in the search bar, amp-list requests JSON to show related searches. Additionally, the customer reviews or Q&A sections of the page, utilize other amp-lists to display this data from additional endpoints.