Flow Router, SSR, and client-only libraries


I may be out of my depth here, but I’m a bit confused on how to structure my web app to use SSR.

I have a folder /both, where I’m putting all my React components and pages, router, etc. I have a JS library I’m using that is strictly client-side, so I put it inside /client/lib. But then the code in /both gives errors because the server side is trying to reference client-only objects (in this case, for Web Audio API).

I’m mostly concerned about SEO which is why I’m using SSR. Should I just put the sales/pitch pages in /both, and put the user dashboard and private functionality in /client?

EDIT: Oops, no. React components in /both cannot reference components in /client. Ok, I’m officially lost! :smile:


Okay, I found in the Flow Router SSR docs that I need to put client-only code within the componentDidMount method. This works great, and then I assume you can use this.setState to set the client side object into the component so it can be accessed in event handlers, etc?


In the server, you don’t need to worry about events. For client only stuff, you can use componentDidMount that’s the safest way.


So I’ve been doing it this way, not sure if there’s a better way or not. In this example, I want to be able to use TAPi18n throughout the component.

MyComponent = React.createClass({
  componentDidMount() {
    this.setState({tap: TAPi18n});

  changeLanguage(lang) {