Is it a good idea to mark methods as `use client` to save server compute time (cost)?
Unanswered
Bonga shad posted this in #help-forum
Bonga shadOP
I am new to nextjs, and I am using Vercel as a host platform. I noticed that they bill by server compute time (1000 hr per month for the $20 premium plan and surcharges beyond that).
I am still developping my application, and noticed that my server compute time is actually relatively high (not that high, but with no real users, just myself running dev runs, I already saw a few hours of compute time).
So that prompted me to think that maybe I can mark some the data processing calculations as
But I am still not that familiar with the pros and cons of
Thanks.
I am still developping my application, and noticed that my server compute time is actually relatively high (not that high, but with no real users, just myself running dev runs, I already saw a few hours of compute time).
So that prompted me to think that maybe I can mark some the data processing calculations as
use client. These are usually after a database data-fetch query, that I still need to process them before displaying it on the pages. I am sure by default these are executed on server, incurring server compute time. So if I mark them to use client, maybe I can save server compute time after I release the site. But I am still not that familiar with the pros and cons of
use client vs use server. Could someone offer some insights to my thoughts above?Thanks.
3 Replies
@Bonga shad I am new to nextjs, and I am using Vercel as a host platform. I noticed that they bill by server compute time (1000 hr per month for the $20 premium plan and surcharges beyond that).
I am still developping my application, and noticed that my server compute time is actually relatively high (not that high, but with no real users, just myself running dev runs, I already saw a few hours of compute time).
So that prompted me to think that maybe I can mark some the data processing calculations as `use client`. These are usually after a database data-fetch query, that I still need to process them before displaying it on the pages. I am sure by default these are executed on server, incurring server compute time. So if I mark them to `use client`, maybe I can save server compute time after I release the site.
But I am still not that familiar with the pros and cons of `use client` vs `use server`. Could someone offer some insights to my thoughts above?
Thanks.
client components are still pre-rendered on the server, so you aren't really saving any compute time, maybe you could even be increasing it by a tiny bit because of the hydration process
if the intention is to move things away from the server you could dynamically import components with SSR disabled, this will result in a component that is only rendered by the client: https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr
but keep in mind that CSR will greatly deoptimize your app in relation to SEO and some core vital metrics