Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Nextjs 9.5~ の Static Generation について

226 views

Published on

Nextjs 9.5~ の Static Generation について、サンプルコードを基に説明しています。

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Nextjs 9.5~ の Static Generation について

  1. 1. NEXT.JS(V9.5~) のSTATICNEXT.JS(V9.5~) のSTATIC GENERATION についてGENERATION について 株式会社トレタKoji Uegaki(@kjugk1222) 2020/08/19 Next.js(v9.5~) のStatic Generation について 
  2. 2. Next.js には、2 つのプリレンダリング⽅法がある。 Static Generation : HTML はビルド時に⽣成さ れ、再利⽤される。 Server-side Rendering: HTML はリクエスト毎に ⽣成される。(キャッシュされない) Next.js(v9.5~) のStatic Generation について 
  3. 3. ページコンポーネントで特定の関数をexport する ことで、プリレンダリングの挙動が変わる。 export する関数 プリレンダリング ⽅法 無し Static Generation getStaticProps (& getStaticPaths) Static Generation getServerSideProps Server-side Rendering Next.js(v9.5~) のStatic Generation について 
  4. 4. Static Generation のサンプル① /posts でアクセスできる記事⼀覧ページ // /pages/posts/index.js   // 時 回 実行 export const getStaticProps = async () => { const res = await fetch("https://.../posts"); const posts = await res.json();   return { props: { posts, }, }; };   // Next.js(v9.5~) のStatic Generation について 
  5. 5. Static Generation のサンプル② /posts/[id] でアクセスできる記事詳細ページ。 // /pages/posts/[id].js   // 時 回 実行 export const getStaticPaths = async () => { const res = await fetch("https://.../posts"); const posts = await res.json();   return { paths: res.data.contents.map((p) => ({ params: { id: p.id fallback: false, }; };   // 時 paths 要素毎 実行 . export const getStaticProps = async (context) => { Next.js(v9.5~) のStatic Generation について 
  6. 6. 疑問疑問 アプリケーションをビルドした後にページが変 更・削除・追加されたらどうするの? 🤔 毎回ビルド しなおす? => Next.js 9.5 から導⼊された、Incremental Static Regeneration の仕組みを使えばOK 👌 https://nextjs.org/docs/basic-features/data- fetching#incremental-static-regeneration Next.js(v9.5~) のStatic Generation について 
  7. 7. 変更・削除変更・削除 で 秒 を指定する。 => ページが前回キャッシュされてから指定した秒 数が経過していたら、更新をチェックする。更新 があればHTML を再⽣成する。 export const getStaticProps = async () => { const res = await fetch("https://.../posts"); const posts = await res.json();   return { props: { posts, revalidate: 20, // 前回 20秒以上経過 変 }, }; }; Next.js(v9.5~) のStatic Generation について 
  8. 8. 動的パスの追加動的パスの追加 で を指定する。 => ビルド時に存在しなかったパスがリクエストさ れたら、HTML を⽣成する。 export const getStaticPaths = async () => { const res = await fetch("https://.../posts"); const posts = await res.json();   return { paths: posts.map((p) => ({ params: { id: p.id } })), fallback: true, // 時 存在 指定 再生成 }; }; Next.js(v9.5~) のStatic Generation について 
  9. 9. デモデモ Next.js + Vercel で、ヘッドレスCMS の記事⼀覧デー タをStatic Generation で表⽰するデモ ソースコード https://nextjs-ssg-demo.vercel.app/posts https://github.com/kjugk/nextjs-ssg- demo Next.js(v9.5~) のStatic Generation について 
  10. 10. まとめまとめ Next.js では、特定の関数をexport すること で、プリレンダリングの挙動が変わる。 何もexport しないか、getStaticProps をexport すると、HTML をビルド時に⽣成できる。 Incremental Static Regeneration の仕組みを使う と、ページの追加・変更にも動的に対応でき る。 Next.js 9.5 以降を使うなら,できるだけStatic Generation できるようにアプリケーションを設計 するのが良いと思います。 Next.js(v9.5~) のStatic Generation について  

×