< Back to archive

Jamstacked Issue 66

A decade in, web components hit their stride

Published: Oct 13, 2022

Your update on all things Jamstack
 

#​66 — October 13, 2022
✦ web version

It's been over a decade since web components were first introduced. There was a lot of hype in the years that followed and subsequently what seemed like a lot of disallusionment. However, a decade later it feels as though web components are finally hitting their stride and, as some of the posts here show, static site generators (SSG) and JavaScript frameworks will likely play a large role in their adoption.

Brian Rinaldi

↘︎ What's good

Using Web Components With Next (or Any SSR Framework)
A current shortcoming with web components today is that they lack support for server-side rendering (SSR). This means that, in JavaScript frameworks, the code to make Web Components work doesn’t run until hydration occurs. This post looks at a potential solution to this, though with some significant caveats.

Adam Rackis

Adding Components to Eleventy with WebC
WebC is a framework-independent, standalone HTML compiler for generating markup for web components created by Zach. Using its corresponding Eleventy plugin it brings first-class component support to Eleventy (without requiring Vue).

Zach Leatherman

Server-Side Rendering and React
If you're looking to get started using SSR and React-based frameworks, there were a number of links this week:

✂︎ Tools, Resources & More...

❖ Tidbits

Introducing OG Image Generation: Fast, Dynamic Social Card Images at the Edge
Vercel has released a new library for automatically generating and caching dynamic social card images at the edge that also has Tailwind CSS support.

Vercel

Using a Netlify Edge Worker to Cut Down on Header Bloat by Removing HTML-Only Headers from Static Assets
How to use edge functions to improve a site by removing unnecessary security headers that have been added to non-HTML resources.

Phil Hawksworth

Two Methods for Binding JavaScript Events with 11ty
A look at using inline JavaScript or data attributes to add the necessary JavaScript for interactivity in an Eleventy site. Also check out Sean’s post on JavaScript for 11ty with esbuild.

Sean C Davis

Cloudflare Pages Gets Even Faster with Early Hints
Early Hints is a new feature currently supported in Chrome version 103+ that sends “hints” to a browser about critical resources on your page (e.g. fonts, CSS, images) that the browser can immediately start loading before waiting for a full HTML response.

Greg Brimble

Thanks for reading. — Brian