[facebook/react] Vite plugin for React Server Components (PR #22952)
DRANK

<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory. Before submitting a pull request, please make sure the following is done: 1. Fork [the repository](https://github.com/facebook/react) and create your branch from `main`. 2. Run `yarn` in the repository root. 3. If you've fixed a bug or added code that should be tested, add tests! 4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development. 5. Run `yarn test --prod` to test in the production environment. It supports the same options as `yarn test`. 6. If you need a debugger, run `yarn debug-test --watch TestName`, open `chrome://inspect`, and press "Inspect". 7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`). 8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files. 9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`). 10. If you haven't already, complete the CLA. Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html --> ## Summary Hi! This PR implements a Vite plugin for React Server Components. This is the approach we are currently exploring at `@shopify/hydrogen` and is [extracted from here](https://github.com/Shopify/hydrogen/pull/317). Hydrogen is right now using a custom implementation of RSC but we would like to switch to the official implementation [as soon as possible](https://github.com/Shopify/hydrogen/discussions/287) and make it work with SSR. This PR is meant to serve as a discussion to see what would be the best approach and some trade-offs. #### Assumptions and constraints As far as I understand, React 18 experimental supports server components by importing a "module reference" instead of actual client components in a Node process. This is done by using Node's native `--conditions` and registers/loaders. However, in order to do SSR we need the "real" client components in the process, not these module references. Therefore, it sounds like these two features are right now mutually exclusive unless we create 2 bundles or 2 different Node environments. On the other hand, Vite typically runs on only 1 process and its philosophy is basically no-bundles in development to speed things up. Plus, the main build target for Hydrogen is Oxygen and Cloudflare Workers, which can't be run as 2 processes and don't have Node's native `--conditions` or registers. #### Proposed approach Instead of relying on Node flags or registers, the Vite plugin in this PR is wrapping every client component in a proxy that merges the component itself with its module reference in the same object. The React SSR renderer will treat this resulting object as a normal component whereas the RSC renderer will use it as a module reference. This way, it can run RSC and SSR in the same process without requiring multiple bundles or Node flags. #### Implementation details and clarifications - The `ClientProxy` is basically wrapping components in ForwardRefs. The only reason to do this is so that the whole thing evaluates to `typeof component === 'object'` (instead of `'function'`) in order to reach [this line](https://github.com/frandiox/react/blob/f79d872c636a17ee94ee3f15b9b13f2cd283df01/packages/react-server/src/ReactFlightServer.js#L165) in the RSC renderer. This could be simplified if we are willing to change the `attemptResolveElement` logic a bit. - This does not use any manifest or "bundler config" because it relies on [Vite's glob imports](https://vitejs.dev/guide/features.html#glob-import). These imports are injected around the `__INJECTED_CLIENT_IMPORTERS__` object. --- Apart from implementation details that can be fixed or improved, would this be a valid approach in your opinion? Or would it be valid without the SSR piece (i.e. only RSC without merging module references and components)? Any other ideas that work with the constraints mentioned above? It would be interesting to generate the RSC flight response at the same time of doing SSR since tree nodes are both components and module references. However, I don't think there's any way to hook into that process right now. There's a demo project using this implementation here (only RSC, not SSR): [GitHub source](https://github.com/frandiox/server-components-demo) | [Stackblitz live demo](https://stackblitz.com/edit/vite-rsc-demo?file=vite.config.js)

github.com
Related Topics: React
1 comments
  • React Server Components周りの最適化で、バンドルの部分をNextjsはTurbopackにしたけど、Remixはどうするんだろ。
    hydrogenからのVite pluginのPRはまだ閉じてないしなぁ。

    Vite plugin for React Server Components
    github.com/facebook/react…