Next.js : Penjanaan Semula Statik Bertambah (ISR)

Dengan Penjanaan Semula Statik Bertambah (ISR)

Kami boleh mengemas kini kandungan statik tanpa mencipta semula keseluruhan tapak. Kami boleh mengurangkan beban pelayan dengan menyediakan halaman statik pra-dicipta untuk kebanyakan permintaan. Kami boleh memproses sejumlah besar halaman kandungan sebelum masa penciptaan seterusnya adalah panjang.

Mari kita mulakan dengan contoh :

export const revalidate = 30

export const dynamicParams = true // or false, to 404 on unknown paths

export async function generateStaticParams() {
  const posts = await fetch('https://jsonplaceholder.typicode.com/posts/').then((res) =>
    res.json()
  )
  return posts.map((post) => ({
    id: String(post.id),
  }))
}

export default async function Page({ params }) {
  const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`).then(
    (res) => res.json()
  )
  return (
    <main>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </main>
  )
}

Bagaimana contoh ini berfungsi ?

Semua permintaan yang dibuat ke halaman ini (cth. /post/1) adalah cache dan serta-merta. Selepas 30 saat berlalu, permintaan seterusnya masih akan menunjukkan halaman cache (lapuk). Cache tidak sah dan versi baharu halaman mula dijana di latar belakang. Setelah berjaya dijana, Next.js akan memaparkan dan cache halaman yang dikemas kini Jika /post/12 diminta, Next.js akan menjana dan cache halaman ini atas permintaan.

Jika anda memerlukan lebih ketepatan, atas permintaan pengesahan semula boleh digunakan, tetapi jika anda memerlukan data masa nyata, pertimbangkan untuk beralih kepada pemprosesan dinamik.

---

Pengesahan Semula atas permintaan dengan revalidatePath

Next.js membolehkan anda mengosongkan cache secara manual halaman atau laluan tertentu. Iaitu, apabila kandungan tertentu dikemas kini, bukannya mencipta semula semua halaman, anda hanya boleh mencipta semula halaman atau kandungan yang diubah.

Anda mahu halaman dikemas kini dengan segera apabila terdapat perubahan (contohnya, apabila siaran baharu ditambah), anda boleh mencetuskan proses ini dengan menggunakan fungsi revalidatePath. Dalam erti kata lain, anda boleh membuat kandungan baharu muncul sebaik sahaja kandungan baharu ditambahkan kepada pengguna.

'use server'

import { revalidatePath } from 'next/cache'

export async function createPost() {
  // Invalidate the /posts route in the cache
  revalidatePath('/posts')
}

---

Pengesahan Semula atas permintaan dengan revalidateTag

Aplikasi

Next.js, ia membolehkan anda mengosongkan cache mereka secara manual dengan menandai data atau kandungan tertentu. Ini digunakan untuk mengosongkan keseluruhan cache kandungan tersebut apabila kandungan tertentu berubah. Apabila kandungan dikemas kini, pengguna melihat data terkini.

export default async function Page() {
  const data = await fetch('https://api.vercel.app/blog', {
    next: { tags: ['posts'] },
  })
  const posts = await data.json()
  // ...
}

Anda kemudian boleh menggunakan revalidateTag :

'use server'

import { revalidateTag } from 'next/cache'

export async function createPost() {
  // Invalidate all data tagged with 'posts' in the cache
  revalidateTag('posts')
}

---

ISR tidak disokong apabila mencipta Eksport Statik. Jika anda mempunyai berbilang permintaan pengambilan dalam laluan yang diberikan secara statik, dan setiap satu mempunyai kekerapan sahkan semula yang berbeza, masa paling rendah akan digunakan untuk ISR. Walau bagaimanapun, kekerapan pengesahan semula tersebut masih akan dihormati oleh Cache Data. Jika mana-mana permintaan ambil yang digunakan pada laluan mempunyai masa pengesahan semula 0, atau tiada stor yang jelas, laluan itu akan menjadi dinamik diberikan. Perisian Tengah tidak akan dilaksanakan untuk permintaan PENGGUNA atas permintaan, bermakna sebarang penulisan semula laluan atau logik dalam Perisian Tengah tidak akan digunakan. Pastikan anda mengesah semula laluan yang tepat. Contohnya, /post/1 bukannya /post-1 yang ditulis semula.

---

Jika anda suka artikel saya, anda boleh belikan saya kopi :)

Atas ialah kandungan terperinci Next.js : Penjanaan Semula Statik Bertambah (ISR). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!