Next.js Discord

Discord Forum

PPR question

Unanswered
Siamese Crocodile posted this in #help-forum
Open in Discord
Siamese CrocodileOP
I've a ppr enabled on one page this page runs a query - how can I make it a static page so this query does not run twice and it runs only on build?


using export const dynamic = 'force-static' does not work - query still runs on each request

49 Replies

Siamese CrocodileOP
its a gql fetch call
using graphql-request lib
its no native fetch
export const experimental_ppr = true;

export default async function VipPage(props: Props) {
  const params = await props.params;
  const [messages, vipConfig] = await Promise.all([
    getMessages({
      locale: params.locale
    }),
    getVipConfig()
  ]);


  const { vipStrategy } = await publicClient.request(VipStrategyDocument);
i want it to run once on build
when i add this export const dynamic = 'force-static' i still see in logs that this query runs on each request
B33fb0n3
@Siamese Crocodileare you using generateStaticParams as well?
Siamese CrocodileOP
no i am not
@Siamese Crocodile no i am not
B33fb0n3
add generateStaticParams to build your pages during build time and then they should run only once on build
Siamese CrocodileOP
when i add it
output changes to dynamic
for this page
so thats with generateStaticParams
(only locales is en)
and thats without generateStaticParams
@Siamese Crocodile Click to see attachment
B33fb0n3
the ones with green dot should be right
Siamese CrocodileOP
what
but the f means its dynamic
so its not ppr'ed
B33fb0n3
add this to your page as well: 
export const dynamicParams = false;
Siamese CrocodileOP
added it but it does not change anything
B33fb0n3
are you sure? It should disable the ones with the orange dot
Siamese CrocodileOP
interface Props {
  params: Promise<{
    locale: string;
  }>;
}

export const dynamicParams = false;
export const experimental_ppr = true;

// eslint-disable-next-line @typescript-eslint/require-await -- ok
export async function generateStaticParams() {
  return locales.map((locale) => ({
    locale
  }));
}

export default async function VipPage(props: Props) {
  const params = await props.params;
  const [messages, vipConfig] = await Promise.all([
    getMessages({
      locale: params.locale
    }),
    getVipConfig()
  ]);
B33fb0n3
what about the build output?
Siamese CrocodileOP
B33fb0n3
can you provide a repro that shows the issue as well?
Siamese CrocodileOP
maybe later
@Siamese Crocodile maybe later
B33fb0n3
like that we can help you further and test while you are offline 🙂
B33fb0n3
@Siamese Crocodile did you already created it?
Siamese CrocodileOP
@B33fb0n3
Here u go the data is fetched on every request
and the dynamic part I've managaed to find out whats causing it

1. When u have a cookie call or smth that uses dynamic req data thats not in suspense and u use ppr without generate staitc params ur build output still indicates that its ppr but if u add generateStaticParams and u have cookies not wrapped in suspense then it changes output to dynamic.
Siamese CrocodileOP
but even when u generate statitc params
the getData runs on every req
check the repo
build it and go run pnpm start
then u will see getData runnign on every req
the page is marked as ppr'ed
but the getData runs on every req.
B33fb0n3
@Siamese Crocodile I just checked your repo and your data function is not inside your dynamic part: https://github.com/stachujone5/experimental_ppr_static_repro/blob/main/src/app/%5Blocale%5D/page.tsx#L24

It's inside your Home component and this component is not wrapped inside a suspense boundary (for example through loading.tsx). That's why it's called every single time. Either put it inside your dynamic part and give that suspense a fallback or wrap your Home component also with a suspense boundary like loading.tsx
Siamese CrocodileOP
But it does not need loading
it is not dynamic
it must run only on build
B33fb0n3
hm, that looks like an unexpected bug. You might want to report it on official ways 👍