サーバーサイドでのみデータを通信して取得後、クライアントサイドでもそれを使いレンダリング

関連

getInitialPropsスタティックメソッドは React のライフサイクルのメソッド群のようにサーバーサイドでもクライアントサイドでも呼び出されます。サーバーサイドで返した値はwindow.__NEXT_DATA__から取得できるので、クライアントサイドではここから値を取得することで通信なしでいける場合があります。

req か res を使ってサーバーサイドでのみ実行される処理を書く

（追記@2019-05-26）以下のような判定をしなくてもprocess.browserという変数が設定されていました。名前から察せれるようにサーバー側ではfalseでブラウザ側ではtrueになるのでこれを使ったほうが楽です。next@^8.1.0での確認です。

typescript process.browser にアクセスできる型定義

processはNodeJS.Processを見ているのでこれを拡張してあげます。

declare namespace NodeJS {
  interface Process {
    browser: boolean;
  }
}

~~というよりnext@8ぐらいからgetInitialPropsはサーバーでしか動かなくなったかもしれないので以下は不要かもしれません。~~

このgetInitialPropsに渡ってくるコンテキストのreqとresというプロパティはサーバーサイドだけでしか渡ってこない値です。ですのでこれを使ってサーバーサイド判定ができます。

以下は例コードです。reqがある場合はサーバーサイドなのでデータを取得する処理を行い、ない場合（クライアントサイド）ではサーバーサイドで返した値をただ渡すことでクライアントサイドでの通信を無くしています。。

class extends React.Component {
  static async getInitialProps({req}) {
    let data;
    if (req) {
      data = await axios.get('https://xxx.com/xxx')
    } else {
      data = window.__NEXT_DATA__.props.pageProps.data;
    }
    
    return {data};
  }
}