endware: alter the response after it's generated for pages

[eric-burel]

Goals

1. Injecting a script in the HTML code based on User-Agent. For instance inject an iOS polyfill for older browsers

I want those use cases to not alter the static or dynamic nature of the page. For instance, I don't want to have to switch to dynamic rendering just to inject a polyfill for older Safari versions, or to craft a segmented rendering route parameter even if this is user specific.

So far I couldn't find a way to do this kind of script injection server-side, I had to opt for a client-side check.

Currently we can alter the response of the route object but not for pages. I think there has been discussion about changing the response status for instance, but I'd like to go further to be able to implement more advanced personnalisation use case.

Non-Goals

1. It's aimed at pages, not routes, since routes can already control the response and access the request
2. It doesn't aim to access the full request in pages, having headers and cookies is already a good start
3. It doesn't aim at handling basic use cases like changing the response status in a page. Here I really want to alter the final content sent to the browser.
4. It doesn't aim at setting status or headers or cookies, which I think can be set already in middlewares by creating a new response with NextResponse.next() and altering the headers/cookies.

Background

The polyfill has to be loaded before any other code. One real-life example is bringing replaceAll to older Safari versions (the one on my old Ipad still need a polyfill for that :'().

However I don't want it in the response of other users.

For managing such scripts, current alternative is using dynamic server-side rendering + React to be able to access headers and request and alter the render accordingly. It's not possible to keep the page static as far as I can tell.

One technical subtlety is that in presence of streaming, sending the response is not an immediate task. You start sending the response, and then keep streaming content.

Therefore an "endware" could only be positioned just before the response is sent and thus before the streamed content is actually generated => it can't really alter the final render.

However, I am not sure if this is true for static content, which is already rendered at build-time. And that's specifically for altering static content that I would need "endwares" the most.

Related:

• A complete thread about status code: Support custom HTTP Status Code for Server Components
• A custom server would allow to alter the HTML of the response, Astro document a similar use case, but not using edge middlewares

Proposal

Propose "endware" = a middleware that runs at the end of the whole request/response roundtrip. It would take the current request and current response as paremeters, and return a new response.

Fun fact

This is how user tracking is implemented in a research paper foundamental to the field of web analytics: Atterer, R., Wnuk, M., & Schmidt, A. (2006, May). Knowing the user's every move: user activity tracking for website usability evaluation and implicit interaction. In Proceedings of the 15th international conference on World Wide Web (pp. 203-212).

Related

"Endwares" would allow to properly set the "lang" parameter of the html in user-land, and not have to wait the framework to fix this issue
#49415