GenerateStaticParams does not 404 if route is not in the ones returned

Answered

Indian mackerel posted this in #help-forum

Indian mackerelOP

2023-09-16T08:45:14.000Z

i have a [type] page in my application root that has

export function generateStaticParams() {
    return [{ type: "languages" }, { type: "guides" }];
}

however if i go in /sajkdioasd i still get a page, i want to redirect to 404, how do i do that?
i also have

export const dynamicParams = false;

Answered by Indian mackerel

kinda solved i dont remember how

View full answer

133 Replies

aardani

2023-09-16T08:45:38.000Z

what is your build log

@aardani what is your build log

Indian mackerelOP

2023-09-16T08:46:32.000Z

Route (app)                                 Size     First Load JS
â”Œ â—‹ /                                       8.56 kB        93.4 kB
â”œ Î» /_not-found                             0 B                0 B
â”œ â— /[type]                                 752 B          85.6 kB
â”œ   â”œ /linguaggi
â”œ   â”” /guide

this the part ur intrested in?

aardani

2023-09-16T08:46:45.000Z

do you use server action in /[type]?

Indian mackerelOP

2023-09-16T08:46:53.000Z

a what?

aardani

2023-09-16T08:47:11.000Z

try adding export const dynamic = 'error' to throw an error if dynamic function is used

which usually is the culprit of converting something to a lambda route

Indian mackerelOP

2023-09-16T08:48:04.000Z

in dev it still behaves correctly

lemme build

yes i get a build error

aardani

2023-09-16T08:48:56.000Z

what does it say

Indian mackerelOP

2023-09-16T08:49:13.000Z

Error occurred prerendering page "/linguaggi". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Page with `dynamic = "error"` couldn't be rendered statically because it used `headers`.

complete log

aardani

2023-09-16T08:49:50.000Z

there you go

if you want static page you can't access headers()...
static page are built without dependency of user data like headers or cookies

Indian mackerelOP

2023-09-16T08:50:57.000Z

i have authorization headers but its not from the user, its just a server secret to avoid user accessing that route

a build-only route

