Flow Router, SSR, and client-only libraries

react
1

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:

2

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?

3

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

1 Like
4

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) {
    this.state.tap.setLanguage(lang);
  },

  [...]
});