How to call getServerSideProps hook?

[rajanlagah]

I am new to hydrogen and my task is

1. User login
2. User redirected to profile page ( routes/account/index.server.jsx)
3. And before rendering this page I want to make API call to 3rd party server
   So in order to achieve that

import {Suspense} from 'react';
import { ... } from '@shopify/hydrogen';

import {PRODUCT_CARD_FRAGMENT} from '~/lib/fragments';
import {getApiErrorMessage} from '~/lib/utils';
import { ... from '~/components';
import {Layout, ProductSwimlane} from '~/components/index.server';

export default function Account({response}) {
... // shopify hydrogen boilerplate code
} 

export async function getServerSideProps() {
  // Fetch data from external API
  console.log('________________________________________');
  // Pass data to the page via props
  return {props: {data: 'data'}};
}

But this getServerSideProps is never called ( I don't see the log )
How can I do that?

[davidhousedev]

Hi there,

useServerProps is built for a different use case. It looks like you have some experience with NextJS; Hydrogen behaves differently than Next in a few ways :)

First, useServerProps is meant to be called on the client, not on the server. A good use-case for useServerProps is to change the variant of a product or pagínate to a later page.

Second, because Hydrogen v1 is built using React Server Components, you can fetch the data from your external API from within a server component. You can also fetch data from a client component, but in most cases it's better to fetch from the server if you have the option. Take a look into docs for useQuery and fetchSync for tools you can use to fetch data from an external API. Also note, if you want to fetch data from the Shopify Storefront API, you can use useShopQuery.

I hope this helps!

[lagahrajan]

useQuery helped. 👍