I had a special case come up where I needed to build a site that:
React still was an attractive option due to its composability and the widespread availability of libraries. Other JS libraries (
Vue | Angular | Svelte) might work as well, but I am not familiar with their SSR capabilities.
Being familiar with GatsbyJS, it’s out-of-the-box SSR feature seemed like a good fit for the requirements. Alas, although there are plugins like
polyfill.js was giving me some difficulty. I could have created a custom plugin, but the dependency overhead was too high given that the requirements were so basic and the majority of GatsbyJS features would not be used.
I took a step back and tried to find the simplest method that would yield the results I was looking for. I knew that I wanted to keep React, so the simplest approach would be to use ReactDOMServer.renderToStaticMarkup.
Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.
Server side rendering Styled-Components with NextJS - I switched to styled-components for most of my projects nearly a year now but never used it with Next.js until recently. This might be a bit late to the party but I feel it’s definitely worth sharing the neat trick of ServerStyleSheets...
In the previous article, we described how to make a production build and deploy it to a server. Naturally, the next step is the server-side rendering. We are going to walk through the process by converting Create React App to a server-side rendered application.
Bringing together the best of both worlds. Therefore we should take a closer look at styled-components and especially how it actually works.
When I was first introduced to Styled Components, I was a bit apprehensive of the benefits, having gotten used to inline CSS for so long. After all, React documentation (at the time), still used inline CSS for all their examples.