I just don't understand SSR vs SSG

Question

So, I'm a little new to next js. I have worked on it but I'm now actually understanding it and learning it. So, while following this tutorial here's what I understood. SSR: Server side rendering is something that happens when user want it to happen. Say, when a user clicks the page will be rendered in the server at that time only. SSG: The pages of all the html that might be required are preloaded already. Super fast coz of this reason. Say we have 10 links in the page. All of them will be preloaded already. HTML. So, all user gotta do is click and it's super fast as it's loaded already. Sad thing is, that it's static.Now, using this I wrote this funciton export async function generateStaticParams() {
  const usersData: Promise<User[]> = getAllUsers();
  const users = await usersData;

return users.map((user) => {userId: user.id.toString()}) 
}This function changed my SSR component to an SSG component and it was also visible when I ran npm run build. The problem is that according to the definition, for SSR only when I click that's when the link should be rendered (see the image of 10 links. Each name of the user is a link that opens their posts. so when I click on one of them only that's when I'll see the req for that link on the network tab) but in my case I already have all 10 of them loaded even in the case of SSR. So, I just don't understand the difference between SSR and SSG.

Asiatic Lion · Answer

Also, below is the remaining code. Though, I don't think that will be of much use here:

type Params = {
  params: {
    userId: string
  }
}

export async function generateMetadata({params: { userId }}: Params): Promise<Metadata> {
  const userData: Promise<User> = getUser(userId);
  const user: User = await userData;

  return {
    title: user.name,
    description: `This is the page of ${user.name}`
  }
}

// ? Here we will be doing parallel requesting https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#parallel-data-fetching

export default async function UserPage({params: {userId}}: Params) {
  console.log("userId from UserPage", userId);
  const userData: Promise<User> = getUser(userId); // ? Here, we are not using await for the same reason so to not wait for one function and have parallel requesting
  const userPostsData: Promise<Post[]> = getUserPosts(userId);

  // const [user, userPosts] = await Promise.all([userData, userPostsData]);

  const user = await userData;

  return (
    <div>
      <h2>{user.name}</h2>
      <br />
      <Suspense fallback={<h2>Loading...</h2>}>
        <UserPosts promise={userPostsData} />
      </Suspense>
    </div>
  )
}

{user.name}

Loading...}>

) }

I just don't understand SSR vs SSG

1 Reply