I used create-react-app to create a React project. I was experimenting with server-side rendering on express servers. I found a code snippet that showed me how to do it.
ReactDOM.hydrate(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
This is my server side code. index.js
require("ignore-styles");
require("@babel/register")({
ignore: [/(node_modules)/],
presets: ["@babel/preset-env", "@babel/preset-react"],
});
require("./server");
server.js
import path from "path";
import fs from "fs";
import express from "express";
import React from "react";
import ReactDOMServer from "react-dom/server";
import App from "../src/App";
const PORT = 8080;
const app = express();
const router = express.Router();
const serverRenderer = (req, res, next) => {
fs.readFile(path.resolve("./build/index.html"), "utf8", (err, data) => {
if (err) {
console.error(err);
return res.status(500).send("An error occurred");
}
return res.send(
data.replace(
'<div id="root"></div>',
`<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`
)
);
});
};
router.use("^/$", serverRenderer);
router.use(
express.static(path.resolve(__dirname, "..", "build"), { maxAge: "30d" })
);
// tell the app to use the above rules
app.use(router);
// app.use(express.static('./build'))
app.listen(PORT, () => {
console.log(`SSR running on port ${PORT}`);
});
It works fine when I try to get text or other data; however, when I try to render images from the server side, they do not appear. I tried every other solution I could think of, but nothing seemed to work.
images are not rendering and also not showing in View Page Source enter image description here
we also tried <img src={require("./logo.svg")} className="App-logo" alt="logo" />
I tried all the solutions from stackoverflow as well as other sources, but its not working.
I was expecting images to be rendered properly on page.