CODEWITHSUNDEEP
javascriptreactjsnext.js
Upendra Dhamala
Upendra Dhamala

Reputation: 61

Data fetching in next js

There are many ways to fetch data from apis in next.js.

getServerSideProps,getStaticPaths,getStaticProps,Incremental Static Regeneration and client side rendering.

If I have to make requests to backend on the change of any state, can I use other methods of data fetching apart from client side rendering?

I am from React.js background where client side rendering is mostly used.
What are the specific use cases of different fetching methods?
Can I always use client side rendering only in Next.js also.

Upvotes: 0

Views: 1673

Answers (1)

AMunim
AMunim

Reputation: 1151

Server-side rendering is good for SEO. You can check this, if you view the page source of a react app you won't get much HTML, this is the problem next.js fixes. With getServerSideProps and getStaticProps you can make calls to your API(such as DB back-end) to get your data and server-side render your page. Now when you have to update state of your page you can simply fetch as you normally would, since it doesn't matter because it is triggered by some action anyway.

Can I always use client side rendering only in next.js also.

Yes you can, but you want search engines to index your site and/or display relevant data such as review and preview text, right?

If I have to make requests to backend on the change of any state, Can I use other methods of data fetching apart from client side rendering

When the state is changed you will fetch new information just like you normally did in react.

GetServerSideProps and GetStaticProps only run once when the user visits the page(or reloads etc ofc). You can get the latest data by fetching and updating state with that.

Next.js is much more than react, it can be used as a back-end too i.e. creating APIs for saving data to db, handle authentication etc. Explaining it all is beyond the scope of this answer. As for when to use what you can read more about it here, or search about it I'm sure SO has many questions about this.

One situation where you can be forced to use next.js features is when you want to consume an old API that does not implement CORS, here you can't control the dev on the other side so you can create an API on next.js which you fetch on your react code like: /getinfo. Now write code on your back-end to handle this which will delegate the result of that third-party API back to you, pretty neat right

Upvotes: 1

Related Questions