Static generation pre-renders pages at build time. Here's how to use it effectively.
Basic Static Generation#
Loading code block...
Dynamic Routes with generateStaticParams#
Loading code block...
Multiple Dynamic Segments#
Loading code block...
Incremental Static Regeneration (ISR)#
Loading code block...
On-Demand Revalidation#
Loading code block...
Static Export#
Loading code block...
Hybrid Approaches#
Loading code block...
MDX Content#
Loading code block...
Loading code block...
Performance Optimization#
Loading code block...
Build Output#
Loading code block...
Best Practices#
Static Generation:
✓ Use for content that doesn't change often
✓ Pre-render as many pages as possible
✓ Use ISR for frequently updated content
✓ Implement on-demand revalidation
Performance:
✓ Optimize images with next/image
✓ Preload critical assets
✓ Use static export when possible
✓ Minimize client-side JavaScript
Content:
✓ Use MDX for rich content
✓ Generate metadata statically
✓ Create sitemaps at build time
✓ Handle 404 pages properly
Conclusion#
Static generation provides the best performance by pre-rendering pages at build time. Use ISR for content that updates periodically, on-demand revalidation for immediate updates, and client-side fetching for user-specific data. This hybrid approach gives you the best of both worlds.