Why Call External API on the Server in Next JS 13?

Question

I am needing a little bit more detail in support of this question: Explain data revalidation in Next JS 13

I am using the new next js 13 app directory features for data fetching; as the Next JS 13 documentation states, in the section titled 'Fetching Data on the Server' on this page :

Whenever possible, we recommend fetching data on the server.

The documentation talks about how the new data fetching techniques, like server actions and route handlers, allow client component to communicate with the server to fetch data, rather than fetching it directly in the client. Server actions and route handlers are used for creating dedicated APIs with direct access to a database; however, I am using Supabase, and Supabase generates an API for me to communicate with the database.

As a result, I am debating if it makes sense for me to do my Supabase API calls on a server action or route handler, or (since the Supabase API is already hosted on a supabase server) if a client side api call is fine.

Specifically regarding Next JS advise to fetch data on the server, then call the generated api (server action or route handler), I am a little confused; while server actions and router handlers CAN make api calls for me, is this even necessary? Since I am making a call to a dedicated API route that is served elsewhere RATHER than a direct database call, why not just make the call from the client (example fetch api or react query, just directly in a client component). How would this be different than calling a server action or route handler, since these are just generating apis to be called from the client anyway?

Herbart

Answer 1

I personally decide whether I want to fetch from backend or frontend with below considerations.

1. SEO perspective - If the data is static and need to be shown to search crawlers, you would need to fetch from server and preload it so that as soon as crawlers see it, they see all the intended information for SEO. (i.e. if you have a celebrity info website, you would want /info/celeb/FooBarJohn page to contain information about FooBarJohn as soon as crawler sees it.)
2. Load on the server - if the data is less important to show to crawlers, you would rather choose to fetch on frontend as that pushes all the overheads to the frontend users' computer and reduce load on your server.
3. Another SEO perspective - Stuff that are super dynamic (i.e. some stock information) could be fetched from client if you don't want the info to be collected by crawlers.
4. Aesthetics/functionality - if you always want to load the entire page upfront info without skeletons (the loading ui before fetch) you would want to use server side fetch as that would guarantee the user to see the info as soon as they load their page.
5. Caching - You can cache from frontend with SWR, but you can now also cache from backend using new next.js 13 features. (https://nextjs.org/docs/app/building-your-application/caching#overview) Now you can store frequently used supabase calls to reduce load on supabase db. (But always remember that caching can be done in any step of data flow. You can cache on frontend vs next.js vs third party vendor that caches requests)
6. Hiding URL - you can hide that you are using supabase if you use route handlers to make custom apis. Users can inspect your supabase fetch calls from F12 console network tab. Try F5 after opening networks tab on your app.

Ascham