Is it possible to do SSR on only certain routes? (react-router)

help
1

I’m trying to do SSR on certain routes

In my client/routes.jsx, I have:

class Board extends React.Component {
  render() {
    return (
      <div className="board">
        {this.props.children || 'Here is the board'}
      </div>
    );
  }
}

const {
  Router,
  Route
} = ReactRouter;

const createHistory = ReactRouter.history.createHistory;

const routes = [
  {
    path: '/',
    component: Board
  }
]

const router = (
  <Router routes={routes} history={createHistory()} />
);

Meteor.startup(function () {
  ReactDOM.render(router, document.getElementById("react-app"));
});

And in my lib/routes.jsx, I have:

class SSR extends React.Component {
  render() {
    return (
      <div className="ssr">
        {this.props.children || 'This is SSR'}
      </div>
    );
  }
}

const {
  Router,
  Route
} = ReactRouter;

//SSR routes
SSRroutes = (
  <Route path="/ssr" component={SSR}/>
);

Meteor.startup(function () {
  ReactRouterSSR.Run(SSRroutes);
});

I’m able to see /ssr but not /. I wonder if I can do SSR on specific routes?

2

Currently ReactRouterSSR does not support selective SSR in the sense that the server will return a 404 not found for routes that it does not know about. Like the routes you defined on the client, and not on the server.

It would be quite possible to introduce a filter property on routes to flag them for SSR/Non-SSR.


Though messing around with the request in a preRender callback could maybe also work… @benoitt

But in general:
You should separate your “business” into services. Split your meteor app in to two microservices: 1. for the landing page with server side rendering and 2. for your business logic, authenticated user application. Than point both microservices to the same MongoDB so they share state. You don’t want your landing page to crash because of something going wrong on your user app and vice versa. For landing pages you may just want to use static, pure, search engine friendly html anyhow