Not Particularly Meaningful


    0.0.21 • Public • Published


    Renders ReactJS apps isomorphic on node.js.

    isojs renders ReactJS apps isomorphic on the server and the client without changing something in the app.

    Most important features:

    • render React apps with async api calls isomorphic on node.js
    • free choice of Flux implementation (or just React)
    • no need to define data fetching on serverside
    • sync state from server rendered app to client

    What it does:

    • guesses which data needs to get fetched on the server based on the react-router route and previous requests
    • fetches all data at the same time
    • renders the React app and synchronous respond to superagent requests with the data fetched before
    • sends the rendered app including the latest state of each component back to the client
    • runs your React app on the client (if javascript is enabled)

    How looks a classic architecture?

    • You build a React app
    • You load your data via superagent
    • You build a REST API-Server for your data loading (no need to be node.js)
    • You create an isoJS-Server which handles all front-facing requests

    Get Started:

    To get startet just fork the isojs-demo-app.



    npm install isojs


    On the server-side you only need to define where your routes component is and on which url your data API can be reached.

    var isojs = require('isojs');
    var config = {
        routesPath: './Routes.js',
        getApiServerAddress: function(){
            return 'http://localhost:8080/';

    With this config you can use the app-builder to create a new server and use it in your express app. (needs to be root!). To ensure, that the server-side part of isojs is available, call setServer().

    var isoJSapp = isojs.appBuilder(config);


    A basic component that loads data and holds state looks like that:

    var React = require('react');
    var superagent = require('superagent');
    var isojs = require('isojs');
    var Blog = React.createClass({
        mixins: [isojs.loadMixin, isojs.stateMixin],
        isojsInitialState: function(){
            return { title: '', content: '' };
        loadBlogPost: function(id){
            .end(function(err, res){
        componentDidMount: function(){
        render: function() {
            return (

    The Routes.js file defines all routes of your app with react-router.

    var React = require('react');
    var Route = require('react-router').Route;
    var BlogPost = require('./components/BlogPost.react');
    var routes = (
        <Route name="main" path="/">
            <Route path="/blogpost/:id" name="blogpost" handler={BlogPost}/>
    module.exports = routes;

    What changed compared to a default ReactJS app?

    • Use the isojs.loadMixin mixin in all data loading components
    • Use the isojs.stateMixin mixin in all components using state
    • Use superagent to load your data
    • Use the isojs.superagentPlugin plugin to enable isomorphic rendering of this request

    Performance Note:

    To be able to render your app as fast as possible try to map your route params to your api calls. Do not convert them in any way.


    :id and :time are placeholders for some kind of id and a timestamp

    React-Router URL API Calls
    /blog/:id /loadpost/:id
    /blog?id=:id /loadpost/:id
    /blog/:id /loadpost?id=:id
    /blog/:id?time=:time /loadpost?id=id&time=:time

    Do NOT !!!!:

    React-Router URL API Calls
    /blog/:id/:time /loadpost/:id/[:time/2]

    [:time/2] intents to describe the calculated half of :time

    Apache License Version 2.0


    npm i isojs

    DownloadsWeekly Downloads





    Apache License Version 2.0

    Last publish


    • dustin-h