How to execute getServerProps on client side?

[wilsongomes-swe]

In old projects I used getInitialProps to do my API requests, and this one did both when on the server and on the client-side ... I saw that now we should use getServerProps, but by the name it seems to me that when I'm only on the client-side, when the user comes from another screen, it will not be executed on the client ... Or will it be too?

An example: The details screen where I get all the data from a movie for example.

Thank you!

[jamesmosier]

When navigating to your page that contains getServerProps via next/link, your getServerProps function will be executed.

If you look at your network requests in your browser when you navigate to this page via next/link you'll see an XHR call to /_next/data/development/<name_of_your_page>.json. This is fetching the data as if it were an API call when you navigate client side.

[wilsongomes-swe]

But my app will need to consume an external api, like api.my-domain.com/movies/4566, I remember that the getInitialProps loads data from this url in the server and in the client-side too... I will need the SSR to social media, crawlers and SEO, and when the user is navigating by client-side I need that the app loads data from my api, and when is the first request from the user I need the SSR to load the data by the server.

[jamesmosier]

Give it a test 😄 getServerProps will execute whatever you put in it.

So this works on the server and when navigating to the page client side:

export async function getServerSideProps(context) {
  const data = await myExternalApi();
  console.log('this logs in my terminal whether they get to the page directly or via next/link');

  return {
    props: { data },
  };
}