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(配列)を受け取って、それをレンダーするコンポーネントです。
最近のコメント