I'm migrating from Vite, I'm trying to understand the basics of Next.js

when you build your page and check the build logs, you can directly see, how your pages are served (see attached one example). You can see, how google sees your page, when you take a look at the "downloaded document", when you check your network tab, while loading the page

What's the difference between Static and SSG?

Static is a page, that has no dynamic functions like headers, cookies, dynamic props, ...
SSG on the other hand contains dynamic functions (in this case dynamic props) and the pages have been statically generated during build (in this case by using generateStaticParams)

So SSG is a dynamic page that has been rendered once which won't be rendered again until the next build?

That has been build. So the html and everything is ready

I see, thank you

And SSG-dynamic difference is known by the absence of getStatic- methods, right?

Both are for different routers. Mine is for app router and you mean the pages router (the ones with „gerStatic-….“ methods)

@American Sable solved?

Not really, I am confused with what differs between static and SSG in app router

You can think of it like this:
Static: A page that's always the same, like a poster.
SSG: Pages that are built ahead of time, but can be slightly different, like making a bunch of similar posters with slightly different pictures on them.

static has no dynamic content

SSG has dynamic content but is pre-rendered at build time

I get the difference, I just don't get the difference betweeh them in app router & pages router

.

Got it. And in app router SSG, I didn't really understand dynamicParams = false part. Aren't we using SSG to not include params dynamically?

If you don’t explicitly do: export const dynamicParams = false, Next.js will generate on demand the pages for the params not returned by generateStaticParams() and then save the newly generated page in cache along the pre-generated ones at build time

So, at built time it will generate the pages for the params provided (SSG) by generateStaticParams(), you decide if you want to return not-found for the rest of params, or allow the user to request a page and wait for the page to be generated on demand, the former is useful when you have pre-defined routes, and the latter is useful when they’re really dynamic pages

I am really confused by what you are meaning here. Can you provide me with a few examples please?

If you give me a couple minutes I’ll be able to show an implementation example with actual code, in the meanwhile I can try to explain. What exactly confused you?

I'm not really familiar with the wordings you used so I didn't understand the context

As I've said I'm pretty new to Next.js

/app/blog/[slug]/page.tsx
localhost/blog/X

export const dynamicParams = false; // this will tell Next.js to show the not-found page for slug = “5” (because it was not provided by generate staticParams() below

export async function generateStaticParams() {
  // this will generate static pages for slugs “1”, “2”, “3” and “4”

  return [{ slug: "1" }, { slug: "2" }, { slug: "3" }, { slug: "4" }];
}

interface Props {
  // params are always parsed as strings by default
  params: Promise<{ slug: string }>;
}

export default async function Page({ params }: Props) {
  const { slug } = await params;
  const generatedAt = Date.now();

  return (…)
}

And what would happen if we set it to true?

Then you’ll have these 4 static pages already built, and the rest will be generated on demand when the user requests it:

/blog/5 => will be generated on demand (when user request it)

/blog/4 => will be served from static pages generated at built time

Then is generateStaticParams in app router the equivalent of getStaticPaths in pages router?

Yes, exactly. That’s why I did this comparison here https://nextjs-forum.com/post/1343173215488442389#message-1343953049273630856

And getStaticProps would be using a dynamic API?

Using { params } would be using dynamic APIs.
In the newest Next.js versions they call “Dynamic APIs” to all these APIs that opt your page out of static rendering. These are promises now and since they need to be awaited they indicate to Next.js that the page will be dynamic

params, searchParams coming from props

and functions cookies(), draftMode(), headers() coming from ‘next-headers’ package

getStaticProps will provide the params at build time so next.js can generate the pages at ahead of time: when it’s doing the production build

I would recommend going through that section of their docs, they’re good docs. For me it’s hard to explain the terms not knowing if you’re familiar with them or not:c

Hey!

If I use useEffect in a static page, will it make that page dynamic?

No, using client only features does not turn your page dynamic. The page will still pre-render at built time but you’ll also ship the code for the client component to the browser so it can continue to re-render on the client instead

I would recommend you to separate the client component from the pages, by making a different file marked with “use client” and exporting your client components from there. Then just import them wherever you need them instead of marking with “use client” where your page.tsx is. This way you keep your pages to render on the server and you only add to the client bundle the necessary granular components