Make dev server SSR work with non-node runtime

[zhuhaow]

Description

Currently in the dev server, ssrLoadModule assumes the page will be rendered in node runtime so it loads the function "in-place" with node. However, with edge runtime such as Cloudflare workers, fastly Compute@Edge and Netlify Edge functions, we can SSR page in the edge runtime which is mostly V8+Web API+a small set of selected features.

A similar issue has been raised before (#10396) but the author proposed solution is somehow misleading. We cannot get an edge runtime by poly-filling node runtime since:

1. we still have access to node API during dev but we cannot in prod.
2. something provided by edge runtime (e.g., Cloudflare KV) cannot be polyfilled.
3. edge runtime in prod may have different behavior than node runtime

Suggested solution

In order to let Vite dev server render pages in the correct runtime, it would be great if Vite could provide an(other) API that doesn't make assumptions about the runtime env.

Of course, it's the user's responsibility to integrate the local edge runtime simulator with the new API of Vite dev server. I would like to share my research on the local edge runtime provided by these edge service providers so we may have an idea of how this API would work.

All of them ban FS access, meaning we cannot import or require anything from disk as we do with node. workerd(Cloudflare) does provide the most powerful API. You can predefine all import mappings you so can use import without a resolver to import things from disk or memory. js-compute-runtime(fastly) will expect the script to be bundled first. I cannot find how Netlify provides a local edge runtime.

Overall, that means probably the most general way to support these runtimes (and future ones) is to provide a bundled script for a specified target (in this case, webworker or browser). Maybe something like const scriptCode: string = vite.ssrBundleModule("path").

Of course, if there is a more elegant solution that requires changes on the edge runtime side, we can also check with them. I talked with some folks from Cloudflare and since the edge is quite new, they are sometimes not sure what exactly is needed from their side.

I'm not sure how hard it is for Vite to do that since that probably is quite different from what Vite is doing during dev. But I do believe this is an important feature for future SSR.

I would love to contribute. Some guidance on how this should be designed or anything as a reference would be awesome.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sapphi-red]

Closing as #12165 is merged.