server-rendered markup is the dynamic possibility of server-side rendering (vs static).
The steps are:
The disadvantage is that the architecture is more complicated and you need to take into account where your code will be running (ie on the server or on the browser).
On the server side, you can use of this two methods to generate HTML with react data attributes:
The below example shows you how to create a page on the server side with the ReactDOMServer.renderToString(..) 3) function.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const App = <Welcome name="Foo" />;
const toHydrateHtml = ReactDOMServer.renderToString(App);
const htmlPage = `
<!doctype html>
<html>
<head>
<title>Dynamic SSR example</title>
</head>
<body>
<div id="root">
<!-- The reacted HTML inside the root div element -->
${toHydrateHtml}
</div>
<!-- The classic bundle (client) that calls the building of the tree with the hydratation when loaded -->
<script src="/static/bundle.js">
</body>
</html>
`;
// http.createServer(function (req, res) {
// res.writeHead(200, {'Content-Type': 'text/html');
// res.write(htmlPage);
// res.end();
//}).listen(port);
console.log(htmlPage.trim());
This section shows you how to create the bundle.js file added to the pages created on the server side.
The pages will become active, or hydrated, when the JavaScript bundle has loaded.
The bundle is a classic javascript bundle but:
The client.js (start point for the bundle.js file) client would looks like (import/export statement excluded)
window.addEventListener("load", () => {
ReactDOM.hydrate(<App />, document.getElementById('root'));
};);
A fully functional demo repository can be found here if you want to take a look.
A full server framework with own link/image/routing component React Framework - Next.js. Doc
A framework that tries to do no more than basic server side rendering and lets you choose all other library (routing/…).
razzle (https://razzlejs.org/docs/how-it-works)
2 configs, 2 ports, 2 webpack instances, both watching and hot reloading the same filesystem, in parallel during development and a little webpack.output.publicPath magic.
Open source is hard…
There is two moments where you can render:
At runtime, means that the node server will render when an HTTP request is made.
You can render (ie create the pages) at build time which is called prerendering / snapshoting
You don't need a node server.
See Web - Prerendering / Snapshoting (Dynamic to Static Web Site Generation)