Rendering Strategies

Automatic Static Bailout

You don't need to manually configure pages as "Static" or "Dynamic". Dinou analyzes your code at build time. By default, pages are pre-rendered (SSG).

However, if your component accesses request-specific data (cookies, headers, or search params), Dinou automatically "bails out" of static generation and switches to Server-Side Rendering (SSR) for that specific route.

// src/profile/page.tsx
import { getContext } from "dinou";

export default async function Profile() {
  const ctx = getContext();
  
  // ⚠️ Accessing cookies triggers the Automatic Static Bailout
  // This page will now be rendered on every request (SSR)
  const token = ctx.req.cookies.session_token;

  const user = await fetchUser(token);
  return <h1>Hello, {user.name}</h1>;
}

Forced Dynamic Rendering

Sometimes you want a page to be rendered on every request even if you don't use cookies or headers (e.g., displaying random data, or always-fresh DB content without caching).

You can force SSR by exporting a dynamic function from your page_functions.ts file.

// src/random/page_functions.ts
export function dynamic() {
  return true; // Forces SSR on every request
}

// src/random/page.tsx
export default async function Page() {
  return <div suppressHydrationWarning>Random: {Math.random()}</div>;
}

Incremental Static Regeneration (ISR)

ISR allows you to update static pages after you've built your site. You can rebuild specific pages in the background as traffic comes in, ensuring users always see relatively fresh content without rebuilding the entire project.

// src/blog/page_functions.ts
export function revalidate() {
  return 60000; // Time in milliseconds (1 minute)
}

Incremental Static Generation (ISG)

While ISR updates existing pages, ISG allows you to generate new pages that weren't present at build time.

This is particularly useful for large e-commerce sites or blogs where building thousands of pages upfront is too slow. You can build the most popular pages at build time and let the rest be generated on demand.

// src/products/[id]/page_functions.ts

export async function getStaticPaths() {
  // Only generate the top 10 products at build time
  const topProducts = await db.getTopProducts(10);
  
  return topProducts.map(p => p.id);
  
  // Any ID not in this list will be generated 
  // on-demand when a user visits /products/999
}