# How to Handle Dynamic Content When Cloning Websites with the AI Website Cloner Template
> Clone websites with dynamic content using the AI Website Cloner Template. Learn to manage dynamic content with Next.js 16 App Router, async server components, and client components.
- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: how-to-guide
- Published: 2026-06-30
---
**The AI Website Cloner Template handles dynamic content through Next.js 16 App Router patterns: async server components for data fetching, "use client" components for interactivity, and configurable caching via native fetch options.**
The JCodesMore/ai-website-cloner-template is built around Next.js 16’s App Router to faithfully reproduce both static markup and live data from target sites. When you need to handle dynamic content when cloning websites—such as API-driven lists, user-specific dashboards, or interactive widgets—the template provides a strict separation between server-only logic and client-side hydration. This architecture ensures your cloned codebase remains type-safe, SEO-friendly, and fully compatible with modern React rendering patterns.
## Server Components: The Foundation for Dynamic Content When Cloning Websites
The default and safest way to bring external data into a cloned page is to declare the route file as an **async server component**. Inside any `app/` route file, such as [`src/app/page.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/page.tsx), the fetch runs on the server at request time unless you later opt into static generation.
```tsx
// src/app/page.tsx (server component)
import type { Metadata } from 'next';
import { cn } from '@/lib/utils';
export const metadata: Metadata = {
title: 'Cloned Site – Dynamic Feed',
};
export default async function Page() {
const res = await fetch('https://api.example.com/articles', {
// Re‑validate every 60 seconds
next: { revalidate: 60 },
});
const articles: { id: string; title: string }[] = await res.json();
return (
Latest Articles
{articles.map((a) => (
{a.title}
))}
);
}
```
According to the JCodesMore/ai-website-cloner-template source code, this example lives at [`src/app/page.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/page.tsx). Server components never ship JavaScript for the data-fetching logic to the browser, which keeps bundle sizes small and initial page loads fast.
## Client Components: Hydrating Interactive UI in Cloned Sites
When a cloned site requires UI widgets that react to clicks, hovers, or animation states, you must use a **client component** by declaring `"use client"` at the top of the file. The template ships a reusable `Button` component in [`src/components/ui/button.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/ui/button.tsx) that demonstrates this pattern using Base UI primitives.
```tsx
// src/components/ui/button.tsx (client component)
"use client";
import { Button as Primitive } from "@base-ui/react/button";
import { cn } from "@/lib/utils";
export function Button({ children, onClick, ...props }: any) {
return (
{children}
);
}
```
Because this code lives in a client component, event handlers and React hooks execute only after hydration. As implemented in JCodesMore/ai-website-cloner-template, the `cn` utility from [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts) ensures Tailwind class names merge cleanly across both server and client boundaries.
You can compose this primitive into a dynamic widget that manages its own state. The following counter component imports the template’s `Button` and runs entirely in the browser:
```tsx
"use client";
import { useState } from "react";
import { Button } from "@/components/ui/button";
export default function Counter() {
const [count, setCount] = useState(0);
return (
Count: {count}
);
}
```
## Hybrid Rendering and Cache Revalidation
Next.js 16 lets you control caching behavior directly through the `next` options passed to native `fetch`. For content that changes frequently but must remain SEO-friendly, you can combine **server-component fetching** with **`revalidate`** or **`force-dynamic`** to force a fresh call on every request.
```tsx
const res = await fetch('/api/live-stats', { next: { revalidate: 0 } });
```
Setting `revalidate: 0` is ideal for dashboards, news tickers, or any data that updates multiple times per minute. This hybrid approach lets you handle dynamic content when cloning websites that require real-time accuracy without sacrificing the performance benefits of server rendering.
## The Cloning Pipeline Architecture for Dynamic Sites
The template’s built-in `/clone-website` skill follows a five-phase pipeline to capture and reconstruct dynamic behavior. Each phase records the original site’s network activity so the rebuilt clone can replicate its data flow exactly.
1. **Reconnaissance Phase** – The skill captures screenshots, extracts design tokens, and records network calls such as XHR and `fetch` that load dynamic content.
2. **Foundation Phase** – Discovered assets including images and fonts are downloaded to `public/`, while API endpoints are logged in component specs under `docs/research/components/`.
3. **Component-Spec Generation** – For each dynamic element, the spec stores the exact CSS captured via `getComputedStyle()`, the interaction model such as click-to-fetch-to-render, and the full API contract including method, endpoint, and request/response schema.
4. **Parallel Build** – Builder agents generate a server component for static markup and a client component for interactivity, wiring them together with the `cn` utility in [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts) to maintain tidy class composition.
5. **Assembly and QA** – After all pieces merge, the pipeline runs a visual diff to verify that dynamic behavior matches the original site.
## Extend the Template for Your Own APIs
You can adapt the repository for your own APIs by following these steps. These patterns ensure that any new data source integrates cleanly with the existing App Router structure.
- **Add a data-fetching server component** – Write an `async` component under `src/app/…` that calls your API. The default [`src/app/page.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/page.tsx) provides the reference implementation.
- **Create a client component for UI interaction** – Use `"use client"` and follow the `Button` pattern in [`src/components/ui/button.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/ui/button.tsx) to handle events.
- **Reuse the `cn` helper** – Import `cn` from `@/lib/utils` to merge Tailwind classes without conflict.
- **Document the API in component specs** – Add a markdown specification under `docs/research/components/` describing the endpoint and schema.
- **Sync skill files after modifications** – Run `node scripts/sync-skills.mjs` to regenerate the `/clone-website` skill for all platforms.
### Key Files in the Repository
The following files define how the template separates server logic from browser interactivity. Reference them whenever you add new dynamic features to a cloned site.
- [`src/app/page.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/page.tsx) – Example server component that fetches dynamic data.
- [`src/components/ui/button.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/ui/button.tsx) – Reusable client-side button primitive.
- [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts) – The `cn` utility for Tailwind class composition.
- `scripts/sync-skills.mjs` – Script that regenerates skill files across platforms.
- [`README.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/README.md) – Overview of the cloning pipeline and available commands.
## Summary
- **Async server components** in the `app/` router are the default pattern for fetching dynamic data at request time without shipping JavaScript to the browser.
- **Client components** marked with `"use client"` handle all interactivity, using template primitives like the `Button` component in [`src/components/ui/button.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/ui/button.tsx).
- **Fetch caching options** such as `next.revalidate` let you tune freshness for real-time content while keeping pages SEO-friendly.
- The `/clone-website` skill automates reconnaissance, spec generation, and visual QA to ensure cloned dynamic behavior matches the source site.
- Run `node scripts/sync-skills.mjs` whenever you modify the template’s source to keep the pipeline synchronized.
## Frequently Asked Questions
### Can I use SWR or React Query instead of native fetch in the template?
Yes, but only inside client components. Because the AI Website Cloner Template is optimized for Next.js 16 App Router conventions, native `fetch` in async server components is the preferred path for initial data loads. If you need mutations or heavy client-side caching, you can install SWR or React Query in a `"use client"` component and wrap your UI accordingly.
### How does the template handle client-side state without breaking server rendering?
The template enforces a clear boundary: data fetching happens in server components like [`src/app/page.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/page.tsx), while stateful logic lives in client components like [`src/components/ui/button.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/ui/button.tsx). You pass server-fetched data as props down to client components, ensuring the server renders SEO-friendly markup and the browser hydrates only the interactive islands.
### What happens if an API endpoint from the original site requires authentication?
During the reconnaissance phase, the `/clone-website` skill records the API contract—including headers and auth requirements—in the component spec under `docs/research/components/`. You then replace those credentials with your own secure tokens or proxy the request through a Next.js Route Handler so secrets never reach the browser.
### Does the template support real-time data such as WebSockets or Server-Sent Events?
The template’s Next.js 16 foundation supports real-time transports inside client components. For WebSockets or Server-Sent Events, create a `"use client"` module that initializes the connection in a `useEffect` hook. Server components cannot maintain persistent connections, so confine all real-time client logic to the browser layer and stream updates into the same UI primitives provided by the template.