React SSR vs. client-side rendering

index.js

import React, { Component } from 'react'
import fetch from 'isomorphic-fetch'

import Layout from '../components/layout'

export default class IndexPage extends Component {
  state = {
    data: []
  }

  componentDidMount() {
    // this is invoked by the client, e.g. normal React lifecycle method
    fetch('/some-data')
      .then(res => res.json())
      .then(data => {
        this.setState({
          data: data.items
        })
      })
  }

  render() {
    return (
      <Layout>
        <h1>This will be statically rendered</h1>
        {this.state.data.length > 0 && (
          <React.Fragment>
            <h1>This will be rendered on the client</h1>
            {
              this.state.data.map(item => (
                <h2 key={item.id}>{item.text}</h2>
              ))
            }
          </React.Fragment>
        )}
      </Layout>
    )
  }
}