getStaticProps
内でURLのパラメータを取得したかったんだけど、上手くいかなかったので調べた諸々をメモ
結論:getServerSidePropsを使う
パラメータを取得するときはgetServerSideProps
を使う。
export const getServerSideProps = async (context) => {
const keyword = context.query.q;
const page = context.query.page;
const data = await client.get({
endpoint: 'blogs',
queries: { q: keyword, offset: (page - 1) * PER_PAGE, limit: PER_PAGE },
});
return {
props: {
blog: data.contents,
totalCount: data.totalCount,
keyword: keyword,
},
};
};
getStaticPropsとの違い
API | 概要 |
---|---|
getStaticProps | 「ビルド時」にデータを取得する |
getServerSideProps | 「リクエスト時」にデータを取得する |
リクエストを受けてからサーバーサイドでページ生成するgetServerSideProps
と比べるとgetStaticProps
の方がパフォーマンス面では優位。
補足
併用不可
同じページコンポーネント内ではgetStaticProps (& getStaticPaths)
と getServerSideProps
は併用できない。
getInitialProps は?
getServerSideProps
やgetStaticProps
の登場以来、Next.js は基本的にこのどちらかを使うことを推奨している。