Next.js Sites Built to Rank

With the App Router, one application can serve static, dynamic and incremental pages side by side. Landing pages are generated once. A large catalogue uses on-demand revalidation, so changing a price refreshes that product path alone. A logged-in dashboard streams. A lot of the Next.js trouble we see comes down to one setting, such as a `force-dynamic` export on a page that never needed it, which slows the server response every time a crawler visits.

- export const dynamic = 'force-dynamic'
+ export const revalidate = 3600
+ export const dynamicParams = true
  // catalogue: ISR, rendered once and refreshed on change

`generateMetadata` runs on the server against the same data the page uses. Titles, canonicals, Open Graph tags and JSON-LD are computed from that data, so nobody maintains them by hand and they stay in step with the content. Because the function is async, it fetches alongside the page and does not hold it up.

export async function generateMetadata({ params }) {
  const p = await getProduct(params.slug)
  return {
    title: p.name,
    alternates: { canonical: `/p/${p.slug}` },
  }
}

Suspense boundaries let the page frame appear while slower data loads, which brings LCP forward. The catch is layout shift. If a fallback is a different size from the content that replaces it, you gain on LCP and lose on CLS, and Google scores both. So we size every fallback to match.