Traditional Sites

How Edgio for Traditional Sites Works #

• Globally distributed caching: Pages and content that are in Edgio cache will be returned to the user faster than being fetched from your server.
• Predictive prefetching: Edgio predictively prefetch and serve data to the device before the user even requests it. By effectively streaming page data to the device a few seconds ahead of the shopper, the page load becomes instantaneous because there is no network to wait for. Normally the increased traffic from this kind of data streaming would overload your server, but Edgio’s caching layer acts as a “shield” to protect your origin for this load.

Implementation Process #

1. Make sure your pages are cacheable
2. Set up a project
3. Configure caching and prefetching
4. Test locally and on Edgio
5. Go live by changing the DNS

Make Sure Your Pages are Cacheable #

• Badges indicating the number of items in cart or bag
• Text or buttons dependent on the username or login status (e.g. “Login”, or “Welcome Bob”)
• Segmented or personalized content such as recommended products based on the user’s profile or browsing behavior (note that recommended products based on page data are cacheable because the same recommended product would be shown to all users).
• User specific parameters for analytics (e.g. if analytics tracks users by their userid or how frequently they visit the site).

Connector #

Prerequisites #

• An Edgio account. Sign up for free.
• An Edgio property. Learn how to create a property.
• Node.js. View supported versions and installation steps.
• Edgio CLI.

Install the Edgio CLI #

1npm i -g @edgio/cli@^6.0.0

Setup a Project #

1npx @edgio/cli@^6.0.0 init \
2    --edgioVersion ^6.0.0 \
3    --name <DOMAIN> \
4    --environment default \
5    --origin <DOMAIN> \
6    --deploy

Project Structure #

• service-worker.ts: Is run on the browser. The service worker is able to prefetch content (main product image, scripts, fonts, links, etc. as defined here) from within the potential next page’s document. We call this method “deepfetching”. This file is where deepfetching rules are defined: the selector, how many elements, which attribute to fetch, resource type, and an optional callback function for more complex fetches (as shown in the example). Here’s more detailed info about deepfetching.
• shoppingFlowRouteHandler.ts: Is run on Edgio. It’s where the caching rules get implemented, as well as where the modifications to be made to the requests and/or responses to support caching of dynamic content are defined.
• cache.ts: This is where the caching rules are defined for both Edgio (edge) and the browser.
• routes.ts: This is where the routes to be cached and prefetched are defined, as well as what to pass through without modification and what to serve up as static content.
• browser.ts: This is the entry point for the main.js javascript bundle which is added to the window.

Configure Caching and Prefetching #

1// routes.ts
2import {Router} from '@edgio/core/router';
3import shoppingFlowRouteHandler from './shoppingFlowRouteHandler';
4
5export default new Router()
6  .get('/', shoppingFlowRouteHandler)
7  .get('/collections/*path', shoppingFlowRouteHandler)
8  .get('/products/*path', shoppingFlowRouteHandler);

1// shoppingFlowRouteHandler.ts
2import {CACHE_PAGES} from './cache';
3import {RouteHandler} from '@edgio/core/router/Router';
4
5const handler: RouteHandler = async ({cache, removeResponseHeader, proxy}) => {
6  cache(CACHE_PAGES);
7  removeUpstreamResponseHeader('set-cookie'); // The presence of a set-cookie header would prevent the response from being cached, so ensure set-cookie headers are removed.
8  proxy('origin');
9};
10
11export default handler;

1// cache.ts
2const ONE_HOUR = 60 * 60;
3const ONE_DAY = 24 * ONE_HOUR;
4const ONE_YEAR = 365 * ONE_DAY;
5
6/**
7 * The default cache setting for pages in the shopping flow
8 */
9export const CACHE_PAGES = {
10  edge: {
11    maxAgeSeconds: ONE_HOUR,
12  },
13  browser: {
14    maxAgeSeconds: 0,
15    serviceWorkerSeconds: ONE_HOUR,
16  },
17};

Understanding Caching and Prefetching #

Test Your Code Locally and on Edgio #

Running Locally #

1edgio dev --cache

Running on Edgio #

1edg deploy --team=<TEAM>

Go Live by Changing the DNS #

1. Specify the domain name of the site under the Configuration tab for the environment in the Edgio Developer console.
2. Configure your SSL certificate under the Configuration tab for the environment in the Edgio Developer console.
3. Create a CNAME record with your DNS provider with the value shown under the Domains section for the environment in the Edgio Developer console.

Advanced Prefetching Techniques #

Deep Fetching #

Prefetching POSTs #

1import {transformMethod} from '@edgio/core/transform';
2
3const postCacheConfig = {
4  edge: {
5    maxAgeSeconds: 60 * 60 * 24,
6    staleWhileRevalidateSeconds: 60 * 60,
7  },
8  browser: {
9    serviceWorkerSeconds: 60 * 60 * 24,
10    convertToGet: true,
11  },
12};
13
14export default new Router()
15  // When the request is a GET, convert it to post using serverless compute and cache the result
16  .get('/some-post-path', ({cache, proxy}) => {
17    cache(postCacheConfig);
18    proxy('origin', {
19      transformRequest: transformMethod('post'),
20    });
21  })
22  // When the request is a POST, forward it to origin from the edge without using serverless compute
23  .post('/some-post-path', ({cache, proxy}) => {
24    cache(postCacheConfig);
25    proxy('origin');
26  });

Prefetching based on Element Visibility #

1import {install, prefetch} from '@edgio/prefetch/window';
2
3document.addEventListener('DOMContentLoaded', function () {
4  install({
5    // If you don't have links specified with a `<a>` tags with `href` attributes, you can also
6    // specify watchers to prefetch when other elements are added to the page:
7    watch: [
8      {
9        selector: 'div.product-tile',
10        callback: (el) => {
11          const productId = el.getAttribute('data-product-id');
12          const catId = document
13            .getElementById('cat-listing')
14            .getAttribute('data-category-id');
15          prefetch(`/api/${catId}/${productId}`, 'fetch');
16        },
17      },
18    ],
19  });
20});

Maintenance #

• If you add personalized or user-specific content to the page you will need to make sure it is late loaded as described in the Make sure your pages are cacheable section.
• If you introduce a new segmentation of content (e.g. support a new language or currency), you may need to update your custom cache key.
• If you change the layout of the page (especially above the fold), it may alter the assets you need to prefetch or deepfetch to achieve the best performance.