Q:

Can I prevent some route to be rendered on server side in React App

I am going to use server side rendering for my react app to improve the website's SEO. Therefore, letting some pages to be rendered on server is important for me. However, I do not want to have the rest pages (nested routes) to be rendered on server side though. Can I have both client and server side rendering with different routes (and routes' config) at the same time ?

A:

using different router config - you will get react warning because of the html miss match.
to solve this you can switch your router into something like this:

import React from 'react';
import { Route } from 'react-router-dom';

class RouterHandler extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isShow: false,
    };
  }

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

  render() {
    const { isShow } = this.state;
    const { component, ...props } = this.props;
    if (isShow) {
      return <Route {...props} component={component} />;
    }
    return <div>Loading...</div>;
  }
}

and use it instead of you <Router> inside <Switch>
this will work because componentDidMount is only called on client side.
using code chunking user wont see the diffrence.

