Next.js Discord

Discord Forum

Debugging ISR/SSG/SSR pages

Unanswered
Cape lion posted this in #help-forum
Open in Discord
Cape lionOP
Hi, I'd like to debug and know what kind of page (ISR/SSG/SSR, etc) a Nextjs page is. I need to know during development, I don't want to have to build to see this. Any tricks, is this possible? Thanks!

7 Replies

Cape lionOP
@B33fb0n3 currently using 15.4.4.

btw, I saw in the Nextjs dev tools on the frontend (a little lower-third in the bottom) that I can see if the page is static or dynamic, and it says static for all pages, which is not true and I need to know more - was it SSG, is there ISR on it, etc.
@Cape lion <@301376057326567425> currently using 15.4.4. btw, I saw in the Nextjs dev tools on the frontend (a little lower-third in the bottom) that I can see if the page is static or dynamic, and it says static for all pages, which is not true and I need to know more - was it SSG, is there ISR on it, etc.
as you dont want to use any fancy indicators like that one on the page and also not the ones from the build process, you need to have it all in your mind. To have it all in your mind, you need to know if you page is static or dynamic. Thats actually a pretty easy task: check if you use any dynamic functions like dynamic params, cookies, headers, ... without doing anything else, your page is SSR.

And then only when you do anything else to make it static, you normally directly know what you did. Example: added revalidate time = ISR or dynamic = force-static = SSG and so on.

In next16 that improved a bit as well and completely changed with cacheComponents

So you can ask yourself:
- Is page static or dynamic?
-> Static: SSG
-> Dynamic: SSR
- Did I modified the build process somehow?
-> No: SSR
-> Yes: ISR/SSG (depending on what you did)
@Cape lion solved?
Cape lionOP
@B33fb0n3 Well, not really, I guess I just need to document what I'm doing and/or keep in mind what I've done, so I know what the pages are. It would've been really useful to see visually which component is a client, which is a server one, where I have suspense, what kind of page the one I'm currently viewing is... I believe Astro had some useful tools to display types of components or debug this right in the frontend, but I might be wrong. Anyway, thank you for your help.
@Cape lion <@301376057326567425> Well, not really, I guess I just need to document what I'm doing and/or keep in mind what I've done, so I know what the pages are. It would've been really useful to see visually which component is a client, which is a server one, where I have suspense, what kind of page the one I'm currently viewing is... I believe Astro had some useful tools to display types of components or debug this right in the frontend, but I might be wrong. Anyway, thank you for your help.
iirc there is a vscode extension that can analyse if a specific component is clientside or serverside. A lot of this "thinking" is just training and experience.

The "Did I modified the build process somehow?" can be skipped, when you go to the top of your page.tsx and there you see all possibilities if something was changed.

And the "Is page static or dynamic?" is just basic knowledge about the codebase, that you working it. So that should be fine as well.

The best thing that you can do is to use the build log (I know you said, you dont want to use it, but its still the best and most reliable output).

Having client and server side components is a whoooole different thing compared to the pages, that we just did. In general you can remember, that all your components and pages are serverside except the component is marked as 'use client'. And thats very easy to see: scroll to the top and you know ^^
@Cape lion solved?