A complex example of how to do server-side rendering with React
Server-Side Rendering (SSR) leads to fast initial page loads, search-engine-friendly pages, and of course...its all type safe!
Clone the repo, change directory, install dependencies, build the code, and run it!
git clone https://github.com/styfle/react-server-example-tsx.git cd react-server-example-tsx npm install npm run build npm run test npm start
Then navigate to http://localhost:3007 and click on the buttons to see some reactive events in action.
You can deploy with one click.
Alternatively, you can deploy from the command line.
npx now styfle/react-server-example-tsx
If you choose to deploy somewhere besides ZEIT Now, remember to set the environment variable
NODE_ENV=production to avoid the slower, development version of React.
The original code from
mhart attempts to sanitize the props by escaping and then inserting into a
I avoided this by performing 1 extra http request to fetch the props as json before initializing React in the browser. This means that click handlers will not be initialized until the data is returned and React can pick up where it left off after the server-side render and attach the click even handlers. This is the purpose of
See browser.tsx for the client-side code.
See server.ts for the server-side code.
Based on prior work found at mhart/react-server-example. It's very good so you should check it out :)