Server Side rendering part 2
There was one problem with the previous things done. The styles were not loaded so you would see ugly text and nothing else. Thus, more improvements were necessary and after some thought, it became clear that the key to fixing this was to figure out what needed to be adjusted which was initially unclear. It was either the css document or the styled components. Fortunately, the CSS document was mostly empty which meant it was the styled components that needed to be fixed.
styled-components: Advanced Usage
Theming, refs, Security, Existing CSS, Tagged Template Literals, Server-Side Rendering and Style Objects
Unforunately this was unclear
That being said, they did have a blog that was more useful
The simple guide to server-side rendering React with styled-components
The goal of this guide is to share the core principles of how to use styled-components in a server side rendered React…
This was different than what I originally did though. Mainly, that they had a function that generated the text while I read the text from my html to create a long string. Overall, it is likely a bit better to do it the blog’s way if many changes are needed but I did and wanted to test my knowledge (by being able to fix my project without undoing everything). This required creating a placeholder in the head which was replaced with the style stuff.
Ultimately this worked.