getServerSideProps vs fetching directly in React

Question

I am getting a bit confused with the getServerSideProps of NextJS.

In the docs you can find this explanation.

For example, suppose that your page needs to pre-render frequently updated data (fetched from an external API). You can write getServerSideProps which fetches this data and passes it to Page

My confusing is why would you use getServerSideProps if you could simply fetch the data every x sec in your React component itself (after getting the initials data via getStaticProps).

Is there an advantage of using getServerSideProps over just the React way ?

so like this for example :

 useEffect(() => {
    const interval=setInterval(()=>{
      const fetchdata = async () => {
        const res = await fetch("url")
        const data = await res.json()
        setsongs(data)
      }
      fetchdata()
     },15000)
     return()=>clearInterval(interval)
  }, [])

Answer 1

Due to the documentation, getServerSideProps fetches the API data on every request. So, there is a difference between requesting with a time interval ( like you mentioned in the react version), or using getServerSideProps. Also, remember that getServerSideProps is implemented on the server-side and might be useful in cases that SEO is important. However, if the server goes down in the cases that you use getServerSideProps the whole page would not be served anymore. https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering

Meanwhile, Fetching data on the client side (or the React way) is useful when SEO is not relevant, the page doesn’t need to be pre-rendered. https://nextjs.org/docs/basic-features/data-fetching#fetching-data-on-the-client-side

In my opinion, it would be better if you use getServerSideProps when the displayed data is changing frequently and the user should see the most updated one, SEO is vital and a longer Time to first byte (TTFB) is acceptable.