Server side rendering?

Challenge: Refactor the app to do server side rendering. Given that we are not doing this in the FEC portion, this suggests I will not be making changes to the FEC part at all.

Reasoning: Server side rendering should ideally improve loading time which theoretically can make things better for the customer.

Actions. Find an acceptable video to watch to explain what to do. After some time, this was found. This was selected based on being recent and high ratings count. There were several considerations noted from the video. The person used yarn but npm worked just fine. Furthermore, the made used create-react-app which seems to not have a major effect but does seem more convenient in the future.

That being said, the following is the client side results. It is notably slower

Afterwards

https://www.youtube.com/watch?v=NwyQONeqRXA

Now to attempt the same on my own thing

What is hydrate and why is it different from render?

After I generate the pages and run the server, I go to 127.0.0.1 and am presented with the header hydrate, a button, and two links. I can click the button, but nothing happens. After a few moments, the document finishes loading and the button starts counting my clicks. Then I click on the "render" link. Now, the page I'm presented with has the header render and two links, but no button. After a few moments, the button appears and is immediately responsive.

On the “hydrate” page, all the markup is immediately rendered, because all the necessary html is served with the page. The button is unresponsive because there are no callbacks connected yet. Once components.js finishes loading, the load event fires from the window and the callbacks are connected with hydrate.

On the “render” page, the button markup isn’t served with the page, but only injected by ReactDOM.render, so it isn't immediately visible. Note how the appearance of the page is jarringly changed by the script finally loading.

What's the difference between hydrate() and render() in React 16?

There were multiple challenges in this challenge.

First was getting it to at least sort of look like the video. This required adding another file into the server folder and figuring out how to “import” given that it was giving me errors. It appears the reason is that this file was not properly deemed a module because it was the entry (possibly). Having the other file act as the entry and having it require this file allowed it to be a module. Not sure why. This was attempted but proved unhelpful

JSX not allowed in files with extension ' .js' with eslint-config-airbnb

In the end doing const require for most of them was acceptable

app.use("^/$", (req,res, next)=> {
fs.readFile(path.resolve("./client/dist/index.html"), "utf-8", (err, data) => {
if (err) {
console.log(err);
return res.status(500).send("Some error happened so sayeth Jesse");
}
return res.send(data.replace('<div id="app"></div>', `<div id="app">${ReactDOMServer.renderToString(<App />)}</div>`))
})
})

This was used to read the file and basically replace it with string version.

Hydrate was then done which then created this problem

ReferenceError: document is not defined

This is because server side rendering does not guarantee a window is available and thus things like document are not there as well and must be waited for.

React - "localStorage is not defined" error showing

if (typeof window !== 'undefined') {
ReactDOM.render(<App />, document.getElementById("app"));
}

This makes sure that the window is ready before this is attempted. Last was making sure that the ids matched because other you get an error

React Error: Target Container is not a DOM Element

Thus, it was mostly fixed up. The results are… there. One issue seems to be with styled components not quite working right. Oh well. Original

Final

It is better that something shows up at first instead of a blank screen for a while so this is mostly a win. Total blocking time increased however which may be an issue. Lazy loading did not help.