(i have an express backend, not nextjs')

aardani

2023-09-16T08:51:55.000Z

you can't protect an SSG route in server components. That would imply every request produces different html result which meant it would turn into SSR/lambda/request-time render

Try protecting it in middleware

Indian mackerelOP

2023-09-16T08:53:24.000Z

i am not protecting it

i mean

this is the function

export async function getGroups() {
    const groupsData = await (
        await fetch(process.env.NEXT_PUBLIC_SERVER_URL + "/groups", {
            method: "GET",
            headers: {
                Authorization: process.env.SUPERSECRET,
            },
            cache: "force-cache",
            next: {
                tags: ["groups"],
            },
        })
    ).json();

    return groupsData;
}

and its used in the server component

aardani

2023-09-16T08:53:50.000Z

is this used in client or server

bruh

do you want to cache the getGroups?

Indian mackerelOP

2023-09-16T08:54:34.000Z

i think so

lemme explain

aardani

2023-09-16T08:56:03.000Z

try removing headers: {} and see if the problem persists.
if you need protection we need to use some other way

Indian mackerelOP

2023-09-16T08:56:27.000Z

i have this configuration
[type]/[group]/[post]
type is static (guide|linguaggi)
group and post are dynamic
i thought to cache the group request to avoid calling it 150 times if i have 150 posts (even with this code it runs once every post but i think thats a different issue)

aardani

2023-09-16T08:57:14.000Z

you can't mix SSG with dynamic rendering currently

the staticity of a route is determine as one whole route and not per segment

@aardani try removing `headers: {}` and see if the problem persists. if you need protection we need to use some other way

Indian mackerelOP

2023-09-16T08:57:46.000Z

same issue

Error occurred prerendering page "/guide". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Page with `dynamic = "error"` couldn't be rendered statically because it used `headers`.

export async function getGroups() {
    const groupsData = await (
        await fetch(process.env.NEXT_PUBLIC_SERVER_URL + "/groups", {
            method: "GET",
            // headers: {
            //     Authorization: process.env.SUPERSECRET,
            // },
            cache: "force-cache",
            next: {
                tags: ["groups"],
            },
        })
    ).json();

    return groupsData;
}

[post] still uses headers but idk if thats an issue

aardani

2023-09-16T08:58:37.000Z

yes thats an issue :/

like i said its computed as a whole

not per segment

Indian mackerelOP

2023-09-16T09:02:28.000Z

how do i protect that route then

aardani

2023-09-16T09:02:53.000Z

you can use middleware.ts set at the same level as the app folder

Indian mackerelOP

2023-09-16T09:03:27.000Z

wdym, i need to protect the backend endpoint

aardani

2023-09-16T09:03:46.000Z

what do you mean by backend endpoint? which part do you need to protect?

Indian mackerelOP

2023-09-16T09:09:20.000Z

the api.website.com/groups endpoint

@Indian mackerel the api.website.com/groups endpoint

aardani

2023-09-16T09:10:52.000Z

Hmm does it not throw build error anymore?

im running out of ideas ðŸ« but you could try using a custom fetcher to bypass Next's fetch wrapper

@aardani Hmm does it not throw build error anymore?

Indian mackerelOP

2023-09-16T09:16:00.000Z

it still does but i think its because i still have other requests with headers

@Indian mackerel it still does but i think its because i still have other requests with headers

aardani

2023-09-16T09:21:38.000Z

try replacing it with a custom fetcher like

import { fetch as fetch2 } from "undici"

try export const dynamic = 'force-static' too

@aardani try replacing it with a custom fetcher like ts import { fetch as fetch2 } from "undici"

Indian mackerelOP

2023-09-16T10:43:40.000Z

shouldnt i remove all the headers from the requests?

(sorry for the delay in the response)

@Indian mackerel shouldnt i remove all the headers from the requests?

aardani

2023-09-16T10:44:21.000Z

But then how are you going to authenticate to your Expres backend?

Indian mackerelOP

2023-09-16T10:44:53.000Z

you said that with Headers i cannot generate static pages

aardani

2023-09-16T10:45:32.000Z

try adding { cache: 'force-cache' } along side with your auth-ed fetches

Indian mackerelOP

2023-09-16T10:46:32.000Z

already had them in all of them

@aardani try `export const dynamic = 'force-static'` too

Indian mackerelOP

2023-09-16T10:46:57.000Z

with this it does build succesfully

aardani

2023-09-16T10:47:06.000Z

yay

so is it solved

Indian mackerelOP

2023-09-16T10:47:18.000Z

yeah it is

still a little issue tho

the request should be cached but its not

aardani

2023-09-16T10:48:09.000Z

it has like a lot of scenarios where it would be opted out

un such case i think ure out of luck with fetch().
The last resort is using unstable_cache()

Indian mackerelOP

2023-09-16T10:50:11.000Z

cannot i override this?

but

wait

i removed headers

export async function getGroups() {
    const groupsData = await (
        await fetch(process.env.NEXT_PUBLIC_SERVER_URL + "/groups", {
            method: "GET",
            // headers: {
            //     Authorization: process.env.SUPERSECRET,
            // },
            cache: "force-cache",
            next: {
                tags: ["groups"],
            },
        })
    ).json();

    return groupsData;
}

this is the request, why is it not cached

@aardani it has like a lot of scenarios where it would be opted out

Indian mackerelOP

2023-09-16T10:51:37.000Z

it does not meet any of this requirement

aardani

2023-09-16T10:51:46.000Z

Try again without devtool open?

Indian mackerelOP

2023-09-16T10:51:57.000Z

uh?

i know the request is not being cached because i am watching the server's log

the express server log

aardani

2023-09-16T10:52:36.000Z

Indian mackerelOP

2023-09-16T10:52:39.000Z

yeah

bug?

i dont think so

aardani

2023-09-16T10:53:50.000Z

I'm not sure, you had a lot of uncached fetch so its hard to keep track why its not being cached

make sure this is not checked

@aardani make sure this is not checked

Indian mackerelOP

2023-09-16T10:54:45.000Z

i am not using devtools

now that i see its like its being cached only some times

lemme see a sec

aardani

2023-09-16T10:55:59.000Z

also like

NEXT_PUBLIC_ is not necessary if ure fetching it in the server

Indian mackerelOP

2023-09-16T10:56:33.000Z

no i am also using it in the client

thats why i have to use authorization headers

aardani

2023-09-16T10:56:44.000Z

ah i see, my bad

Indian mackerelOP

2023-09-16T10:56:53.000Z

same server, both client and server functionality

[=   ] - info Generating static pages (10/40)Failed to set fetch cache http://localhost:5000/groups TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11457:11) {
  cause: Error: read ECONNRESET
      at TCP.onStreamRead (node:internal/stream_base_commons:217:20)
      at TCP.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -4077,
    code: 'ECONNRESET',
    syscall: 'read'
  }
}

