Hi Guys! On our site, we are including multiple plasmic pages to compose a single page. There are multiple reasons for this:
• On some pages, we are using other content for the main body of the page, but plasmic for footer and nav
• Our nav is nested, and we use a plasmic page for each menu, loading and closing pages as people click through
We also use SSR, so each page we load / unload is raw HTML. For some we do hydration, for some we don’t
Our issue is that global styles are included in each of the pages, so when we load 3x pages on startup, it includes ~100kb of global styles x 3. (The first tag in each page is identical.
We tried to strip the style tags from all but one page, hoping that the one set of CSS would apply to the other pages, however scoped CSS variables prevent this from working…
@efficient_pelican Interesting.
• Does this only skip the global CSS?
• Assuming this works with hydration as well, as long as we use the same arg on server-side and client-side?
• How do we generate the CSS so we can include it once on our page?
@efficient_pelican part of my challenge is that I have a html page on top, and multiple server-side rendered <PlasmicRootProvider…> items on the page… I can cut out the CSS, but it is scoped inside the root provider, so hydration will fail if I cut it out… However with the above, I could cut it from all and include it once if I have a way of generating just the CSS…
@yang (and anyone else hitting this issue)
For all applicable assets / pages, I am stripping out any CSS out that matches this regex after server side rendering:
I am then including the matching CSS once in the head of the html, and all the plasmic pages that are rendered into the html renders without it. All seems to work like it should, and I save ~40kb of CSS per plasmic page I render into the HTML
Seems like the intro CSS is not entirely stable between pages… It mostly is, and renders fine, but the CSS varies a bit in some places. @yang is this intentional?
See example diffs from emacs between the items I thought would be static from two pages.
Wouldn’t it be beneficial for these things to be static / stable? (would definitely benefit me )
@chungwu any update here? I am trying to extract the shared CSS from the different plasmic renders so I can only include it once on our site (and also use it to style the rest of our page, which is in shopify)… But when the top CSS changes from page to page, it makes me a bit worried…
Sorry I missed this earlier. Are these pages coming from the same project? If they are all rendering the same published version of the project, the css should not be different
@chungwu thank you for confirming. I will double-check that they are from the same version.
Is there any way for me to figure out in the CSS what is shared and what is not?
I.e. “all the CSS down to XXX is shared”?
)
