RSC: loader improvement & shared components

[huozhi]

Background

We have 2 webpack loders to handle the transform of server and client components on both server and client side, to make sure:

• server components won't get executed on client side
• client components can be SSR’d

Problem

Exports

Those loaders assume you define components with export default by default. Which has limited users' ability to export components more flexibly.

Shared components

And we don't know how the shared components are defined: if a component from a file with js extension is imported and can work well in both server/client components, we call them shared components. Loaders should be able to handle those cases to let shared components behave differently on the 2 sides.

Since the import paths could be aliased, the import identifiers could be renamed or assigned dynamically, it's hard to capture it as a shared one or not. This could be tricky.

[mohsen1]

I wonder if import assertions can be useful here. Just like how you can't rely on file extensions for mime types, we can't rely on file extensions here (.server.{js,ts,tsx}). As you mentioned aliasing and all other dynamic importing shenanigans (import(<expression>) etc ) makes it impossible to always cleverly figure out if a component is server, client or shard.

import SomeComponentFromALibrary from '@library/component-name' assert { type: "server.js" };

Just an idea...

[shuding]

Yep I agree that import assertion is a good idea to hint the compiler. An alternative way is to create a no-op .server.js (or .client.js) file to re-export the lib.

[huozhi]

After doing some investigation on import assertion we'd likely hold it so far and keep the convention of using .server.js and .client.js so far as it's recommended by react team. And solve shared components in other alternative way.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.