Rebuilding Supernotes Sharepages (on Cloudflare Workers)

By Connor Neblett on Thu Aug 08 2024

On Supernotes, we’ve had the ability to publicly share cards via “sharepages” since very early on. For any card in your library, you can create a link (with a four word code) that is accessible to anyone who has that link. It works pretty well!

When we first built these sharepages, we decided to make them part of our broader React app in order to ship quickly without worrying too much about the process. We already had well-styled, battle-tested React components for the cards and such, so it was much easier to re-use those directly and not re-invent the wheel.

However, this had a number of downsides:

• tree-shaking was difficult, so when someone visited a sharepage, the entire React app needed to be downloaded to their browser before they could see the content
• as a dynamic react app, nothing was rendered server-side. This meant things like OpenGraph (OG) images could not be dynamically generated for each sharepage, but were rather the same image for everything (see below)
• it placed more load on our infrastructure than we would like, and if a sharepage was shared very broadly and received substantial traffic, this could degrade performance for the rest of the platform
• more advanced features (like sharing a card as a dynamic image rather than a webpage) were impossible with this architecture

That being said, the sharepages still did their job admirably, so for years we kinda just… left them like that. But at the beginning of 2024, we decided that enough was enough and we needed to address these issues. Our #1 priority was building a solution that was fully rendered server-side to allow for unique OG content and much better performance. So we entirely rebuilt our sharepage system from the ground up on top of Cloudflare Workers, which we’d used before for small pieces of Supernotes infra, but never for something as critical as this.

Picking a router

Because there were going to be a variety of paths involved, the first thing we needed to do was pick a

Getting OG Images Working

Cache Invalidation and JIT Sharepages

Finishing Up

• performing additional validation of sharecodes
• had to switch to a subdomain
• costs

Future Work

• puppeteer is too slow – need to either have puppetteer take screenshots more optmistically, or we need do greatly increase