score:0

you will need to hydrate your rendered html in the client side in order to have react take over.

create a client.js file with:

import react from 'react';
import reactdom from 'react-dom';
reactdom.hydrate(
  <app/>,
  document.queryselector('#app'),
);

note that the hydrate should match what rendertostring rendered.

next add this as an additional entry in your webpack configuration:

module.exports = [
{
        /*config for backend code*/ 
        entry: './src/server/server.js',
        target: 'node',
        output: {
            filename: 'server.js'
        },
        externals: [nodeexternals()],
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader"
                    }
                },
                {
                    test: /\.html$/,
                    use: {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                },
                {
                    test: /\.css$/,
                    use: [minicssextractplugin.loader,"css-loader"]
                }
            ]
        },
        plugins: [
            new htmlwebpackplugin({
                template: "./public/index.html",
                filename:"./index.html"
            }),


  new minicssextractplugin({
            filename: "[name].css",
            chunkfilename:"[id].css"
        })
    ]
},
{ 
   entry: './client.js',
   output: {
      filename: 'bundle.js',
   },
   module: {
      rules: [ {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
      },
   ],
 },
]

change your html rendering code to include this:

const html = ({ body, styles, title }) => `
  <!doctype html>
  <html>
    <head>
      <title>${title}</title>
    </head>
    <body style="margin:0">
      <div id="app">${body}</div>
      <script async src="/bundle.js"></script>
    </body>
  </html>
`;

i'm not 100% confident on whether this exact code will work but this is the general idea.


Related Query

More Query from same tag