In a Headless Sitecore site I'm doing the front-end on, I'm trying to implement search. It's a JSS/Next.js based front end on top of the Sitecore back end. We've got:

• JSS 20, Next 12.2, Sitecore 10.2
• A GraphQL API to get results to display.
• A SearchResults component which is responsible for rendering results.

I'm trying to implement the component level data fetching approach outlined in the sitecore docs, but I guess I'm missing something. The getServerSideProps function exported from the component simply isn't called. Here's the relevant structure of my SearchResults component:

import {
  constants,
  GetServerSideComponentProps,
  useComponentProps
} from '@sitecore-jss/sitecore-jss-nextjs';
import { GraphQLClient } from '@lib/graphql-client';
import config from '@temp/config';

const SearchResults = ({ fields, rendering }) => {
  const externalData = useComponentProps(rendering?.uid); 

  console.log("Search Result external data")
  console.dir(externalData); <-- this is always `undefined`

  return (
    <section>
      [...redacted for clarity]
    </section>
  );
}

export const getServerSideProps = (rendering, layoutData) => {

  console.log("SERVER SIDE PROPS!") // <-- This never gets called

  if (process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED) {
    return null;
  }

  const client = GraphQLClient(
    `${config.sitecoreApiHost}/api/Search?sc_apikey=${config.sitecoreApiKey}`
  );


  return client;
}

export { SearchResults };

The doc linked above makes mention of the ComponentPropsService finding the component to call the getServerSideProps function:

The ComponentPropsService traverses the layout service data and looks at all the renderings. To find the components that require data fetching, the service spies on the component using the rendering.componentName against the list of component registrations in the src/temp/componentFactory file.

The SearchResults component is definitely defined in the src/temp/componentFactory file, but I must be missing something. That function, getServerSideProps, simply never gets called. If I'm supposed to somehow register the component with the ComponentPropsService so it knows about it and can call that function, it's not clear to me how to do that. Am I even on the right track?

In a Headless Sitecore site I'm doing the front-end on, I'm trying to implement search. It's a JSS/Next.js based front end on top of the Sitecore back end. We've got:

• JSS 20, Next 12.2, Sitecore 10.2
• Optimized for SSG/ISR
• A GraphQL API to get results to display.
• A SearchResults component which is responsible for rendering results.

I'm trying to implement the component level data fetching approach outlined in the sitecore docs, but I guess I'm missing something. The getServerSideProps function exported from the component simply isn't called. Here's the relevant structure of my SearchResults component:

import {
  constants,
  GetServerSideComponentProps,
  useComponentProps
} from '@sitecore-jss/sitecore-jss-nextjs';
import { GraphQLClient } from '@lib/graphql-client';
import config from '@temp/config';

const SearchResults = ({ fields, rendering }) => {
  const externalData = useComponentProps(rendering?.uid); 

  console.log("Search Result external data")
  console.dir(externalData); <-- this is always `undefined`

  return (
    <section>
      [...redacted for clarity]
    </section>
  );
}

export const getServerSideProps = (rendering, layoutData) => {

  console.log("SERVER SIDE PROPS!") // <-- This never gets called

  if (process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED) {
    return null;
  }

  const client = GraphQLClient(
    `${config.sitecoreApiHost}/api/Search?sc_apikey=${config.sitecoreApiKey}`
  );


  return client;
}

export { SearchResults };

The doc linked above makes mention of the ComponentPropsService finding the component to call the getServerSideProps function:

The ComponentPropsService traverses the layout service data and looks at all the renderings. To find the components that require data fetching, the service spies on the component using the rendering.componentName against the list of component registrations in the src/temp/componentFactory file.

The SearchResults component is definitely defined in the src/temp/componentFactory file, but I must be missing something. That function, getServerSideProps, simply never gets called. If I'm supposed to somehow register the component with the ComponentPropsService so it knows about it and can call that function, it's not clear to me how to do that. Am I even on the right track?

