Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Determine how FASTStyle cache should work in SSR infrastructure #5909

Open
nicholasrice opened this issue Apr 27, 2022 · 0 comments
Open
Labels
area:ssr Pertains to SSR.
Milestone

Comments

@nicholasrice
Copy link
Contributor

@microsoft/fast-ssr implements a stylesheet cache to work with the FASTStyle custom element to reduce the stylesheet payload. When a stylesheet is first encountered, the sheet gets assigned an ID and the stylesheet content is emitted. When the stylesheet is encountered in subsequently, no stylesheet content is emitted because the sheet has already been sent to the client.

This caching behavior can lead to an interesting issue where, when there are multiple requests for a page, the stylesheet content is only sent to the first requestor, deferring to the cache in subsequent request responses. The approaches I've come up with to address this are:

A way around this currently is to create a new TemplateRenderer for each request:

Documentation:
The package exports a factory function to help avoid singleton issues like this. Perhaps it's enough to document the behavior, and advise to construct a new renderer for each response:

import fastSSR from "@microsoft/fast-ssr";

function requestHandler(request, response) {
    const { templateRenderer, defaultRenderInfo} = fastSSR();
    const result = templateRenderer.render(myTemplate, defaultRenderInfo);
    // ...
}

Implement a cache-busting method:
We could implement some cache-busting mechanism on the StyleRenderer (class responsible for rendering the styles) to purge the cache. Authors would need to invoke this when they saw fit:

import fastSSR from "@microsoft/fast-ssr";

const { templateRenderer, defaultRenderInfo, styleRenderer} = fastSSR();
function requestHandler(request, response) {
    const result = templateRenderer.render(myTemplate, defaultRenderInfo);
    // ...
    styleRenderer.cache.clear();
}

I'm not entirely happy with either of these approaches, so if folks have other ideas I'm all ears.

@nicholasrice nicholasrice added the status:triage New Issue - needs triage label Apr 27, 2022
@nicholasrice nicholasrice added this to the SSR Future milestone Apr 27, 2022
@nicholasrice nicholasrice added area:ssr Pertains to SSR. and removed status:triage New Issue - needs triage labels Apr 27, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:ssr Pertains to SSR.
Projects
Status: Triage
Development

No branches or pull requests

1 participant