Have ideas to improve npm?Join in the discussion! »

    react-server-example-tsx

    7.0.0 • Public • Published

    react-server-example-tsx

    npm Downloads Dependency Status devDependency Status LGTM Quality Build Status

    A complex example of how to do server-side rendering with React and TypeScript 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!

    Getting Started

    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.

    Deployment

    Deploy to Heroku

    Deploy to Now

    Don't forget to set the environment variable NODE_ENV=production to avoid the slower, dev version of React. Like so:

    npx now -e NODE_ENV=production styfle/react-server-example-tsx

    Preventing XSS

    The original code from mhart attempts to sanitize the props by escaping and then inserting into a <script> tag.

    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 ReactDOM.hydrate.

    See browser.tsx for the client-side code.

    See server.ts for the server-side code.

    Prior art

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

    Additionally, I use a combination between TypeScript Handbook and awesome-typescript-loader when I switched from browserify v1.4.x to webpack v2.0.x (now webpack v3.x).

    Author

    Developed by ceriously.com, the author of Package Phobia

    Keywords

    none

    Install

    npm i react-server-example-tsx

    DownloadsWeekly Downloads

    9

    Version

    7.0.0

    License

    MIT

    Unpacked Size

    176 kB

    Total Files

    34

    Last publish

    Collaborators

    • avatar