Menu
In server side rendering, does the structure require us to render the app twice? in server.js file as show below, the app structure is rendered and sent to the client. Although full code has been generated by Server.js, Client.js does it again by calling render function.
So the final structure of the app, as I understood it is: SERVER.js (renders HTML , gets initial state and sets it in the PRELOADED_STATE variable,renders page using renderFullPage function) ==> CLIENT.js (renders the App strucutre using the PRELOADED_STATE varible
Kindly correct me if I am wrong. If not, can't we just do it once?
Server.js
import path from 'path'
import Express from 'express'
import React from 'react'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import counterApp from './reducers'
import App from './containers/App'
import { renderToString } from 'react-dom/server'
const app = Express()
const port = 3000
// This is fired every time the server side receives a request
app.use(handleRender)
// We are going to fill these out in the sections to follow
function handleRender(req, res) { /* ... */ }
function renderFullPage(html, preloadedState) { /* ... */ }
app.listen(port)
function handleRender(req, res) {
// Create a new Redux store instance
const store = createStore(counterApp)
// Render the component to a string
const html = renderToString(
<Provider store={store}>
<App />
</Provider>
)
// Grab the initial state from our Redux store
const preloadedState = store.getState()
// Send the rendered page back to the client
res.send(renderFullPage(html, preloadedState))
}
function renderFullPage(html, preloadedState) {
return `
<!doctype html>
<html>
<head>
<title>Redux Universal Example</title>
</head>
<body>
<div id="root">${html}</div>
<script>
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState)}
</script>
<script src="/static/bundle.js"></script>
</body>
</html>
`
}
Client.js
import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './containers/App'
import counterApp from './reducers'
// Grab the state from a global injected into server-generated HTML
const preloadedState = window.__PRELOADED_STATE__
// Create Redux store with initial state
const store = createStore(counterApp, preloadedState)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
688
asked Jul 29 '26 07:07
The answer depends of what you mean with render twice. React will compare the data-checksum of the nodes generated in the server with the ones generated in the virtual DOM to verify that they are the same as the ones generated in the client. This way there's no need to modify the DOM, only the virtual DOM.
From the official React documentation:
If you call ReactDOM.render() on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
Edit: I wrongly wrote that the data to compare was reactId instead of checksum.
72
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
