{
  "skill_name": "nextjs-rendering",
  "evals": [
    {
      "id": 1,
      "prompt": "My product listing page renders thousands of products. It's static content that rarely changes. What rendering strategy should I use?",
      "expected_output": "Use SSG (Static Site Generation): fetch with cache: 'force-cache'. Use generateStaticParams for dynamic product routes. For periodic updates (new products): use ISR with revalidate: 3600. This gives best performance (CDN cached) while keeping content reasonably fresh. Avoid SSR for static content.",
      "assertions": [
        { "type": "contains", "value": "SSG" },
        { "type": "contains", "value": "force-cache" }
      ]
    },
    {
      "id": 2,
      "prompt": "My dashboard page has a slow data fetch (3 seconds) that blocks the entire page from loading.",
      "expected_output": "Use Streaming with Suspense: wrap slow components in <Suspense fallback={<Skeleton />}>. Create loading.tsx for route-level skeleton. Or use PPR (Partial Prerendering) with ppr: true in next.config.js — static shell renders immediately, dynamic regions stream in. Never root-await slow fetches in page.tsx.",
      "assertions": [
        { "type": "contains", "value": "Suspense" },
        { "type": "contains", "value": "stream" }
      ]
    },
    {
      "id": 3,
      "prompt": "My page uses window.innerWidth in the initial render and shows a hydration error.",
      "expected_output": "Violation: No typeof window in initial render. window.innerWidth is browser-only and causes hydration mismatch. Fix: use the mounted useEffect pattern — const [mounted, setMounted] = useState(false); useEffect(() => setMounted(true), []); if (!mounted) return null. Or use dynamic import with ssr: false for the component.",
      "assertions": [
        { "type": "contains", "value": "hydration" },
        { "type": "contains", "value": "mounted" }
      ]
    }
  ],
  "should_not_trigger": [
    "Configure a NestJS dependency injection module",
    "Write a Go middleware for rate limiting",
    "Set up Kubernetes horizontal pod autoscaling"
  ]
}
