Fetch data on both client and server side in NextJS

Question

I need to fetch data with a third-party API in some of my components in the NextJS project

I want the server to pre-render the component using that API for SEO. but after that while user is interacting with the app, the component props should fetch on the client-side.

I'm able to implement this behavior by using NextJS getInitialProps method. but in official NextJS documentation it's recommended to use getStaticProps or getServerSideProps .

I want to know What is the recommended way to do this.

Answer 1

If you already know how many pages your website will contain then go with Static Site Generation i.e use getStaticProps. This will pre-generate all the pages in advance during build time.

Example A portfolio website where the content is mostly static.

NOTE:- With getStaticProps any changes made to your website won't be reflected you need to re-deploy in order to see the changes.

So if your portfolio also consists of a blog then getStaticProps won't be an ideal solution, instead you can use Incremental Static Regeneration by adding a revalidate key in the getStaticProps function which implies that re-generate the page on every request at most every X-seconds.

Now if you need to pre-render for every request OR you need access to request object for example to set cookies then Server Side Rendering is an option use getServerSideProps function. getServerSideProps runs only on the server and not during the build process

For client side data fetching you can use the useEffect hook or the swr hook provided by NEXT JS.

So in your case, If you are using client side data fetching then probably it doesn't make any sense to use getServerSideProps in conjunction, unless you need that request response object.

So you can combine Client Side Data Fetching with getStaticProps (most probably with that revalidate key).

Answer 2

Next.js docs says:

If you're using Next.js 9.3 or newer, we recommend that you use getStaticProps or getServerSideProps instead of getInitialProps.

These new data fetching methods allow you to have a granular choice between static generation and server-side rendering. Learn more on the documentation for Pages and Data Fetching.

You should use getStaticProps if:

• The data required to render the page is available at build time ahead of a user’s request.
• The data comes from a headless CMS.
• The data can be publicly cached (not user-specific).
• The page must be pre-rendered (for SEO) and be very fast — getStaticProps generates HTML and JSON files, both of which can be cached by a CDN for performance.

When should I use getServerSideProps? You should use getServerSideProps only if you need to pre-render a page whose data must be fetched at request time. Time to first byte (TTFB) will be slower than getStaticProps because the server must compute the result on every request, and the result cannot be cached by a CDN without extra configuration.

If you don’t need to pre-render the data, then you should consider fetching data on the client side. Click here to learn more.

Answer 3

Bundle size is smaller when we use getServerSideProps instead of getInitialProps as the getServerSideProps execute the code on the server not on the browser.

Read more about the difference between these two here.