Flag Segments using a database Query as Dynamic Rendered Segments

[Josehower]

Goals

1. Having Dynamic Rendering on Server Components that import some data form an internal source (for example a Database or a File).
2. No need to configure Server Components requiring database data with dynamic = force-dynamic or revalidate = 0

Background

Currently a Server Component such as

// app/animals/page.js

export function AnimalsPage(){

  const animals = getAnimalsFromDb()

  return (<> 
    animals.map((animal)=><div>{animal.name}<div>)
    </>
  )
}

Is flagged as a Static Page since is not fitting the Dynamic Rendering requirements of Next.js. This would be different if the database query would be performed from an API route or if a Dynamic Function is called.

Proposal

I understand it is possible to configure this segments as dynamic either using dynamic=force-dynamic or revalidate=0. But I think it would be better if Next.js recognises this components as Dynamic Rendering by default. Maybe one possible option is recognising if the Database Query is using react/cache.

// database.js 
export const getAnimalsFromDb  = cache(async (id: string) => {
  const user = await sql`
    SELECT * FROM animals;
  `
  return user;
});

// app/animals/page.js 
import { getAnimalsFromDb } from 'database.js'; // This set This component as Dynamic Rendered

export function AnimalsPage(){
...

Something that can also be nice to have is using a syntax similar to server only.

so basically if use something like import dynamic only at the top of a file, this would enforce Dynamic Rendering when is imported on a server component.

// database.js 
'dynamic only' // This set This file as Dynamic Only

export const getAnimalsFromDb  = cache(async (id: string) => {
  const user = await sql`
    SELECT * FROM animals;
  `
  return user;
});

// app/animals/page.js 
import { getAnimalsFromDb } from 'database.js'; // This importing a dynamic only file set This component as Dynamic Rendered

export function AnimalsPage(){
...

another option would be something like import 'next/force-dynamic'

// database.js 
import 'next/force-dynamic' // This set This file as Dynamic Only

export const getAnimalsFromDb  = cache(async (id: string) => {
  const user = await sql`
    SELECT * FROM animals;
  `
  return user;
});

// app/animals/page.js 
import { getAnimalsFromDb } from 'database.js'; // This importing a force-dynamic file set This component as Dynamic Rendered

export function AnimalsPage(){
...

[karlhorky]

Workaround

Wrap the sql`...` tagged template function from the postgres library in a separate function which calls headers() or unstable_noStore() from next/headers on every database query:

database/connect.ts

import 'server-only';
import { unstable_noStore as noStore } from 'next/cache';
import postgres, { Sql } from 'postgres';

declare module globalThis {
  let postgresSqlClient: Sql;
}

// Connect only once to the database
// https://github.com/vercel/next.js/issues/7811#issuecomment-715259370
function connectOneTimeToDatabase() {
  if (!('postgresSqlClient' in globalThis)) {
    globalThis.postgresSqlClient = postgres();
  }

  // Workaround to force Next.js Dynamic Rendering on every database query:
  //
  // Wrap sql`` tagged template function to call `noStore()` from
  // next/cache before each database query. `noStore()` is a
  // Next.js Dynamic Function, which causes the page to use
  // Dynamic Rendering
  //
  // https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic-rendering
  //
  // Ideally there would something built into Next.js for this,
  // which has been requested here:
  //
  // https://github.com/vercel/next.js/discussions/50695
  return ((
    ...sqlParameters: Parameters<typeof globalThis.postgresSqlClient>
  ) => {
    noStore();
    return globalThis.postgresSqlClient(...sqlParameters);
  }) as typeof globalThis.postgresSqlClient;
}

export const sql = connectOneTimeToDatabase();

Then any usage of sql`...` becomes another way to trigger Dynamic Rendering, in any page you use it in:

app/page.tsx

import { sql } from '../database/connect';

export default async function Page() {
  // ✅ Any usage of sql`...` will trigger Dynamic Rendering, just like headers() would
  const animals = await sql`SELECT * FROM animals`;

  return (
    <div>
      <ul>
        {animals.map((animal) => (
          <li key={animal.id}>{animal.name}</li>
        )}
      </ul>
    </div>
  );
}

cc @sebmarkbage what are your thoughts on a built-in API for this in Next.js? eg. import 'next/force-dynamic' as in the post above?

[karlhorky]

Updated the above from headers() to noStore() as per this comment from @timneutkens (since no header values were used in the database query function):

• Deep Dive: Caching and Revalidating #54075 (reply in thread)

[karlhorky]

Update:

experimental.dynamicIO: true seems like it may be that API that I was asking for 😍

• Introduce dynamicIO experiment #67571
• https://x.com/rauchg/status/1831101354468897132

app/page.js

 import { sql } from "@vercel/postgres";
-import { headers } from "next/headers";
 import { PokemonList, Pokemon } from "./components";

 export default async function Home() {
-  headers();
   const { rows } = await sql`SELECT FROM pokemon ORDER BY RANDOM() LIMIT 12`;
   return (

next.config.mjs

 const nextConfig = {
   experimental: {
     ppr: true,
+    dynamicIO: true,
   },
   images: {
     remotePatterns: [

[Eprince-hub]

The experimental.dynamicIO: true flag is working with the 15.0.0-canary.140 release, and there will be no need for the headers or unstable_noStore workaround

upleveled/next-js-example-spring-2024-atvie#10