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.
Source: stackoverflow.com
Related Query
- Webpack 4 and react loadable does not seems to create correct chunk for server side rendering
- React Testing Library does not find elements using getAllByTestId after initial render
- Server-side render does not render UI library
- layout component does not unmount on server side when children unmounted
- Does react server side render wait for async calls to finish?
- Next.js and redux. Populating store on server side does not take effect
- The root path "/" does not match the reactjs declared route on server side rendering, when webpack middleware is used
- Background image does not render on server (nextjs)
- Development server of create-react-app does not auto refresh
- onFocus and onBlur does not render in react
- React 18: Hydration failed because the initial UI does not match what was rendered on the server
- React JS Server side issue - window not found
- Invalid options object. Dev Server has been initialized using an options object that does not match the API schema
- Sharing on social media, the URL does not render any meta data
- Rechart Responsive container does not render
- Material UI v5 server side rendering css order not working with gatsby
- 'ReferenceError: Headers is not defined' when using Headers in a server side rendered react project
- React Paginate Second Instance on same page does not re render
- Render different components on client and server side
- Semantic-ui-react library does not work; no errors
- Property 'value' does not exist on type 'HTMLElement' in React Testing Library
- React SVG import as a Component does not render
- Gatsby window not available during server side rendering build error
- Relay/GraphQL Schema cache not updating when I update schema on server side
- Warning: Did not expect server HTML to contain a <li> in <ul>. in React/Redux Server side Rendering
- ag-grid-react does not render properly
- Gatsby Failed Build - error "window" is not available during server side rendering
- Using express and es6 to render react and jsx server side
- JSDoc does not work in local package in a Lerna monorepo project using webpack dev server but works when released to package registry
- Typescript + Reactjs - Imported svg does not render
More Query from same tag
- When to bind this keyword to an event handler in react?
- Trying to achieve this functionality with useEffect hooks
- React field onChange not firing when value gets inserted programatically (hooks, not classes)
- React - show a component until it is completely ready
- JSON object update giving strange result
- How to call a function as soon as the page loads without useEffect?
- how to solve asynchronous behaviour in search Box react
- Call a React component inside a function, when a button is clicked
- Reactjs require not defined
- I only returning 1 card an an image from the array of objects using React js
- Target specific class using Styled Components React.js
- Removing specific item from nested array and saving the result, how to make this code cleaner
- I'd like to update a state in react every few seconds, but am getting unexpected results
- how can i use history push in useEffect react
- How to change fetch API link for deployment?
- how to choose different json file to loop?
- Having CORS when using Google Adsense in React Firebase web app
- How do you do conditional hovering in styled components?
- Creating a React component library
- How to Pause Render by Clicking Draver?
- Issue understanding async await Node.js timing
- How can I export a variable to another file React
- How to load AJAX in react
- How do I replace <img> with a custom image component in react/javascript
- Get updated state of the component outside the render
- How to set file object in state with React hooks?
- React: Url changes, but page never moves
- How can I redirect to previous page after login in react router?
- Redirect express to React page
- PureRenderMixin & state management design