【Next.js】 getInitialPropsの備忘

getInitialProps

↓公式
https://nextjs.org/docs/api-reference/data-fetching/getInitialProps

これはssrのときに使うって感じで書かれているんだけど、フロントのspa遷移時にも動くから注意。
というか、そっちのほうが使いやすかったりする。

const Test = ({ kkkkk }) => {
return <div>{kkkkk}</div>
}

Test.getInitialProps = () => {
  console.log('ooooooooooo')
  return {
    kkkkk: 'pppppp'
  }
}

export default Test;

spa遷移のときとserverで処理を分けたいときには、window.browserを使えばいい。

const Test = ({ kkkkk }) => {
return <div>{kkkkk}</div>
}

Test.getInitialProps = () => {
　if (window.browser) {
    console.log('window is not undefined')
    return 'bbbbb'
  }
  console.log('ooooooooooo')
  return {
    kkkkk: 'pppppp'
  }
}

export default Test;

getServerSideProps

↓公式
https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering

これ関数名的にserverSideのときに渡すpropsを生成っぽい感じなんだけど、実際は違う。

この関数を定義したページは、Linkで遷移させたとしても、必ずサーバーを経由するようになる。

この関数名はやめてほしいです。。！

なので、reduxのstoreの参照とかができないので、そこらへんの使い勝手が若干悪い気がしている。

まとめ

getInitialPropsは単純なSPA遷移ができて、storeを使えるので使っていきたい。

getServerSidePropsが推奨されているけど、必ずサーバー経由になっちゃってstore使えないのはちょっとやだねー。

なんか認識間違ってたら指摘してほしいーですー。