server side rendeing using react framework
The script tag causes second request to server Which is bundle.js which has all our react application codebase
Only aftet all these aboves steps completion we would see content on the screen.
Only html document response from the server which has all initial content to render.
(req,res) => {
const content = renderToString(<Home /> // Home a basic jsx file which has some text
);
res.sent(content)
}If we run the application after above changes we would get error that is because, Since We are using jsx file in node js server application Jsx is not valid js code.
In the csr process our browser would handles this convertion, It always gets converted to es5 code before it gets executed in the browser
So the node env has no idea what is this jsx.
We will have bunch of jsx files ex: Home, app , etc
And we import all these bunch of files into index.js
And this entire tree of files get run through webpack and babel
And babel looks into all these file converts them into normal es5
- which is the final budnle.jsTo do this we have webpack.server.js file which will handle all this process Webpack.server.js will convert server side jsx files into es5 code and have it in bundle.js in build folder and we inject this bundle in the response
const content = renderToString(<Home/>
);
return `<html>
<head>
</head>
<body>
<div id="root"> ${content}</div>
<script src = "bundle.js"></script>
</body>
</html>`**note : The event handles example onclick on button will not work here because In CSR - A js file will be loaded into browser and attached to dom and all event handlers work But in SSR - we are not sending js file back to client, only just html Since html is not very interactive we use react for dynamic interaction
So to address this we have to ship down js from server to client to make event handles work or make UI responsive
1. Render html - first send HTML document to client along with script tag
so the scipt tag causes a following request back to server to send back bundle.js
2. Load up react application to handle event handles
This is where we have to create webpack.client.js file