In a Headless Sitecore site I'm doing the front-end on, I'm trying to implement search. It's a JSS/Next.js based front end on top of the Sitecore back end. We've got:

• A GraphQL API to get results to display.
• A SearchResults component which is responsible for rendering results.

I'm trying to implement the component level data fetching approach outlined in the sitecore docs, but I guess I'm missing something. The getServerSideProps function exported from the component simply isn't called. Here's the relevant structure of my SearchResults component:

import {
  constants,
  GetServerSideComponentProps,
  useComponentProps
} from '@sitecore-jss/sitecore-jss-nextjs';
import { GraphQLClient } from '@lib/graphql-client';
import config from '@temp/config';

const SearchResults = ({ fields, rendering }) => {
  const externalData = useComponentProps(rendering?.uid); 

  console.log("Search Result external data")
  console.dir(externalData); <-- this is always `undefined`

  return (
    <section>
      [...redacted for clarity]
    </section>
  );
}

export const getServerSideProps = (rendering, layoutData) => {

  console.log("SERVER SIDE PROPS!") // <-- This never gets called

  if (process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED) {
    return null;
  }

  const client = GraphQLClient(
    `${config.sitecoreApiHost}/api/Search?sc_apikey=${config.sitecoreApiKey}`
  );


  return client;
}

export { SearchResults };

The doc linked above makes mention of the ComponentPropsService finding the component to call the getServerSideProps function:

The ComponentPropsService traverses the layout service data and looks at all the renderings. To find the components that require data fetching, the service spies on the component using the rendering.componentName against the list of component registrations in the src/temp/componentFactory file.

The SearchResults component is definitely defined in the src/temp/componentFactory file, but I must be missing something. That function, getServerSideProps, simply never gets called. If I'm supposed to somehow register the component with the ComponentPropsService so it knows about it and can call that function, it's not clear to me how to do that. Am I even on the right track?

In a Headless Sitecore site I'm doing the front-end on, I'm trying to implement search. It's a JSS/Next.js based front end on top of the Sitecore back end. We've got:

• JSS 20, Next 12.2, Sitecore 10.2
• A GraphQL API to get results to display.
• A SearchResults component which is responsible for rendering results.

I'm trying to implement the component level data fetching approach outlined in the sitecore docs, but I guess I'm missing something. The getServerSideProps function exported from the component simply isn't called. Here's the relevant structure of my SearchResults component:

import {
  constants,
  GetServerSideComponentProps,
  useComponentProps
} from '@sitecore-jss/sitecore-jss-nextjs';
import { GraphQLClient } from '@lib/graphql-client';
import config from '@temp/config';

const SearchResults = ({ fields, rendering }) => {
  const externalData = useComponentProps(rendering?.uid); 

  console.log("Search Result external data")
  console.dir(externalData); <-- this is always `undefined`

  return (
    <section>
      [...redacted for clarity]
    </section>
  );
}

export const getServerSideProps = (rendering, layoutData) => {

  console.log("SERVER SIDE PROPS!") // <-- This never gets called

  if (process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED) {
    return null;
  }

  const client = GraphQLClient(
    `${config.sitecoreApiHost}/api/Search?sc_apikey=${config.sitecoreApiKey}`
  );


  return client;
}

export { SearchResults };

The doc linked above makes mention of the ComponentPropsService finding the component to call the getServerSideProps function:

The ComponentPropsService traverses the layout service data and looks at all the renderings. To find the components that require data fetching, the service spies on the component using the rendering.componentName against the list of component registrations in the src/temp/componentFactory file.

The SearchResults component is definitely defined in the src/temp/componentFactory file, but I must be missing something. That function, getServerSideProps, simply never gets called. If I'm supposed to somehow register the component with the ComponentPropsService so it knows about it and can call that function, it's not clear to me how to do that. Am I even on the right track?