Adding a script "process" attribute (like the context attr) to specify client or ssr?

I think it would be cool if you could specify component code to be run on the client or during SSR like:

<script process="ssr">
// Would only be performed during SSR.
</script>

<script process="client">
// Would only be performed in the client.
</script>

My specific use case would be to only import svelte-apollo (which requires fetch to be available) in the client bundle so I don’t have to install node-fetch and waste time importing it since it’s irrelevant during SSR.

[pngwn]

This seems very confusing. What happens if you define some variables in this ssr script and nowhere else and then use them in the component? They will only available some of the time. This would would force users to reason about their components running in separate contexts because the behaviour would differ in a non-obvious way. This isn’t a problem with a simple if (process.browser) because that just follows basic javascript scoping rules as opposed to introducing arbitrary ones.

Dynamic imports do return promises and so are async by default but I still think it is preferable to components differing significantly in behaviour depending whether they are run in the browser or on the client.

[ianwalter]

That’s a good point. I still think it could work maybe if the variables defined in the process script blocks were only made available to a non-process script block and only non-process script blocks were used for sharing variables to component markup, but I didn’t think that through.

Going to close this but I just remembered that for others looking for a solution to the original issue that prompted this proposal, other than using process.browser and dynamic imports, if you’re using Webpack, you can also use null-loader in your server Webpack config so that client-side libraries are imported as empty packages and don’t throw errors during SSR.

Thanks for your time @pngwn @Conduitry.