Server rendering dynamic routes

[Cap32]

I use server side rendering with some code splitting routes. It looks like OK on my server side with shim require.ensure. But I get the following warning on my client side:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) ctid=".bqth22sav4"><noscript data-reacti
 (server) ctid=".bqth22sav4"><div data-reactid=

Here is the main part of my client side codes:

const store = createStore(getInitialState());
const history = createHistory();
const { pathname, search } = window.location;
const location = createLocation(pathname + search);

match({ routes, location }, (err, redirectLocation, renderProps) => {
    render(
        <Provider store={store}>
            <Router
                {...renderProps}
                history={history}
            />
        </Provider>,
        document.getElementById('mount')
    );
});

Regards.

[Cap32]

@anatomic Hi, bro.

I saw your solution (#1402), but what about 1.0.0-rc1?

Thanks.

[vojtatranta]

How do you render this on server? I am using redux with react-rotuer 1.0.0b2 without this trouble, check my code here https://github.com/vojtatranta/Photostore/blob/master/index.js.

[Cap32]

@vojtatranta I didn't find any code splitting routes from your Photostore project.

Here is my code splitting routes (using getComponent):

import { Route } from 'react-router';
import React from 'react';
import ac from 'utils/asyncComponent';
import Layout from 'containers/Layout';

export default (
    <Route component={Layout}>
        <Route path="/" getComponent={ac('containers/Home')} />
        <Route path="/post/:id" getComponent={ac('containers/Post')} />
        <Route path="*" getComponent={ac('containers/NotFound')} />
    </Route>
);

utils/asyncComponent:

const asyncImport = (moduleName) => __CLIENT__ ?
    require(`promise?global!../${moduleName}/index`)() :
    new Promise((resolve, reject) => {
        try { resolve(require(`../${moduleName}/index`)); }
        catch (err) { reject(err); }
    });

export default (moduleName) => (location, cb) =>
    asyncImport(moduleName)
        .then(component => cb(null, component))
        .catch(cb);

Anyway, thx.

[u9520107]

I get a similar issue.
The client rendering seems to render once without any content, producing the noscript tag result, then renders again with correct contents.

I render simply by doing a Router render

ReactDOM.render(<Router routes={routes} />, document.findElementById('viewport'));

[darthmaim]

The client rendering seems to render once without any content, producing the noscript tag result, then renders again with correct contents.

Yep, seeing the exact same issue here.

[Nic128]

Same here with 1.0.0-rc3.

[timdorr]

How is everyone rendering on the server side? I'm doing it like this verbatim:

match({ routes, history, location }, (error, redirectLocation, renderProps) => {
  if (redirectLocation) {
    res.redirect(301, redirectLocation.pathname + redirectLocation.search);
  } else if (error) {
    res.send(500, error.message);
  } else if (!renderProps) {
    res.send(404, 'Not found');
  } else {
    const assets = webpackIsomorphicTools.assets(),
      initialState = serialize(store.getState());

    const root = renderToString(
      <Provider store={store}>
        <RoutingContext {...renderProps}/>
      </Provider>
    );

    res.render('index', {
      config,
      assets,
      initialState,
      root
    });
  }
});

[Cap32]

Almost, but except for history.

Here's my server side snippet:

match({ routes, location }, (error, redirectLocation, renderProps) => {
    // ... almost the same with yours.
});

I don't think the problem causes from server side. Because (server) ctid=".bqth22sav4"><div data-reactid= is what I want, but (client) ctid=".bqth22sav4"><noscript data-reacti isn't.

[timdorr]

Oh yeah, history is because I'm still on rc1. Ignore that 😄

[timdorr]

@u9520107 and @Nic128, are you both doing async getComponent calls?

[taion]

I could have sworn there was another issue for this. Maybe it was a discussion on Slack. This is a bug with using async routes and server-side rendering, since the server won't render until the routes are loaded, but when the client does the initial render, those routes will still be missing.

Potentially need some way in these cases to defer initial client render until async routes are loaded or something.

[Nic128]

@timdorr Actually, You made me realize I am executing onEnter while fetching async data. It causes an initial render of nothing until it resolves and the callback is executed.

requireAuth(nextState, replaceState, callback) {}

Then, I realized I could print that initial call server side, dump it into the page before initial render and simply not call my async method for that first render. It's a bit hacky. But it solved my problem.

[mjackson]

This sounds like an issue with your bundler ... or am I missing something?

If your initial render's checksum doesn't match, it just means you didn't generate the same HTML as when you were on the server. In order to do that, you need to run the same code you ran on the server. Couldn't you solve this with webpack so that all of your require.ensure's for a particular route are loaded in the bundle for that page?

/cc @petehunt who was working on a branch with a <Route asyncComponent> prop...