RSC: how to to modify HTTP Header (e.g. Cache-Control) from a server component?

[nsams]

nextjs has this cacheLife function implemented using an Async Local Storage.

I failed doing the same (ALS.run in entry.rsc) but failed because:

• for rsc request, the Response object (+ response headers) is created before the component is rendered (that somehow happens during streaming afterwards)
• for html response, the ALS store gets undefined after loading the ssrEntryModule

See stackblitz for what I have tried so far

[hi-ogawa]

The behavior seems expected.

As far as I can guess, what next.js does for cacheLife is not actually for changing http header of streaming response, so they don't need to solve a issue which you are demonstrating. For example, "use cache" implementation can wait for streaming to end like vite-plugin-react-use-cache does https://github.com/jacob-ebey/vite-plugin-react-use-cache/blob/027b17a8e3f79fdffc5dcd127fd86122e0c1a71d/packages/vite-plugin-react-use-cache/src/runtime.ts#L105-L114.

Btw, AsyncLocalStorage on stackblitz has a bug, so I recommend testing it locally. For example, this is the log I see when tested locally:

store before ssrEntryModule { time: undefined }
set cacheLife 60
store after ssrEntryModule { time: 60 }
store before respond html { time: 60 }

[nsams]

The behavior seems expected.

I understand. Still, my use case is to set a Cache-Control header in order for a CDN to cache the RSC request.

I now came up with this workaround:

        const [waitForHtmlTagStream, responseRscStream] = rscStream.tee();

        async function waitUntilHtmlTagArrives(stream: ReadableStream<Uint8Array>): Promise<void> {
            stream = stream.pipeThrough(new TextDecoderStream() as any);
            const reader = stream.getReader();

            let previousChunk = "";
            let totalBytes = 0;

            while (true) {
                const { value, done } = await reader.read();
                if (done) break;

                totalBytes += value.byteLength;

                if ((previousChunk + value).includes(`"$","html"`)) break;
                if (totalBytes >= 20000) break;

                previousChunk += value; // keep only two chunks in memory
            }

            reader.releaseLock();
        }
        await waitUntilHtmlTagArrives(waitForHtmlTagStream);

Checking for "$","html" is fragile, any idea what else could be done?

Btw, AsyncLocalStorage on stackblitz has a bug, so I recommend testing it locally. For example, this is the log I see when tested locally:

ah, good to know!

[hi-ogawa]

I understand. Still, my use case is to set a Cache-Control header in order for a CDN to cache the RSC request.

This would be technically pure React question and not relevant to Vite plugin per-se. From what I understand, React doesn't provide primitive to achieve such mechanism, so you need go from framework level convention. For example, React router's loader is ensured to be executed (await-ed) before returning a main Response, so people can use that for manipulating response header out of main RSC streaming.