Consuming a API with SSR, can someone help me?

[wilsongomes-swe]

Hi guys,
I need that when my app, when running in client side, the request go to my service api instead of target my next app itself... My client side request is targeting the "http://localhost:3000/_next/data/development/home.json", not the "api-url/sections".

my code bellow:

const fetchPageData: () => Promise<Array<ISection>> = async () => {
  const response = await apiService.get('/sections');
  return response.data;
};

export default function Home({ initialData }: IHomeProps) {
  const { data, error } = useSWR('/sections', fetchPageData, { initialData });

  return (
    <>
      <div>
        {data.map((item) => (
          <SectionList key={item.id} section={item} />
        ))}
      </div>
    </>
  );
}

export const getServerSideProps: GetServerSideProps = async () => {
  const initialData = await fetchPageData();
  return {
    props: {
      initialData,
    },
  };
};

Thanks so much!!

[wilsongomes-swe]

What I need is: when on server-side target my api-url/sections and procede with the SSR, but when on clien site, target the api-url/sections directly.

[Timer]

The getServerSideProps call needs to directly call the API method, not invoke it over HTTP.

[wilsongomes-swe]

My apiService runs one axios behind with my api server (other server) urls.

[wilsongomes-swe]

But I need that when I go to this page by client-side, teh client dont make a request to "http://localhost:3000/_next/data/development/home.json", I need that the client make a request to my other server api "my-api.com/sections". And what is happening is: My client calls "http://localhost:3000/_next/data/development/home.json" and on the server my app call my api... I think this is wrong, but I dont know what I do wrong here.

Thanks

[Timer]

If it's a different server, you need to explicitly configure the production URL for it. Node.js cannot figure out the host name automatically like the browser.

[wilsongomes-swe]

Yes man! I did it...

This is my apiService helper:

import config from '../config';

const apiService = axios.create({
  baseURL: "http://my-server-api-url/api",
});

export default apiService;

I'm configuring it to know my api server, the other server, it "knows" the right api server url... on the backend it hits my server and get my data ok, but on the clien-side, the next by itself hit the url "http://localhost:3000/_next/data/development/home.json" (and on backend hit my right server URL and get my data), but instead of it, i need that when my user is navigating on the app by client site, the app hit my server url, wich is already configured on my apiService/axios, my doubt is about: Why my app is hiting my app itsel in route ".../_next/data/development/home.json".

I just need that the behavior on client side be: hit my api server (already configured) and not hit the next server on the mentioned route...

This occurs when I use getInitialProps, but now I saw that the right way is to use getServerSideProps, but I dont know if the behavior that I need is possible with nextjs...

[wilsongomes-swe]

Everything else is ok, the behavior that I need is: If on backend hit my-other-server-api.com/sections by backend then serve server side rendered page, and if it on client-side, just hit the same other server api url but on the client-side and directly, without hit the next backend... Is it possible?