When do we need to fetch API on server (getServersideProps) vs client side?

[devinekadeni]

I've been using NextJS for a while, but I still get this confusion.
One thing that I could think of is when you want to serve HTML page with already filled data, it's recommended to use getServerSideProps (am i right?). And are there any other reason when to fetch in server vs client?

But after that, a question pop out again in my head "when should I serve HTML with already filled data?"

I think this question kind of out of NextJS scope, but I've been thinking about this lately,
if anyone could answer this, I really appreciate it 🙏🙏🙏

[alanqchen]

(Note that these are my opinions and others may have different situations on when to use what)

If the data that is displayed to the user changes frequently, and it's important that the user see the most up-to-date data (like a dashboard), then you should use getServerSideProps (fetches the API data on each request) or send the request from the client-side. Fetching from the client vs server is a smaller distinction and the best option may vary depending on the use case. Do consider that if you use getServerSideProps to fetch the API but your API server goes down, then the page will no longer be able to be served since the page will fail to build.

However, for "when you want to serve HTML page with already filled data", getStaticProps may also be used, and if the data does not change frequently or it's not important for the user to see the most up-to-date version, consider using incremental static regeneration.

[devinekadeni]

@alanqchen really appreciate your answer and I got your point mostly.
And regarding:

Fetching from the client vs server is a smaller distinction and the best option may vary depending on the use case

Could you give me some simple example of the use case for both of them?

[alanqchen]

One case where I would fetch using getServerSideProps is:

• A longer TTFB is acceptable
• SEO is critical for the page
• The content fetched from the API is important and updates frequently
• It's important for the user to see the most up-to-date information

If the page is not SEO critical, such as an admin page that won't be crawled, and it's important for the user that the user sees the most up-to-date data, then I would opt for using client-side fetching (and take a look at Vercel's SWR package). This way the user still gets a fast TTFB and will see the layout of the admin page which then will be populated with the dynamic data fetched from the client.

Admittedly, the use case for getServerSideProps is certainly narrow in my opinion, especially since the introduction of incremental static regeneration.

[ghost]

I'd really be interested in reading more about this, esp. a piece that compares load times of SSG v. SSR v. CSR. My general impression is SSG is fastest, but can only be used with static sites, like blogs or some portfolios. I've read a lot about what a revelation server-side rendering is, but, aside from SEO, I remain skeptical. Maybe I'm just not building the right kinds of sites? If anyone has a link to an in-depth analysis of these different approaches, please post it.

[alanqchen]

In my opinion, comparing the load time of SSG vs. SSR vs CSR wouldn't be entirely useful information as they have different use cases, but I think it would look something like this (in terms of TTFB): SSG <= CSR < SSR. If you're using SSG or SSR, then you're most likely doing it for SEO, otherwise you could pretty much do everything with CSR instead (especially important if you want to make a SPA). Here's the best article I could quickly find that goes through the basic pros and cons.

However, the original question asks about where to fetch the API which adds an extra factor for consideration. For example, the page can be a static pre-generated page from the server, but still, use the client to fetch the data and populate the page.

My general impression is SSG is fastest, but can only be used with static sites, like blogs or some portfolios

This has changed somewhat recently with the introduction of incremental static site generation (iSSG) in Next.js, which works similar to stale-while-revalidate. So now you can have dynamic sites while still sending pre-generated pages. The drawback is that it will at the very least require 2-page requests to see the updated page.

[devinekadeni]

thank you so much @alanqchen , I'll mark this thread as answered. I'm happy & clear enough from your explanation  🙏