No support for HTML partials in request-state and request-nanostores #248
Description
We want to use Astro behind a proxy server which stitches together Astro partials from various sources. These partials will be included in a HTML document, so they don't have <head /> tags themselves. request-state then doesn't include the serverside state in the document:
const headCloseIndex = originalBody.indexOf('</head>');
if (headCloseIndex > -1) {
const state = getState();
if (state) {
const stateScript = `<script id="it-astro-state" type="application/json+devalue">${state}</script>`;
return new Response(
originalBody.slice(0, headCloseIndex) + stateScript + originalBody.slice(headCloseIndex),
result
);
}
}I can see a few solutions to this:
- If there's no head, insert the script at the start of the document
- If there's no head, insert the script inside the parent node of the document
- Expose a function from
request-stateandrequest-nanostoresthat lets the user manually generate the script tag and include it in their markup.
Also, if we fix this problem by making sure a script like <script id="it-astro-state" is injected for partials, we'll still only support one partial per page. To fix that, I think we'll need to either use a dynamic ID which both the server and the client code know about or have the client script combine a list of <script class="it-astro-state" to form the global page state, reconciling any conflicts. And there's a choice here - would we want each partial to have its own state, or each partial to share a global state?
I'm happy to work on a simple solution to this, though I'd be curious to hear others' input first