Next.js Static Rendering

Static Rendering is default server rendering strategy, where routes are rendered at build time or in the background after data revalidation . The result is cached and can be distributed via a Content Delivery Network (CDN) for optimal performance.

Static rendering is ideal for routes with non-personalized data that can be determined at build time, such as blog posts or product pages.

🏆

Nextra has 12527 stars on GitHub!

Last repository update 3/25/2025.

The number above was generated at build time via MDX server components. With Incremental Static Regeneration enabled, it will be kept up to date.

Here’s the MDX code for the example above:

MDX


{/* Via async components */}
export async function Stars() {
  const response = await fetch('https://api.github.com/repos/shuding/nextra')
  const repo = await response.json()
  const stars = repo.stargazers_count
  return <b>{stars}</b>
}
 
{/* Via async functions */}
export async function getUpdatedAt() {
  const response = await fetch('https://api.github.com/repos/shuding/nextra')
  const repo = await response.json()
  const updatedAt = repo.updated_at
  return new Date(updatedAt).toLocaleDateString()
}
 
<Callout emoji="🏆">
  Nextra has <Stars /> stars on GitHub!
 
  Last repository update _{await getUpdatedAt()}_.
</Callout>