Next.jsのgetServerSidePropsについて

Next.jsにはサーバーサイドでレンダーする機能があります。

ここでいうレンダーは以下です。

  • HTMLを読み込む
  • JavaScriptを実行する
  • JavaScriptが実行されることでDOMが形成される
  • 必要なデータ(一覧など)を取得して、HTMLに反映する

つまり、ブラウザは完成したHTMLをサーバーから受け取るだけになります。

そのため、クライアントサイドでレンダーするよりSEOが有利と言われています。

(最近のGoogleの検索エンジンでは、クライアントサイドでレンダーすることも考慮した作りになっているため、徐々にサーバーサイドレンダリングは不要になるかもしれません)

SSR(サーバーサイドレンダリング)を実現する方法として、getServerSideProps が提供されています。

これは、pages ディレクトリ配下のファイル(各ページに対応するファイル)に記載することで、ページをレンダーする前にgetServerSidePropsが実行されます。

つまり、getServerSideProps 内でデータを取得する処理を書くと、データの取得が完了してからコンポーネントのレンダーが実行されますので、クライアントには完成したHTMLを返します。

以下がサンプルです。

import axios from 'axios'
import Posts from '../components/Posts'

export const getServerSideProps = async () => {
  const { data } = await axios.get('URL')
  return { props: { data } }
}

const Home = ({data}) => {
  return (
   <div>
    <h1>投稿一覧</h1>
    <Posts data={data}/>
   </div>
  )
}

export default Home

Posts コンポーネントの詳細は省きますが、data(配列)を受け取って、それをレンダーするコンポーネントです。