cloudflare.coffee

Cloudflare Pages

Removing the getServerSideProps method from our home page allows us to statically export this site, so it can be hosted by Cloudflare Pages. You can see it at https://pages.cloudflare.coffee.

But What About the Headers?

getServerSideProps was providing our request headers, so we need to migrate this to the Edge, using a Cloudflare Worker with the following code.

class HeaderInjector {
  constructor(headers) {
    this.headers = Object.fromEntries(headers);
    this.sortedHeaders = Object.keys(this.headers)
      .sort()
      .reduce((obj, key) => {
        obj[key] = this.headers[key];
        return obj;
      }, {});
  }
  element(element) {
    for (const header in this.sortedHeaders) {
      element.append(
      `<tr>
          <td>
            <details>
              <summary className="focus:outline-none">
                <samp className="whitespace-nowrap">${header}</samp>
              </summary>
              <samp className="ml-10">${this.headers[header]}</samp>
            </details>
          </td>
        </tr>`,
        { html: true }
      );
    }
  }
}

async function handleRequest(req) {
  const res = await fetch(req);
  return new HTMLRewriter()
    .on("tbody#headers", new HeaderInjector(req.headers))
    .transform(res);
}

addEventListener("fetch", (event) => {
  event.respondWith(handleRequest(event.request));
});

Why?

Avoiding a trans-Atlantic crossing results in significant speed improvements: 65% faster!

Speed Test Using cURL

% curl 'https://web-dyno.cloudflare.coffee' -s -o /dev/null -w "%{time_starttransfer}\n"
0.539435

% curl 'https://www.cloudflare.coffee' -s -o /dev/null -w "%{time_starttransfer}\n"
0.492738

% curl 'https://pages.cloudflare.coffee' -s -o /dev/null -w "%{time_starttransfer}\n"
0.191257