Repository files navigation

A complex example of how to do server-side rendering withReact andTypeScript so that component code can be shared between server and browser (also known as isomorphic javascript).

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.gitcd react-server-example-tsxnpm installnpm run vercel-buildnpm runtestnpm start

Then navigate tohttp://localhost:3007 and click on the buttons to see some reactive events in action.

The original code frommhart attempts tosanitize the props by escaping and then inserting into a<script> tag.

I avoided this by performing1 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 ofReactDOM.hydrate.

Seebrowser.tsx for the client-side code.

Seeserver.ts for the server-side code.

Based on prior work found atmhart/react-server-example. It's very good so you should check it out :)

Additionally, I use a combination betweenTypeScript Handbook andawesome-typescript-loader when I switched from browserify v1.4.x to webpack v2.0.x (now webpack v4.x).

Developed bystyfle, the author ofPackage Phobia