Edgemesh Server Dynamic HTML Fragments for Mostly Cacheable Content.
For most content, Edgemesh Server will work without any code modifications and the page experience will be accelerated via intelligent edge caching. For fully dynamic pages such as carts and accounts, Edgemesh Server knows that the page can not be safely cached and accelerated and instead goes to the server directly for a server rendered experience.
But what if you have a page where 99% of the content can be safely cached but a single section requires some dynamic server side logic? It would be a shame (and massive performance loss) to allow this 1% of dynamic content to prevent the page from being cached.
Throwing an entire page from being cache-able due to one component is painful
To combat this, Edgemesh Server allows you to selectively serve sections of HTML without caching using the data-em-async HTML attribute. We call this Dynamic Fragments, a simple change developers can make to content to let Edgemesh Server know to cache most of the site, but intelligently fetch the dynamic content from the server without suffering a performance penalty!
Basics
Let's say you have a page with a server-side rendered variable on your / route such as:
This full HTML would not be cacheable due to the templated customer name. The cached response would contain the name of the customer that initially cached the response and subsequent cached responses would be inaccurate. Enter Edgemesh Server Dynamic Templates.
The first step would be to serve the dynamic content on its own page. In the case of our example, you would make a new route that serves the dynamic content. Lets call it /welcome and it would contain the following template:
Replace any dynamic HTML with an element with the data-em-async attribute where the value is the URL to the new page fragment we have just created. Edgemesh Server will then detect those tags and replace them with a client-side fetch and replace. When all is said and done the client-side HTML will be:
The HTML element with the data-em-async attribute is completely replaced with the content from the page fragment we created earlier. No extra elements will be injected and the resulting dynamic content will not be cached by Edgemesh Server.
In most cases, its best to try to move these dynamic features to the client side via REST endpoints, but where that is not possible Edgemesh Server Dynamic Fragments for the win.
Shopify Example
To demonstrate a more real-world example, let's take a server-side rendered Shopify pop-out cart and render it using Dynamic Fragments.
Find and Isolate Dynamic Content
The first step is to locate the dynamic content and isolate it into its own section if it isn't already.
<buttontype="submit"name="checkout"class="btn">{{ 'cart.general.checkout' | t }}</button>
14
<buttontype="submit"name="update"class="text-link txt--minor">{{ 'cart.general.update' | t }}</button>
15
</div>
16
</footer>
17
</form>
18
{% else %}
19
<divclass="text-center">
20
<h1>{{ 'cart.general.title' | t }}</h1>
21
<pclass="cart-empty-message">{{ 'cart.general.empty' | t }}</p>
22
<pclass="cart-cookie-message">{{ 'cart.general.cookies_required' | t }}</p>
23
<pclass="cart-continue-browsing">{{ 'cart.general.continue_browsing_html' | t }}</p>
24
</div>
25
{% endif %}
26
</div>
Copied!
Create a Page Template
Next, create a page template for your cart fragment. Set the Create a new template for dropdown to page and the template type to liquid. Let's name the template popout-cart.
Creating a page template for the dynamic fragment.
Now that the page is created, we can add our section. Make sure to add the liquid directive {% layout none %} so that your page does not include any layout code.
templates/page.popout-cart.liquid
1
{% layout none %}
2
{% section 'popout-cart' %}
Copied!
Create an Empty Page with New Template
Next, go to Online Store > Pages and create a new page for your fragment. Set the title popout-cart, set the template to the template we just created popout-cart and leave the body blank. Publish the page and check to see if it's working by going to https://yourstore.com/pages/popout-cart. You should see the content from the popout cart section we created without any styles.
Creating a custom page for the dynamic fragment.
Replace Liquid template with Dynamic Fragment
Finally, we can replace the liquid section import with a dynamic fragment. Find the template that includes your popout cart and replace the {% section popout-cart %} with <div data-em-async="/pages/popout-cart" />
Before:
templates/theme.liquid
1
...
2
3
<divid="nav-container">
4
{% section 'popout-cart' %}
5
</div>
6
7
...
Copied!
After:
templates/theme.liquid
1
...
2
3
<divid="nav-container">
4
<spandata-em-async="/pages/popout-cart"/>
5
</div>
6
7
...
Copied!
Its worth noting that this will only work when requests go through Edgemesh Server. To make sure design mode and page previews render as well, add a conditional to enable the dynamic fragment for the live site only.
templates/theme.liquid
1
...
2
3
<divid="nav-container">
4
{% if request.design_mode or content_for_header contains "previewBarInjector.init();" %}
5
{% section 'popout-cart' %}
6
{% else %}
7
<spandata-em-async="/pages/popout-cart"/>
8
{% endif %}
9
</div>
10
11
...
Copied!
You can use any HTML element you like with data-em-async but span or another inline element is probably best to prevent layout issues.