What are the differences between SSR, SSG, and ISR in Next.js?

Next.js has three main rendering methods, each with its specific use cases and advantages:

1. Client-Side Rendering (CSR)

Client-side rendering is the traditional React application rendering method. When the page initially loads, an empty HTML file is returned, then JavaScript executes in the browser to dynamically generate page content.

Features:

• Slower first-screen load, needs to wait for JavaScript download and execution
• Not SEO-friendly, search engine crawlers may not be able to crawl dynamic content
• High interactivity, suitable for highly interactive applications
• Suitable for admin panels, dashboards, etc. that don't need SEO

Implementation:

javascript
export default function CSRPage() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData);
  }, []);
  
  return <div>{data ? data.content : 'Loading...'}</div>;
}

2. Server-Side Rendering (SSR)

Server-side rendering generates complete HTML on the server with each request and sends it to the client. This ensures search engine crawlers can crawl the complete content.

Features:

• Fast first-screen load, HTML already generated on the server
• SEO-friendly, search engines can crawl complete content
• Each request requires server processing, higher server load
• Suitable for pages with frequently changing content that need SEO

Implementation:

javascript
export async function getServerSideProps(context) {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return { props: { data } };
}

export default function SSRPage({ data }) {
  return <div>{data.content}</div>;
}

3. Static Site Generation (SSG)

Static generation generates HTML files at build time, which can be cached by CDN, providing the fastest loading speed.

Features:

• Best performance, HTML files can be cached by CDN
• SEO-friendly, static content is easy for search engines to crawl
• Generated at build time, content updates require rebuilding
• Suitable for pages with infrequently changing content, such as blogs, product pages

Implementation:

javascript
export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return { 
    props: { data },
    revalidate: 60 // Optional: Enable ISR, regenerate every 60 seconds
  };
}

export default function SSGPage({ data }) {
  return <div>{data.content}</div>;
}

4. Incremental Static Regeneration (ISR)

ISR is an enhanced version of SSG that allows updating static pages after build. It combines the performance of SSG with the dynamism of SSR.

Features:

• Maintains the performance advantages of static pages
• Can update page content in the background
• Users always see the latest content
• Suitable for content that needs regular updates but doesn't require real-time updates

Implementation:

javascript
export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return { 
    props: { data },
    revalidate: 3600 // Regenerate every hour
  };
}

Selection Recommendations

• CSR: Admin panels, dashboards, applications that don't need SEO
• SSR: Pages that need SEO and have frequently changing content, such as news websites, e-commerce product pages
• SSG: Pages with infrequently changing content, such as blogs, documentation, about us pages
• ISR: Content that needs regular updates but doesn't require real-time updates, such as blog posts, product lists

In actual projects, you can mix these rendering methods according to the needs of different pages to achieve the best performance and SEO results.