├── .gitignore ├── LICENSE └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 zen-js-code 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React SSR Example Application 2 | 3 | The application contains several variants, **each in its separate branch**, progressively demonstrating various paradigms for writing [universal](https://medium.com/@mjackson/universal-javascript-4761051b7ae9) JavaScript with [React](https://facebook.github.io/react/), [React Router](https://github.com/rackt/react-router), [Node](https://nodejs.org/en/) and [Express](http://expressjs.com/). 4 | 5 | Enjoy. 6 | 7 | ## Simple Application 8 | 9 | > The application is under [simple](https://github.com/zen-js-code/react-universal-web-apps/tree/simple) branch. 10 | 11 | The basis for the entire application stack, this application starts (and ends) with client-side React, with no handling of rendering on the server. The data is not retrieved, rather fed via props from the top level route. 12 | 13 | ## Naive Universal Application 14 | 15 | > The application is under [simple+ssr](https://github.com/zen-js-code/react-universal-web-apps/tree/simple+ssr) branch. 16 | 17 | This version of the application performs the following: 18 | 19 | 1. render HTML on server, based on data necessary 20 | 2. deliver the HTML to the browser 21 | 3. send the data , used to render the HTML, to the browser as well 22 | 4. allow React to resolve the necessary re-renders 23 | 24 | ### A Little Less Naive Universal Application 25 | 26 | > The application is under [simple+ssr+context](https://github.com/zen-js-code/react-universal-web-apps/tree/simple+ssr+context) branch. 27 | 28 | This application improves on the previous variant by abstracting data propagation and delegating it to React Context. This is achieved by introducing a new wrapper component that does most of the "heavy" lifting required for Context usage in React components. 29 | 30 | ### More Complex, But Still Naive, Application 31 | 32 | > The application is under [simple+ssr+context+promises](https://github.com/zen-js-code/react-universal-web-apps/tree/simple+ssr+context+promises) branch. 33 | 34 | This application expands the previous by adding another page and delegating data retrieval to static methods on the components themselve (limited to Route components). 35 | 36 | ### Flux Universal Application 37 | 38 | > The application is under [flux+ssr+context+promises](https://github.com/zen-js-code/react-universal-web-apps/tree/flux+ssr+context+promises) branch. 39 | 40 | This variant of the application makes the transformation from our naive Flux-less application to still (hopefully less) somewhat naive Flux-full one. --------------------------------------------------------------------------------