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.
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.
I bought a monitor which can swivel ↩️
And finally cracked SSR with React
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…