16.0.3 used Date.now() before accessing either uncached data when generateStaticParams using drizzle

[fairjm]

Summary

When upgrading to version 16.0.3, I found that pages using drizzle to fetch data in generateStaticParams fail to build successfully, and the following error occurs in dev mode.

The error is within drizzle, located at the following address:
https://github.com/drizzle-team/drizzle-orm/blob/0.41.0/drizzle-orm/src/mysql2/session.ts#L121

The server memory unexpectedly increased threefold, so I want to remove use cache. All server-side dynamic components are wrapped in Suspense, which should allow them to function properly.

my code:

interface BlogDetailPageProps {
  params: Promise<{
    language: string;
    slug: string;
  }>;
}

export async function generateStaticParams() {
  const blogs = await getBlogSlugAndLanguages();
  return blogs;
}

export default async function BlogDetailPage({ params }: BlogDetailPageProps) {
  // "use cache";
  // cacheLife("weeks");
  // cacheTag((await params).slug);
  // console.log(
  //   "!!!!!!! request blog detail page cacheTag:",
  //   (await params).slug
  // );
  return (
    <Suspense>
      <DynamicBlogDetailPage params={params} />
    </Suspense>
  );
}

// db
export async function getBlogSlugAndLanguages(): Promise<
  { language: string; slug: string }[]
> {
  const result = await db
    .select({ language: blogs.language, slug: blogs.slug })
    .from(blogs)
    .where(eq(blogs.published, true))
    .groupBy(blogs.language, blogs.slug);
  return result;
}

Additional information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 16295
  Available CPU cores: 6
Binaries:
  Node: 22.13.0
  npm: 11.5.2
  Yarn: N/A
  pnpm: 10.20.0
Relevant Packages:
  next: 16.0.3 // Latest available version is detected (16.0.3).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.8.2
Next.js Config:
  output: standalone

Example

No response

[fairjm]

Disabling cacheComponents in next.config.ts allows the build to complete successfully.

[fairjm]

Commenting out generateStaticParams also allows the build to succeed:

// export async function generateStaticParams() {
//   // Pre-generate first page for each language
//   const blogs = await getBlogSlugAndLanguages();
//   return blogs;
// }

[icyJoseph]

Hi, here you need to:

• first, explicitly defer to request time, by placing some kind of work that does this before your database access, in this case, we can do a simple await connection(), https://nextjs.org/docs/app/api-reference/functions/connection
  • so before calling getBlogSlugAndLanguages or if its ok, inside of it, at the very top of the function.
• second, because we have deferred to request time, you have to wrap the subtree with Suspense.

It is not Suspense itself that defines dynamic behavior, it is your code (some might even say, techincally all code is dynamic), but it is a bit special with so-called non-deterministic operations, you have to align them under either a request time subtree (which itself needs to be Suspense wrapped), or cache them to make them deterministic within their lifetime.

Hopefully my PR with docs changes explaining all of this can be merged ASAP.

[icyJoseph]

No, I see, I thought it was done in the rendering of the page/layout.

Yeah that's weird, maybe it has been broken on a recent update (16.0.3) - I can try to find the canary that broke it.

[icyJoseph]

mmm I can't reproduce w/ this:

// app/blog/[slug]/page.tsx
import { setTimeout } from "node:timers/promises";

async function getBlogSlugAndLanguages() {
  const time = Date.now()
  await setTimeout(100)
  return [{ slug: `${time}` }];
}

export async function generateStaticParams() {
  const blogs = await getBlogSlugAndLanguages();
  return blogs;
}

export default function Page() {
  return <div>Hi</div>
}

What am I missing? Feels like I already misread a crucial bit of info in your report, so I'll try to not make more assumptions.

Do you perhaps mind trying to also try a few canary version? There's not that many this time around maybe between v16.0.2-canary.0 and v16.0.2-canary.19 -

[fairjm]

Oh, I was mistaken. I also used use cache in version 16.0.1, so it didn’t throw an error. After removing use cache, I saw the same error.
I made a very important mistake: the error is not in generateStaticParams, but in generateMetadata.
I overlooked that the first SQL call in the logs was normal (I printed the SQL), and the error only occurred on the second call. I added await connection() in generateMetadata, and now the build succeeds.

Here is my generateMetadata code:

export async function generateMetadata({
  params,
}: BlogDetailPageProps): Promise<Metadata> {
  const { language, slug } = await params;
  // add this line
  await connection();
  const blog = await getBlogBySlugCached(slug, language);

  if (!blog) {
    return {
      title: "Blog Post Not Found",
    };
  }

  return {
    ...

I didn’t expect it to be this place... I misjudged the cause.

No matter what, thank you. (By the way, the documentation for generateMetadata might need an update 😂, it doesn’t mention this point.)

[icyJoseph]

Yeah there's a bunch of places that need some kind of if cacheComponents branching - I am trying to cover those, but in general yeah - generateMetadata is part of the page/layout rendering, so same rules should apply.

Please don't forget to mark as answered :)

[fairjm]

Yes, this part is quite hidden. It only appears when generateStaticParams is added. If I comment out generateStaticParams, then generateMetadata(without add connection() call) works fine during both dev and build (yes, it runs properly, compiles, and shows no errors). However, as soon as generateStaticParams is present, errors occur during both dev and build.

[icyJoseph]

I'd just make sure that the static shell is as expected. Build the pages and load it with JS disabled for example.