does this mean that the request itself failed?

aardani

2023-09-16T11:01:30.000Z

yeah

Indian mackerelOP

2023-09-16T11:01:36.000Z

how can it fail

whose fault is that

aardani

2023-09-16T11:01:48.000Z

its a whole separate issue that i can't tell

Indian mackerelOP

2023-09-16T11:09:06.000Z

only some times tho

so its kinda ok

Indian mackerelOP

2023-09-16T11:16:30.000Z

i reinserted all the headers in the requests and seems to be building anyways

aardani

2023-09-16T11:19:07.000Z

Maybe its the build cache :v

Indian mackerelOP

2023-09-16T11:24:37.000Z

i removed .next folder

and its actually refetching

strange

Indian mackerelOP

2023-09-16T11:34:28.000Z

@aardani sorry for the ping, if i have getServerSession in my navbar will it not run correctly if the page is statically built?

it seems like it

@Indian mackerel <@194128415954173952> sorry for the ping, if i have getServerSession in my navbar will it not run correctly if the page is statically built?

aardani

2023-09-16T11:35:00.000Z

yes

those uses headers()

so thats ur main culprit..........................

Indian mackerelOP

2023-09-16T11:35:26.000Z

how do i solve this?

can i have the page static and the navbar dynamic?

@Indian mackerel can i have the page static and the navbar dynamic?

aardani

2023-09-16T11:36:18.000Z

why not just dynamic website all the way?

you can still persists data in between request

i dont think using SSG or generateStaticParams fits your use case. Unless im missing the bigger picture

Indian mackerelOP

2023-09-16T11:37:19.000Z

the posts pages can be static

except for the navbar

aardani

2023-09-16T11:37:34.000Z

If you want auth-guarded page you will need to make the dynamic.

Unless you are willing to let go of the page auth guard and authenticate in the client instead,
i.e authenticate per components

Indian mackerelOP

2023-09-16T11:38:01.000Z

u mean useSession?

aardani

2023-09-16T11:38:49.000Z

100%

and SessionProvider

Indian mackerelOP

2023-09-16T11:40:27.000Z

i prefer dynamic website

will it be really different from static performance-wise?

aardani

2023-09-16T11:42:16.000Z

If you cache things properly and use stuff like Suspense to render fallback component when loading

then ~~no difference~~ almost no difference

dynamic website can still have the feel of SSG

thats the good thing about React18's suspense boundary

Indian mackerelOP

2023-09-16T11:43:52.000Z

by dynamic i mean not static but still completely SSR

aardani

2023-09-16T11:44:21.000Z

yes we are on the same page

@Indian mackerel now that i see its like its being cached only some times

Indian mackerelOP

2023-09-16T11:44:54.000Z

i take this back, its not caching it anymore

i'll pass the authorization via body, should solve it right?

aardani

2023-09-16T11:45:17.000Z

even without using getServerSession?

im mainly focusing on dynamic pages for now so i can't tell ifit will work or not in SSG/ISR ðŸ˜¦

@aardani even without using getServerSession?

Indian mackerelOP

2023-09-16T11:47:15.000Z

i am not using getServrSession for requests

Indian mackerelOP

2023-09-16T13:03:25.000Z

kinda solved i dont remember how

Answer