• ..

Sass

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

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

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

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

    以下は例コードです。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};
      }
    }