https://github.com/sibelius/react-server-components-playground

Webpack version of React Server Components Demo (do not use in production)
https://github.com/sibelius/react-server-components-playground

react server

Last synced: 3 months ago
JSON representation

Webpack version of React Server Components Demo (do not use in production)

• Host: GitHub
• URL: https://github.com/sibelius/react-server-components-playground
• Owner: sibelius
• Created: 2021-01-05T13:18:23.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2022-02-24T15:17:17.000Z (almost 3 years ago)
• Last Synced: 2024-10-23T04:53:52.388Z (3 months ago)
• Topics: react, server
• Language: TypeScript
• Homepage:
• Size: 190 KB
• Stars: 145
• Watchers: 6
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-list - react-server-components-playground

README

        
# 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](https://github.com/reactjs/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](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html), 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](https://github.com/sibelius/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

```bash

yarn plugin

```

Run the Client and Server Bundler at the same time

```bash

yarn start

```

## Some explanations

[./plugin](./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

```jsx

{

        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'),

        ],

      },

```