What types of pre-rendering are available in Next JS?

Pre-rendering techniques generate static HTML during the build or request phase, reducing client-side rendering burden and significantly improving loading speed and search engine visibility. Next.js introduced more granular pre-rendering controls starting from version 10, enabling developers to choose optimal strategies based on content characteristics. Improper selection can lead to performance bottlenecks or SEO issues, making understanding these types crucial. This article, based on Next.js official documentation and community practices, provides professional analysis and actionable recommendations.

Static Site Generation (SSG)

Static Site Generation (SSG) generates static HTML files during the build phase, suitable for stable content that does not require real-time updates. Its core is the getStaticProps and getStaticPaths functions, enabling efficient loading through pre-fetching data.

• Working Principle: Next.js calls getStaticProps during the build to fetch data and generate static files. This process executes only during the build phase and does not involve the server.
• Advantages: Extremely fast loading speed (zero network requests on first visit), low server resource consumption, and perfect SEO support.
• Disadvantages: Content updates require rebuilding, making it unsuitable for real-time data.

Code Example:

javascript
// pages/blog/[slug].js
export async function getStaticPaths() {
  const posts = await fetch('https://api.example.com/posts').then(res => res.json());
  return {
    paths: posts.map(post => ({ params: { slug: post.slug } })),
    fallback: false // Disable dynamic route fallback
  };
}

export async function getStaticProps({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`).then(res => res.json());
  return { props: { post } };
}

export default function BlogPost({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p dangerouslySetInnerHTML={{ __html: post.content }} /></div>
  );
}

Practical Recommendations: Prioritize for static content such as blogs and product directories. Combine with next/link to improve routing performance and use the cache-control header to optimize CDN caching. Note: For dynamic content, use fallback: true to avoid 404 errors.

Server-Side Rendering (SSR)

Server-Side Rendering (SSR) dynamically generates pages on each HTTP request, ideal for scenarios requiring real-time data. Its core is the getServerSideProps function, ensuring content freshness.

• Working Principle: On each request, Next.js calls getServerSideProps on the server to fetch data, renders HTML, and returns it. The client handles only interactions.
• Advantages: Real-time content updates (e.g., user data, live counters), suitable for dynamic applications.
• Disadvantages: High server load (especially in high-traffic scenarios), significant initial loading delay.

Code Example:

javascript
// pages/dashboard.js
export async function getServerSideProps(context) {
  // Fetch real-time data from API
  const data = await fetch('https://api.example.com/dashboard').then(res => res.json());
  return { props: { data } };
}

export default function Dashboard({ data }) {
  return (
    <div>
      <h1>Real-time Dashboard</h1>
      <p>Users: {data.users}</p>
    </div>
  );
}

Practical Recommendations: Use for dynamic scenarios like dashboards and user authentication. Pair with next/head to optimize metadata and enable cache-control: no-store to prevent caching. Note: Avoid time-consuming operations in SSR to prevent server response delays.

Incremental Static Regeneration (ISR)

Incremental Static Regeneration (ISR) is a hybrid strategy introduced in Next.js v12, combining SSG's performance benefits with SSR's dynamic update capabilities. Its core is getStaticProps paired with the revalidate parameter.

• Working Principle: Static files are generated during the build, but with revalidate set, content can be regenerated on demand (e.g., when data updates). On client requests, regeneration is triggered if the cache expires.
• Advantages: Fast content updates (e.g., every 5 minutes), balances performance and dynamism, suitable for semi-dynamic content scenarios.
• Disadvantages: Complex configuration and handling cache consistency.

Code Example:

javascript
// pages/news/[id].js
export async function getStaticProps({ params }) {
  const article = await fetch(`https://api.example.com/news/${params.id}`).then(res => res.json());
  // Set revalidation every 5 minutes
  return { props: { article }, revalidate: 300 };
}

export default function NewsArticle({ article }) {
  return (
    <div>
      <h1>{article.title}</h1>
      <p>{article.content}</p>
      <p>Updated: {new Date(article.updatedAt).toLocaleString()}</p>
    </div>
  );
}

Practical Recommendations: Use for content like news and blogs that require regular updates but not real-time. Combine with next/image to optimize resource loading and use Cache-Control: public, max-age=300 to enhance caching efficiency. Note: Adjust revalidate values based on data update frequency to avoid excessive requests.

Conclusion

Next.js's pre-rendering strategies offer strong flexibility: SSG is ideal for purely static content, SSR for dynamic interactions, and ISR as a balance between performance and update frequency. Developers should choose strategies based on content characteristics—for example, use SSG for blogs, SSR for real-time data, and ISR for news. Key practices include:

1. Performance Optimization: Use next/image and next/script to reduce resource loading time.
2. Caching Strategy: Control cache lifecycle using the cache-control header and revalidate parameter.
3. Error Handling: Add try/catch and fallback configurations to avoid 404 errors.
4. Monitoring: Use next-themes or custom logging to track pre-rendering effects.

Recommended to refer to Next.js Official Documentation for the latest practices. By applying these techniques appropriately, developers can build high-performance and maintainable web applications. Remember: There is no silver bullet; choose based on project requirements.

Additional Resources

• Next.js Pre-rendering Documentation
• Deep Comparison of SSR vs SSG