I was trying to get a sense of how React SSR works . Now I have this code https://github.com/kritidipto-1234/ssr-without-next
So basically I am just using renderToString to generate my HTML on server and then using React hydrateRoot on client bundle. I am generating whole HTML page and within that there is obviously the HEAD tag. Now I have an extension that injects some elements into HEAD tag. This causes React to freak out and give Hydration errors. When I turn off that extension all works perfectly fine as HEAD isnt modified.
App.jsx
function App() {
return (
<html> //is this not the correct way to Generate HTML page?
<head>
<title>My server side app!</title>
</head>
<body>
<div>Hello world!</div>
<script src="./bundle.js"></script>
</body>
</html>
);
}
Server.js
expressApp.use(express.static("dist/client"));
expressApp.get("/", async (req, res) => {
const html = ReactDOMServer.renderToString(<App />);
res.send(html);
});
expressApp.listen(port, () => { console.log(`App listening!`); });
Index.js(Client bundle)-->bundle.js
import { hydrateRoot } from "react-dom/client";
import App from "./App.jsx";
hydrateRoot(document, <App />);
