getPageContext(path, options)

Generates the context for the page which includes the React Element, application state and http method.

📘

Rendering a Context

Two helper methods are provided for rendering a context, render(path, options) and renderToString(path, options)

Options

📘

Route Loaders

The async method controls whether or not the route loaders are run. There are two cases in which the option is ignored, if you provide the dehydrate options as true it will set async to true. If you provide an state option it will set async to false.

Name	Type	Required	Description
props	Object	No	Additional options to pass to the handler component
state	Object	No	The application state if we are rehydrating the application. Will bypass running the routes loaders as the state is provided
wait	Boolean	No	If true the promise will not wait for loaders to complete before rendering. Useful to show a "loading" visual Defaults to false
dehydrate	Boolean	No	Should the context run the loaders and return the resulting state. If true it sets the wait option to true independent of what is provided. Used in isomorphic server side rendering.

Client Side (Static)

This is an example usage, when providing static pages served from a server

JavaScript

// our bootstrap loads all actions / stores and routes
require('./bootstrap');

var React = require('react');
var fluxApp = require('fluxapp');

var appElement = document.getElementById('app');

var context = fluxApp.createContext();

context.getPageContext('route-id').then(function render(page) {
  React.render(
    page.element,
    appElement
  );
});

Client Side (using fluxapp-router plugin)

An example of a client side one page application

JavaScript

// our bootstrap loads all actions / stores and routes
require('./bootstrap');

var React = require('react');
var fluxApp = require('fluxapp');
var context = fluxApp.createContext();

var appElement = document.getElementById('app');
var routerActions = context.getRouterActions();

context.registerRouteHandler(function routeHandler(request) {
  context.getPageContext(request).then(function render(page) {
    React.render(
      page.element,
      appElement
    );
  });
});

routerActions.init(window.location.href, {
  method: 'get'
});

Client Side (Isomorphic)

An example of a client side application that gets its state from the server side.

JavaScript

// our bootstrap loads all actions / stores and routes
require('./bootstrap');

var React = require('react');
var fluxApp = require('fluxapp');

var appElement = document.getElementById('app');

var context = fluxApp.createContext();

// State passed down from server includes method and app state
var serverState = window.fluxAppState;

function render(page) {
  React.render(
    page.element,
    appElement
  );
}

context.getPageContext('route-id', {
  state: serverState.state
}).then(render);

Client Side (Isomorphic, with routing)

An Example using fluxapp-router with an isomorphic application

JavaScript

// our bootstrap loads all actions / stores and routes
require('./bootstrap');

var React = require('react');
var fluxApp = require('fluxapp');

// State passed down from server includes method and app state
var serverState = window.fluxAppState;

var appElement = document.getElementById('app');

var context = fluxApp.createContext();

var routerActions = context.getRouterActions();

function render(page) {
  React.render(
    page.element,
    appElement
  );
}

context.registerRouteHandler(function routeHandler(request) {
  var isFirstRequest = ! request.lastRequest;
  var options = {};
  
  // Its our first request so we need to pass our state
  if (isFirstRequest) {
    options.state = serverState.state;
  }

  context.getPageContext(request, options).then(render);
});

routerActions.init(window.location.href, {
  method: serverState.method
});

Server Side

Rendering on the server side, this example is global handler for all routes. They could be separated into individual handlers if desired.

🚧

Context Management

After you have rendered your markup for the component it is important to destroy the context. See context.renderToString to avoid context management.

JavaScript

function handler(request, reply) {
  var context = fluxApp.createContext();

  return context.getPageContext(request.path, {
    method: request.method,
    dehydrate: true,
  }).then((page) => {
    var Element = page.element;
    var markup = Element ? React.renderToString(Element) : null;
    
    context.destroy()

    if (! markup) {
      throw Error('Not Found');
    } else {
      reply(Mustache.render(indexTemplate, {
        page: markup,
        state: JSON.stringify({
          state: page.state,
          method: page.method,
        }),
      })).code(200);
    }
  });
}

👍

On to render