getServerSideProps proper usage?

Question

I have recently been trying to create a web app with NextJS. I know some basics in web development but I was a little lost when using NextJS as I didn't do any React either before.

I've tried fetching data from an API and using this data in my page. I struggled a bit but in the end I got it working with the help of getServerSideProps.

My question is, how could I use getServerSideProps multiple times in my application so that I can fetch many other routes ? I've tried using getServerSideProps in a different file, using its response in a function that I then export as a component and use it so I can "get components of getServerSideProps responses" if it makes sense, but had many different errors when trying to do so.

Could someone explain how it actually works and how I could resolve my issue, and if it doesn't work that way, how could I make it work?

Here's an example using Coinbase's API :

import { useState } from 'react'
import fetch from 'isomorphic-fetch'

export const getServerSideProps = async () => {

  const res = await fetch('https://api.coinbase.com/v2/prices/ETH-USD/buy')
  const data = await res.json()

  return {
    props: {
      ethprice: data
    }
  }
};

I then use "ethprice" in my Home function such as :

export default function Home({ ethprice }) {
  return (

[page content, divs, text etc...]

  {etherprice.data.amount}

Thanks!

Answer 1

getServerSideProps is specific to that particular file, you can't just use it in any way you want.

const Example = (props) => {
  return // this is your component
}

export const getStaticProps = async () => {
  // this will provide props specifically for 'Example'
}

More than that getStaticProps will only be run once on static page generation and never again, along with fetching the props for that particular component only. So you can't get live data from it, only data required to generate the page (like page title).

You can have a look at getServerSideProps if you're looking for something more dynamic that can fetch props at runtime. After that you can pass those props down to children if you need to.