Migration from v6 to v7

2.1getProps Contract: Direct Props Object Return

In Dinou v6, getProps required wrapping the returned data under a page key. In Dinou v7, this artificial wrapper is completely eliminated. getProps directly returns the object that will be passed as props to your page component:

// src/users/[id]/page_functions.ts
export async function getProps(params) {
  const user = await fetchUser(params.id);
  return {
    page: {
      user,
      title: `Profile of ${user.name}`,
    },
  };
}

// src/users/[id]/page_functions.ts
export async function getProps(params) {
  const user = await fetchUser(params.id);
  return {
    user,
    title: `Profile of ${user.name}`,
  };
}

The corresponding Page component receives user and title directly as top-level props:

// src/users/[id]/page.tsx
export default function UserProfilePage({ user, title }: { user: User; title: string }) {
  return (
    <div>
      <h1>{title}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

2.2revalidate Time Unit: Strictly Seconds (s)

In Dinou v6, cache revalidation intervals were specified in milliseconds (ms). In Dinou v7, revalidate is strictly defined in seconds (s). This aligns with HTTP standards (RFC 7234 Cache-Control: max-age=N), edge CDN providers, and component-level cache slots:

// 60,000 milliseconds (1 minute)
export const revalidate = 60000;

// or function form
export function revalidate() {
  return 60000;
}

// 60 seconds (1 minute)
export const revalidate = 60;

// or function form
export function revalidate() {
  return 60;
}

💡 Tip: If you leave revalidate = 60000 in v7, your route will be cached for 60,000 seconds (over 16 hours) instead of 1 minute! Be sure to divide existing millisecond numbers by 1000.

2.3Elimination of dynamic: Single Source of Truth via revalidate

In Dinou v6, dynamic was the single source of truth for on-demand SSR (dynamic = true), and revalidate === 0 (or omitted) meant static forever (SSG). In Dinou v7, the dynamic keyword is completely removed in favor of unifying route execution and caching under revalidate as the single source of truth:

// src/random/page_functions.ts
export function dynamic() {
  return true; // Deprecated!
}

// src/random/page_functions.ts
export const revalidate = 0; // Live SSR on every request

2.4SSG Lifecycle: Build-Time Generation (dinou build) vs Server Startup

In Dinou v6, static site generation (SSG) was deferred until the production server started (dinou start). The server crawled routes, generated static HTML and RSC payloads, and delayed server readiness. In Dinou v7, static generation occurs strictly Ahead-of-Time during compilation (dinou build).

# v6: Build only packaged client assets
npm run build

# v6: Server crawl & SSG ran at startup (delayed boot)
npm run start

# v7: All static HTML & RSC payloads pre-rendered here
npm run build

# v7: Instant boot (0ms) from pre-compiled storage
npm run start

2.5Layout Lifecycle: 100% State Preservation (Zero Remounts on Navigation)

In Dinou v6, navigation was monolithic: navigating between sibling routes that shared a layout (e.g., from /dashboard/analytics to /dashboard/settings) caused the layout component tree to re-evaluate and re-mount. In Dinou v7, Horizontal Segmentation separates the layout shell from dynamic child pages: layouts never unmount or re-execute during client-side navigation between sibling routes.

// src/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  // In v6: Re-fired on every sibling page navigation
  // because the entire layout re-mounted!
  useEffect(() => {
    trackPageView();
  }, []);

  return <section>{children}</section>;
}

// src/dashboard/layout.tsx
import { usePathname } from "dinou";

export default function DashboardLayout({ children }) {
  const pathname = usePathname();

  // In v7: Layout never unmounts. Listen to pathname
  // or place page-level tracking directly in page.tsx!
  useEffect(() => {
    trackPageView(pathname);
  }, [pathname]);

  return <section>{children}</section>;
}

2.6Elimination of Express onServerInit(app) in Plugins

In Dinou v5.2.0 and v6, plugins registered custom Express middlewares or webhook endpoints by receiving the Express application instance via onServerInit(app). In Dinou v7, Express has been completely eliminated in favor of pure W3C Web Standards (Request, Response, ReadableStream). As a result, onServerInit(app) is no longer invoked or supported.

// dinou.config.js (v6)
module.exports = {
  plugins: [
    {
      name: "custom-api",
      onServerInit(app) {
        // Deprecated! Express app no longer exists in v7
        app.get("/api/health", (req, res) => {
          res.json({ ok: true });
        });
      },
    },
  ],
};

// dinou.config.mjs (v7)
import { defineConfig } from "dinou/config";

export default defineConfig({
  plugins: [
    {
      name: "custom-api",
      async onRequest(request, context) {
        const url = new URL(request.url);
        if (url.pathname === "/api/health") {
          return Response.json({ ok: true });
        }
      },
    },
  ],
});

2.7Development Mode Assets: 100% In-Memory by Default (No .dinou/public on Disk)

In Dinou v6, dinou dev continuously wrote JavaScript chunks, CSS stylesheets, sourcemaps, and manifests to disk inside the .dinou/public/ directory. In Dinou v7, the development engine operates 100% in RAM via globalThis.__DINOU_MEM_FILES__ to eliminate disk I/O bottlenecks and Windows antivirus penalties. The .dinou/public/ directory is never created on disk during normal development.

# In v6, dev server continuously writes to disk:
my-app/
└── .dinou/
    └── public/             # Created on disk
        ├── client.js
        ├── styles.css
        └── manifest.json

# In v7, served instantly from memory (<0.5ms):
globalThis.__DINOU_MEM_FILES__
├── /client.js       (in-memory Buffer)
├── /styles.css      (in-memory Buffer)
└── manifest.json    (in-memory Buffer)
# (.dinou/public is NOT created on disk)

DINOU_WRITE_TO_DISK=true npm run dev

3.1. Horizontal Segmentation & Layout State Preservation

In earlier meta-frameworks, navigating between sibling routes (e.g. /dashboard/analytics to /dashboard/settings) frequently caused the entire layout to re-evaluate, resetting video playback, collapsing open menus, and wiping sidebar search inputs.

Dinou v7 splits client requests into two decoupled endpoints:

• Layout Plane: Renders exclusively the outer layout shell and parallel slots, establishing the boundary where child content will reside.
• Page Plane: Renders exclusively the leaf page component (<Page />).

When navigating between sibling routes sharing a layout, the layout never unmounts or re-executes. State is 100% preserved. Furthermore, the layout cache is query-string aware (searchPart), so modifying query parameters (e.g. ?tab=billing) updates layout slots in real time without tearing down the shell.

3.2. layout_functions for Decoupled Layout ISR

Layouts can now declare independent cache lifetimes, cache tags, and parameter validations via layout_functions.ts (or layout.functions.ts):

// src/dashboard/layout_functions.ts
export const revalidate = 3600; // Cache the layout shell for 1 hour
export const getCacheTags = ["dashboard-shell", "nav-links"];
export const allowISG = true;

export async function validateParams(params) {
  return true;
}

🚀 Granular Purging: Calling revalidateTag("dashboard-shell") purges only the layout shell without forcing the re-rendering of all nested sub-pages. To cascade layout invalidation down to all child pages, pass { cascade: true }.

3.3. Surgical Page Revalidation: revalidatePage (New in v7 API)

In Dinou v6, revalidatePage did not exist: on-demand revalidation was limited to revalidatePath, which re-rendered the entire monolithic route tree. Because Dinou v7 completely decouples layouts from child pages, it introduces the revalidatePage(path) API in "dinou/server":

// Inside a Server Function ("use server") or CMS Webhook
import { revalidatePage, revalidatePath } from "dinou/server";

export async function updateArticle(slug: string) {
  await db.articles.update({ where: { slug }, data: { ... } });

  // ⚡ New in v7: Regenerates strictly page.rsc and index.html
  // Leaves parent layout.rsc completely untouched, saving significant CPU and DB queries!
  await revalidatePage(`/blog/${slug}`);
}

3.4. Vertical Segmentation: <DinouCacheSlot> & refreshSlot()

Dinou v7 introduces component-level micro-caching inside pages with <DinouCacheSlot>:

// src/analytics/page.tsx
import { DinouCacheSlot } from "dinou/server";

export default function AnalyticsPage() {
  return (
    <div>
      <h1>Analytics Dashboard</h1>
      {/* Caches this component for 60 seconds; tags allow targeted invalidation */}
      <DinouCacheSlot id="metrics-slot" tag="metrics-tag" revalidate={60}>
        <ExpensiveMetricsGraph />
      </DinouCacheSlot>
    </div>
  );
}

"use client";
import { refreshSlot } from "dinou";

export function LiveRefreshButton() {
  return (
    <button onClick={() => refreshSlot("metrics-slot")}>
      Refresh Metrics Only
    </button>
  );
}

3.5. Partial Prerendering (PPR) Engine

Partial Prerendering combines the instant delivery of static sites (0ms TTFB) with the personalization of dynamic SSR in a single HTTP response:

1. Static Shell Prelude: The outer layout and skeleton placeholders are served at 0ms TTFB directly from edge CDN cache.
2. Streaming Dynamic Holes: Components wrapped in <Suspense> execute concurrently on the server and stream in as chunks that swap the skeleton with live content.

Configuring PPR:

// src/dashboard/page.tsx
import { Suspense } from "react";
import { getContext } from "dinou";

async function UserFeed() {
  const ctx = getContext();
  const user = ctx?.req?.cookies?.user || "Guest";
  const data = await fetchFeedForUser(user);
  return <FeedList items={data} />;
}

export default function DashboardPage() {
  return (
    <div>
      {/* 🚀 Static Shell: Sent at 0ms TTFB */}
      <header><h1>Dashboard</h1></header>

      {/* ⚡ Dynamic Hole: Streamed and replaced on the fly */}
      <Suspense fallback={<div className="skeleton">Loading feed...</div>}>
        <UserFeed />
      </Suspense>
    </div>
  );
}