I'm a self-taught dev focused on websites and Python development.
My friends call me the "Data Genie".
When I get bored, I find tech to read about, write about and build things with.
Thanks, this tutorial and code snippets helped a lot! All the other things I looked at where too complex and had extra code. I just needed to know how to combine string rendering and hydration.
A built an app based around your instructions. I hope it helps others here too.
We set up a client-side React app with some components including an incrementing counter.
On initial page load without JS running, a user or a search engine crawler will see an empty page. So we add a server-side Express app that return an HTML page which acts as a fully-rendered starting point that needs no JS to view in the browser.
We do this by calling ReactDOMServer.renderToString, which unfortunately freezes the app so that ignores user interaction. This is solved by calling React.hydrate on the client, so that the browser can make the initial HTML and turn it into a dynamic app in the usual SPA style.
Thanks, this tutorial and code snippets helped a lot! All the other things I looked at where too complex and had extra code. I just needed to know how to combine string rendering and hydration.
A built an app based around your instructions. I hope it helps others here too.
Starter template for server-side and client-side rendering of a React app ⚛️ 📦
React SSR Quickstart⚛️ 📦
Preview
Use this project
About
Background
Based on tutorial:
We set up a client-side React app with some components including an incrementing counter.
On initial page load without JS running, a user or a search engine crawler will see an empty page. So we add a server-side Express app that return an HTML page which acts as a fully-rendered starting point that needs no JS to view in the browser.
We do this by calling
ReactDOMServer.renderToString, which unfortunately freezes the app so that ignores user interaction. This is solved by callingReact.hydrateon the client, so that the browser can make the initial HTML and turn it into a dynamic app in the usual SPA style.The…
I went with
makeinstead ofconcurrently, since make supports parallel jobs already.