React Server Components Playground (Not for Production)

This is a React Server Components Playground to make it easy to experiment with Server Components

it is based on server-components-demo

Can I use this in production?

🔴 🔴 🔴 Oh dear, no. Please, DO NOT use this in production! 🔴 🔴 🔴

As stated on the React blog, Server Components are an early experimental tech preview, and are nowhere close to being usable or supported for production apps today.

This boilerplate is not developed by the React team, and does not represent how Server Components will actually be integrated by the time they are stable. Instead, the first high-quality integrations will be developed in collaboration with React frameworks.

Does this solve SSR?

Not yet, maybe in the future. For SSR check this react-webpack-ssr-boilerplate, it is the simplest React SSR Boilerplate out there. It is just 2 webpack (client and server)

How to start

Run the plugin and loader transpilation using babel

yarn plugin

Run the Client and Server Bundler at the same time

yarn start

Some explanations

./plugin folder has some copied and modified react-server-dom-webpack files

ReactFlightWebpackPlugin modifications

• Be able to have client references using Typescript

ReactFlightWebpackLoader

• A loader to be used on the server to transform client references
• It is similar to ReactFlightWebpackNodeRegister
• This enable avoiding transpiling on the fly in production

{
        test: /\.client.(js|jsx|ts|tsx)?$/,
        use: [{
          loader: require.resolve('./plugin/ReactFlightWebpackLoader'),
        }, {
          loader: 'babel-loader?cacheDirectory',
        }],
        exclude: [
          /node_modules/,
          path.resolve(__dirname, '.serverless'),
          path.resolve(__dirname, '.webpack'),
        ],
      },