Data loaded on server before sending HTML to client
💡 Note: Although API takes 2 seconds, users see content immediately because data was pre-rendered on server!
Content of post 1. This is data fetched from server side before sending HTML to client.
Content of post 2. This is data fetched from server side before sending HTML to client.
Content of post 3. This is data fetched from server side before sending HTML to client.
Content of post 4. This is data fetched from server side before sending HTML to client.
Content of post 5. This is data fetched from server side before sending HTML to client.
Content of post 6. This is data fetched from server side before sending HTML to client.
Content of post 7. This is data fetched from server side before sending HTML to client.
Content of post 8. This is data fetched from server side before sending HTML to client.
Content of post 9. This is data fetched from server side before sending HTML to client.
Content of post 10. This is data fetched from server side before sending HTML to client.
// SSR by default in Next.js App Router
// No 'use client' directive needed
export default async function SSRDemo() {
// Fetch data on server before rendering
const data = await fetchData();
return (
<div>
{data.map(item => (
<div key={item.id}>{item.title}</div>
))}
</div>
);
}
// This runs on server and data is included in HTMLThis page has complete HTML with data when loaded, great for SEO!