https://github.com/christianscott/react_render_build_time

Build time react rendering example
https://github.com/christianscott/react_render_build_time

react react-rendering

Last synced: about 1 year ago
JSON representation

Build time react rendering example

• Host: GitHub
• URL: https://github.com/christianscott/react_render_build_time
• Owner: christianscott
• Created: 2017-01-27T03:53:40.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-03-13T02:19:00.000Z (about 9 years ago)
• Last Synced: 2025-01-25T21:11:29.494Z (about 1 year ago)
• Topics: react, react-rendering
• Language: JavaScript
• Size: 184 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
The site is rendered at build time, then 'rehydrated' when the javascript bundle

loads on the client machine.

# Build process:

  1. React app is rendered to a string at build time,

     passing env=node as a prop. This string is passed into

     a mustache template.

  2. SCSS and js are compiled, concatenated and minified.

# What happens when the page is loaded?

  1. First, a static version of the site is delivered in plain

     HTML which is seen by the user until 'bundle.js' loads.

     The state used for the App is DEFAULT_STATE.

  2. When 'bundle.js' has been loaded, parsed and executed, the

     React app is rendered again. If there are no changes to be made

     then the DOM is not touched (except for the attachment of event 

     listeners). In our case, since the static version does not contain

     any of the 'item cards', these will be rendered but the heading etc

     will not be.

  3. Initially, the app is rendered using DEFAULT_STATE (the same state 

     used on the server). Then, once the App component has mounted, the

     state is updated (inside componentDidMount()) with the client side state.

     We use DEFAULT_STATE initially so that the render tree can be updated efficiently

     via setState. If the client state was used straight away, the whole tree would

     have to be discarded and re-rendered.