RFC: Stylesheet deduplication for SSR

[nolanlawson]

Rendered

[nolanlawson]

Feedback from @InstyleVII:

• Need a game plan for transitioning to the native browser API. Make it future proof.
• Not doing this in engine-server is good – it makes it as a carrot to move to the new system.

[nolanlawson]

Feedback from @divmain:

• Why allow specifying href? Why not generate it ourselves?

For flexibility basically – consumers will probably use a hash, but they may have complex paths depending on CDN etc.

[nolanlawson]

TODO: need benchmark for light DOM as well.

[khangsfdc]

Can you explain why this change increases the possibility of hydration mismatch?

[nolanlawson]

Right now the hydration mechanism for <style>s is the same as any other DOM element. Whereas if we render <link>s then we will need to instruct hydration with something like "If you see a <style> with such-and-such text content (e.g. a checksum), then consider it the same as a <link> with such-and-such attributes."

[lpomerleau]

consumer side (which will have to do the bulk of the work of managing and hosting the stylesheets themselves)

Does the consumer need to add <style> or <link> tags to the base doc for each stylesheetCache item? Or does the <lwc-style> component handle the stylesheets (as long as registerLwcStyleComponent() is called on the client)?

[nolanlawson]

No, the consumer does not need to do anything. LWC itself (and notably the <lwc-style> component) will 1) render a <style> the first time it sees it, and put it in a global cache, and then 2) render nothing the next time, because it can look up the <style> via the style-id attribute. I'd recommend reading Rob Eisenberg's design which I shamelessly stole.

[khangsfdc]

on the consumer side (which will have to do the bulk of the work of managing and hosting the stylesheets themselves).

I am confused about this statement relative to the above comments.

[lpomerleau]

+1. That statement triggered my original question in this thread.

[nolanlawson]

Invalid sentence from the previous RFC. Removed.

[lpomerleau]

What happens if registerLwcStyleComponent() is not called? Will all SSRed components be un-styled?

[nolanlawson]

Correct.

[khangsfdc]

Should this call occur before hydrateComponent?

[nolanlawson]

For sure, yes. It should happen as early as possible (to avoid FOUC).

[khangsfdc]

will be populated with any stylesheets (as strings)

Do you have an example of how the cache is pre-populated? It's not clear to me how the caller could pre-populate the cache.

[nolanlawson]

My idea is that the caller would normally provide an empty Set. However, in the case of LWR (for example), you might call renderComponent multiple times for multiple islands on the same page. However, these islands can still all share the same cache. (No sense in rendering the same <style> once per island.)

So for example you could do:

const stylesheetCache = new Set()
for (const island of islands) {
  await renderComponent(island, { stylesheetCache })
}