無料
ご
相
談
・
お
見
積
も
り
2023.06.27
Next.jsには、データの取得方法が4種類分けることができます。
簡単にSSG,SSR,ISRについて説明していきます。
こちらはページをbuild時に静的生成するものになります。
build時に生成するので、更新の必要のある記事一覧やトップ画面などには向きません。
逆に、会社概要などの変更頻度の低いページに使用できるでしょう。
メリットとしては、
などがあります。
デメリットとしては、
などがあります。
コード例は下記になります。
export const getStaticProps = async () => { // ①
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const repo = await res.json()
return { props: { repo } } // ②
}
export default function Page({repo}) { // ③
return repo.stargazers_count
}※ getStaticProps,propsは同じ名前でなければなりません。
これで、静的生成の準備は完了です。
build後にnpm run startで検証できるようになりました。
こちらは、毎回API通信をリクエストする際にサーバー側でfetchをし、クライアントにHTMLファイルに反映後に返却するものになります。
変更頻度の低いページに使用するのは、あまり良くないでしょう。
逆に、変更頻度の高いコメント機能や記事一覧などに向いています。
メリットとしては、
などがあります。
デメリットとしては、
などがあります。
コード例は下記になります。
export const getServerSideProps = async () => { // ①
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const repo = await res.json()
return { props: { repo } } // ②
}
export default function Page({ repo }) { // ③
return repo.stargazers_count
}※ getServerSideProps,propsは同じ名前でなければなりません。
こちらは簡単にいうと、SSGとSSRのいいとこ取りのようなものです。
build時に静的生成をした後に、一定時間経過後に再度buildをサーバー側で自動で実行してくれます。
何がいいかというと、記事のようにそんなに頻度は高くないが、1,2日に一回ぐらいは更新するぐらいな時に向いています。
メリットとしては、
などがあります。
デメリットとしては、
などがあります。
コード例は下記になります。
function Blog({ posts }) {
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
export async function getStaticProps() { // ①
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const posts = await res.json()
return {
props: {
posts,
},// ②
revalidate: 10, // ③
}
}
export default Blog※ getStaticProps,props,revalidateは同じ名前でなければなりません。
※ revalidateの秒数はミリ秒ではなく、秒です。
今回は、Next.jsのSSG,SSR,ISRについて説明しました。
Reactには存在しないNext.jsだけの機能でパフォーマンス向上、サーバーの負荷軽減の期待ができます。
SSG,SSR,ISRを使い分けるだけで、UX体験向上、サーバー費用の軽減などの効果が期待できるので使った方がいいかなと思いました。
