SSR: Server-Side Rendering

Hello,

I’m currently trying to use boardgame.io together with next.js. Because the Server part exports a Koa server, I went with this example to create a basic project: https://github.com/zeit/next.js/tree/canary/examples/custom-server-koa

However, when I run the code, I get a window is not defined error. So I did some research and it’s of course because Next.js is SSR and the Client component requires window to be present. So I made it like this:

const App = Client({
    game: Game,
    multiplayer: true,
});

export default class Index extends React.Component {
    state = {
        isClient: false,
    };

    componentDidMount() {
        this.setState({
            isClient: true,
        });
    }

    render() {
        if (this.state.isClient) {
            return <App />;
        }

        return 'Loading...';
    }
}

According to next.js, the client side code only runs, after componentDidMount has been triggered, so obviously window should be available, but somehow it isn’t. Something inside Client seems to run before that happens.

[vdfdev]

I got it working! 👏 Just submitted a PR, also managed to do a test so we dont break SSR in the future 😆

[tomasreichmann]

Maybe something like this could help… https://www.npmjs.com/package/window-or-global