React Universal Rendering
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs
img
src
templates
test
testSetup
themes
.codeclimate.yml
.eslintrc
.gitignore
.jshintrc
.travis.yml
README.md
SUMMARY.md
app.js
book.json
config.json
dev.js
getWebpackConfig.js
moduleLoaderTemplate.js
nodeExportLoader.js
package.json
telavivIcon.svg
telaviv_homepage.afdesign
testapi.js
webpack.config.js

README.md

React Universal Rendering

  

Docs - Get Started


Features

  • Universal React:
    Renders your components on the server-side and continues rendering on the client-side
  • HTML5 and AMPHTML:
    Supports normal HTML5 web-applications and mobile-optimised AMPHTML.

Idea

The main idea for TelAviv.js is to render a React app initially on a Node.js server and continue further rendering in the user's browser. The next route changes will only request data from the API.

Why?

This concept combines the benefits of server rendering and client rendering:

  1. Search Engine optimized:
    The TelAviv.js server fetches all data from your REST-API before responding. So crawlers are able to index all your pages.
  2. Fast initial load:
    The TelAviv.js server renders static html markup including the minimal set of css. All JavaScript code gets loaded asynchronous.
  3. Minimal server traffic:
    After the JavaScript code was loaded, the TelAviv.js script handles all route changes and only loads data from the API, which relieves the server.

Installation

npm install telaviv --save

Usage

Basically TelAviv.js is a express middleware.

import telaviv from 'telaviv'
import express from 'express'
import config from 'config.js'

let app = express()

app.use(telaviv(config))

app.listen(8080)

config.js

export default {
  routes: [{
    path: '/article/:id',
    html5: [{
      component: 'Header'
    }, {
      component: 'Article',
      data: {
        type: 'REST',
        url: '/api/article/:id'
      }
    }, {
      component: 'Footer'
    }]
  }],
  apiAddress: 'http://localhost:8000/'
}

Contribute

We actively welcome pull requests.

License

TELAVIV.JS is MIT licensed.

Created with ♥ by Dustin Hoffner.