dinou docs

Overview

page_functions.ts is a file for defining four different possible functions. These are:

getProps

Fetch data in the server and pass this data as props to the page component (client or server component) and root layout.

getStaticPaths

Specify the values of dynamic params in the route for which SSG will be applied.

dynamic

Control whether a page is rendered dynamically, bypassing SSG.

revalidate

Specify when to revalidate data fetched in SSG.

getProps Function

A function to fetch data in the server and pass this data as props to the page component and the root layout (if exists).

// src/dynamic/[name]/page_functions.ts

export async function getProps(params: { name: string }) {
  const data = await new Promise<string>((r) =>
    setTimeout(() => r(`Hello ${params.name}`), 2000)
  );

  return { page: { data }, layout: { title: data } };
}

getStaticPaths Function

Function to get the values of a dynamic param in the route for which SSG will be applied. Fetching data in the server with getProps or within the body of a Server Componentincreases the FCP (First Contentful Paint), that is, when the user sees something on the screen, when rendering dynamically, that is, on the fly. So this technique must only be used if accompanied by SSG (Static Site Generation).

// src/dynamic/[name]/page_functions.ts

export function getStaticPaths() {
  return ["albert", "johan", "roger", "alex"];
}

dynamic Function

This function is for when we want the page to be rendered dynamically, bypassing SSG. It must return true to render a page dynamically. Otherwise SSG will be used.

export function dynamic() {
  return true;
}

revalidate Function

This function is for when we want to revalidate data fetched in SSG.

export function revalidate() {
  return 60000; // ms
}

Usage Examples

Complete Example

// src/blog/[id]/page_functions.tsx
export function getStaticPaths() {
  // Return an array of possible 'id' values for SSG
  return ["1", "2", "3"];
}

export async function getProps(params: { id: string }) {
  // Fetch data based on the 'id' parameter
  const post = await fetch(`https://api.example.com/posts/${params.id}`).then(
    (res) => res.json()
  );
  return { page: { post }, layout: { title: post.title } };
}

export function dynamic() {
  // Force dynamic rendering (skip SSG) if needed
  return false; // Set to true to bypass SSG
}

export function revalidate() {
  return 60000; // ms
}

Usage in Page Component

// src/blog/[id]/page.tsx
"use client";

export default function Page({
  params,
  post,
}: {
  params: { id: string };
  post: { title: string; content: string };
}) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

Usage in Root Layout

"use client";

import type { ReactNode } from "react";

export default function Layout({
  children,
  sidebar,
  title,
}: {
  children: ReactNode;
  sidebar: ReactNode;
  title: string;
}) {
  return (
    <html lang="en">
      <head>
        <title>{title ?? "react 19 app"}</title>
      </head>
      <body>
        {sidebar}
        {children}
      </body>
    </html>
  );
}

Page Functions