Note: I wrote this quite some time ago, but we didn’t end up using the SSR custom element at work, so it just sat for a while.

I think the subjet matter is kind of cool, so I’ll post it anyway.

What are Custom Elements?

Custom elements are a web standard way of creating framework-agnostic custom html elements. I believe it’s indended to let developers of things like react-flow to release their components without forcing downstream devs into using react themselves (although, in that case react would be shipped as part of the custom element bundle)

Why even look into this?

I currently work at a company focued on increasing reader engagement on third-party publisher websites. Think sites like Forbes or Wired. Our goal is to provide publishers with tools to keep readers on the page longer.

Recently we started making a series of “widgets” for publishers to put on their articles. Most of our publisher contacts arent super technical, they manage a CMS like wordpress, but generally don’t have much web development expertise. Additionally, in order to display ads and have them count for the publisher, we need to avoid using iframes, as most ad companies have policies against their usage.

This led us to build out a custom element using Vue. We created our first `really-cool-widget`.

Our publishers like it because it’s easy to incorperate in their site. We have them add something like this snippet:

<script src="https://our.site/path/to/really-cool-widget.client.js"></script>
<really-cool-widget></really-cool-widget>

Okay, so custom elements instead of iframes. Why SSR?

Your page gets downranked if content moves around the page and our custom elements need to display some data that we have on our servers, but our customers don’t, so they need to make a call to us in order to fetch that data. Because we have no way of knowing the amount of data to display at once, we can’t know the size of the element at the first page render.

Preventing that is the primary motivation for SSR.

What Have You Tried?

At work we use Nuxt to build our frontend, and leverage it and the nuxt-custom-elements plugin to build our custom elements. I was actually able to get an endpoint set up in nuxt which returned some SSR’d html that I was able to load on a page through a thin custom element shim.