ssr-ssg-advisor

# SSR/SSG Advisor

Choose the optimal rendering strategy for Next.js pages based on requirements.

## Quick Start

**Decision criteria:**
- **SSG**: Static content, pre-render at build → Best performance
- **ISR**: Static with updates, revalidate periodically → Balance of both
- **SSR**: Dynamic per-request, personalized → Fresh data
- **CSR**: Client-side only, highly interactive → User-specific

## Instructions

### Step 1: Analyze Content Requirements

**Ask these questions:**
1. Does content change per user? (personalization)
2. How frequently does content update?
3. Is SEO critical?
4. What's the acceptable data freshness?
5. How many pages need to be generated?

### Step 2: Choose Rendering Strategy

**Static Site Generation (SSG):**
```typescript
// pages/products/[id].tsx
export async function getStaticProps({ params }) {
  const product = await fetchProduct(params.id);
  
  return {
    props: { product },
    // Optional: revalidate for ISR
    // revalidate: 60, // seconds
  };
}

export async function getStaticPaths() {
  const products = await fetchAllProducts();
  
  return {
    paths: products.map(p => ({ params: { id: p.id } })),
    fallback: 'blocking', // or false, or true
  };
}
```

**When to use SSG:**
- Marketing pages
- Blog posts
- Documentation
- Product catalogs (if manageable size)
- Any content that doesn't change often

**Server-Side Rendering (SSR):**
```typescript
// pages/dashboard.tsx
export async function getServerSideProps(context) {
  const session = await getSession(context);
  const data = await fetchUserData(session.userId);
  
  return {
    props: { data },
  };
}
```

**When to use SSR:**
- User dashboards
- Personalized content
- Real-time data
- Content requiring authentication
- Frequently changing data

**Incremental Static Regeneration (ISR):**
```typescript
// pages/blog/[slug].tsx
export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  
  return {
    props: { post },
    re