Web Components at the Edge
summary
Shows Web Components rendered server-side and at the edge by pre-baking HTML and declarative shadow DOM so pages load with styles and slotted content and no client JS. Uses a custom tool wcc (Web Components Compiler) with Architect/AWS and Netlify Edge Functions to run custom elements in Node and constrained edge runtimes, does data-fetching lists (artist cards), progressive hydration via intersection observer, and hydrates a slider that animates on load. declarative shadow DOM works in Chrome/Edge with a tiny polyfill for others.
AI-written summary · about
chapters (9)
- 0:00Introduction to talk
- 2:33What is the edge
- 8:26Web components basics
- 12:57Server-side rendering web components
- 17:12Serverless function demo
- 22:08Progressive hydration demo
- 26:20Edge function demo
- 28:46Key considerations
- 30:33Web components community
related talks
01h 24mThe Future of the Web: From Cloud to Edge
20mPowering Up Micro Frontends At The Edge!
56mEdge-native applications - what happened to cloud-native?
29mJavaScript's Journey to the Edge
33mVue Rendering Modes
22mWebAssembly beyond the browser
01h 06mServerless and Edge Computing in Practice
24mServerless Rendering of Web Components