Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Nextjs 9.5~ の Static Generation について

241 visualizaciones

Publicado el

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

Publicado en: Ingeniería
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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 について  

×