Next.js SSR (Pages Router) with CSP

Stencil
1

I’m experiencing issues with Stencil when I try to set up a Content Security Policy Response Header with nonces in my Next.js (v14) project. I’m using the pages router, because there seems to be no easy way to add "use client" to the components of our Stencil components library, except for manually wrapping them all.

The problem is that Stencil’s defineCustomElements tries adding a <style> tag to the DOM (see here), which happens only on the client side and so using Stencil’s setNonce doesn’t help.

So there are several questions that I can’t seem to find an answer to right now:

  1. Can I somehow place the “defineCustomElements” call in a Next.js app in a way that it works on the server-side and thus using “setNonce” makes sense?
  2. The Stencil docs state that I can add a meta tag to my <head> with the name “csp-nonce” (see here). This doesn’t seem to have any effect in our setup. What are the prerequisites for this to work?
  3. There’s also the hydrateDocument functionality to enable SSR (see here), but there is no real information how to integrate it. How do I integrate this with Next.js?
  4. Is there maybe even a proper way to make the Stencil components ready for use in React server components without having to wrap them manually (or applying a patch via npm)?

These questions lead me to a superordinate question or rather request: Is there an example of how to properly integrate a Stencil-based component library into the latest Next.js in a way that SSR works for the components and nonces of a CSP header can be properly applied? If not, would someone point me to the right information so that I can do it on my own, or even better, create such an example in order to help me and future users with that (probably pretty common) use case? The latter might also be a “feature” request for the stencil website. Thank you very much for your help! :yellow_heart: