Theo's Typesafe Cult•12mo ago

ssg with app router

When using ssg with the new t3-stack app router, i'm getting this:
[cause]: n [Error]: Dynamic server usage: Page couldn't be rendered statically because it used cookies. See more info here: https://nextjs.org/docs/messages/dynamic-server-error It doens't prevent build, but i recieve this error for every page render as SSG.

export async function generateStaticParams() {
  const resultsIds = await db.diagnosticResult.findMany({
    select: {
      id: true,
    },
  });

  return resultsIds.map(({ id }) => ({
    id: id,
  }));
}

export default async function page({ params }: { params: { id: string } }) {
  const result = await api.diagnosticResult.findById.query(params.id);

  if (!result) notFound();

  return (
    <main className="p-6">
      <DiagnosticResult result={result} />
    </main>
  );
}

export async function generateStaticParams() {
  const resultsIds = await db.diagnosticResult.findMany({
    select: {
      id: true,
    },
  });

  return resultsIds.map(({ id }) => ({
    id: id,
  }));
}

export default async function page({ params }: { params: { id: string } }) {
  const result = await api.diagnosticResult.findById.query(params.id);

  if (!result) notFound();

  return (
    <main className="p-6">
      <DiagnosticResult result={result} />
    </main>
  );
}

DynamicServerError - Dynamic Server Usage

26 Replies

Tribe•12mo ago

I am having the same issue even with the base t3 app, I am able to get it to go away by using cookies() before a TRPC server call but it feels like a bit of a hack and wouldnt want this to become an issue down the line

kaleembhatti•12mo ago

i had a similar issue (i think) the problem was with trpc the question thread https://discord.com/channels/966627436387266600/1194039579129421924

Tribe•12mo ago

yeah I saw that export const dynamic = "force-dynamic" also fixes the issue but that also feels like a bit of a hack unless the T3 team comes out and suggests that

kaleembhatti•12mo ago

true alot of people have this issue but no absolute solution not that i understand

Tribe•12mo ago

seen other threads of people claiming that using that has effected their router

kaleembhatti•12mo ago

...... ahem

kaleembhatti•12mo ago

idk how to implement this maybe this would work

kaleembhatti•12mo ago

i saw this in a thread but.... idk will see when it happens plus by then a solution would have been created

Tribe•12mo ago

yes supabase does also cause this error when passing cookies in, and that method does work to fix the errors from supabase but the base T3 app itself has the bug as well, I am just unsure of what the cause is.... possibly when they set the headers in TRPC context?

kaleembhatti•12mo ago

they do here (part of my layout.tsx)

          <TRPCReactProvider cookies={cookies.toString()}>
            <Providers>
              <StoreInitializer isNavOpen={false} />
              <NavBarIndex />
              <Toaster />
              {children}
            </Providers>
          </TRPCReactProvider>

          <TRPCReactProvider cookies={cookies.toString()}>
            <Providers>
              <StoreInitializer isNavOpen={false} />
              <NavBarIndex />
              <Toaster />
              {children}
            </Providers>
          </TRPCReactProvider>

if i remove cookies from here the error in production goes away but it gives another error no idea when this happened, but this error does not appear in the pages router for next js ( with trpc )

Tribe•12mo ago

its not the Provider cookies seems to be from any RSC that uses a TRPC server call const hello = await api.post.hello.query({ text: "from tRPC" }); adding this

cookies()
const hello = await api.post.hello.query({ text: "from tRPC" });

cookies()
const hello = await api.post.hello.query({ text: "from tRPC" });

causes the error to go away, probably cause the compiler doesnt try to compile it as a static page?

kaleembhatti•12mo ago

could be

kaleembhatti•12mo ago

Tribe•12mo ago

yeah it probably is equal to force dynamic

kaleembhatti•12mo ago

different methods, same result

Tribe•12mo ago

lol yep... I am fine with adding that, I just wanna hear it from someone at T3 so I can no stress about my project going to shit down the line

kaleembhatti•12mo ago

same

mattzOP•12mo ago

So, export const dynamic = "force-dynamic" really takes off the error. But, the static page it's being really render static? I have that doubt

kaleembhatti•12mo ago

Same

JorG•11mo ago

@mattz @kaleembhatti Do you already have a solution?

kaleembhatti•11mo ago

export const dynamic = "force-dynamic"

export const dynamic = "force-dynamic"

Writing this in the file did fixed the error Nothing official i guess Although looking at my current repo its working normally without this statement

JorG•11mo ago

In my case, even with this it won't work :/

kaleembhatti•11mo ago

try what the person did in this ss i have no idea how but this also seemed to work .

JorG•11mo ago

I do not use supabase, the problem is in nextauth and trpc, because every query using trpc routes checks cookies, and the generation of static routes is outside the context of trpc

kaleembhatti•11mo ago

ohhh

mattzOP•10mo ago

export const dynamic = "force-dynamic" this work for me to. But, i feel very strange with that. Because this tell to render dynamic, and i want ssg :x So, i don't know what' s really happening

Gaming

Programming

ssg with app router