Use react-router for SSR: client sends a new request to server for every route

Hi guys, I’m working in a Meteor + React project that requires using react-router for server-side rendering (SSR). The current react-router version is v3 and I followed a tutorial about SSR here. The steps in summary are:

  • Create a common routes file
  • Include the routes file in client-side router
// index.js
import React from 'react'
import { render } from 'react-dom'
import { Router, browserHistory } from 'react-router'
// import routes and pass them into <Router/>
import routes from './modules/routes'

  <Router routes={routes} history={browserHistory}/>,
  • In the server-side: match the routes to the url, render the right component for each route
import { WebApp } from 'meteor/webapp';
import express from 'express';

const app = express();
app.get('*', (req, res) => {
  // match the routes to the url
  match({ routes: routes, location: req.url }, (err, redirect, props) => {
    // `RouterContext` is what the `Router` renders. `Router` keeps these
    // `props` in its state as it listens to `browserHistory`. But on the
    // server our app is stateless, so we need to use `match` to
    // get these props before rendering.
    const appHtml = renderToString(<RouterContext {...props}/>)

    // dump the HTML into a template, lots of ways to do this, but none are
    // really influenced by React Router, so we're just using a little
    // function, `renderPage`

function renderPage(appHtml) {
  return `
    <!doctype html public="storage">
    <meta charset=utf-8/>
    <title>My First React Router App</title>
    <link rel=stylesheet href=/index.css>
    <div id=app>${appHtml}</div>
    <script src="/bundle.js"></script>

The problem here is that every time I navigate to a new route in client-side, it sends a new request to server to get the rendered page. In the tutorial app, there’s only a single initial request that is sent to server, from that time the client will take over and handle routing (which is the correct/expected behaviour).
Any thoughts/suggestions are welcome. Thanks !


You need to use the custom react-router component for links instead of using an tag. (Link)

By the way, if you want a working react-router with SSR and caching for meteor :

(Use the develop branch)

@Mighdy indeed, I use component in anywhere it could fit. This is one of them: Life Guides. When I click on the link, it make a new /listeners request to the server.

Do you have any error messages on your console client side ?

@Mighdy thanks, but I don’t find any error messages on the browser console :frowning:

I’m sorry but you probably don’t use the Link component instead of the anchor tag.
Maybe you can put up your project on github so I can have a look at it