Help with NextJS Page Router Static Site Generation

I have a NextJS site with a headless CMS Wordpress blog. I am using Page Router with Next 14.0.3

I was not able to use Server-side rendering because I was already using getStaticProps for getAllPosts for the Wordpress blog.
So, I am using Static Site Generation

Therefore I have the following in my index.js page:

import {
  getServerState,
  InstantSearch,
  InstantSearchSSRProvider,
} from 'react-instantsearch';
import algoliasearch from 'algoliasearch/lite';
import { renderToString } from 'react-dom/server';

import { getAllPosts } from '../lib/api';

export default function Home({ allPosts, serverState }) {
  return (
//My code
)
};

export async function getStaticProps() {
  const allPosts = await getAllPosts();
  const serverState = await getServerState(<Home />, {
    renderToString,
  });
  return {
    props: {
      allPosts,
      serverState,
    },
  };
}

However, I am getting this error in my Blog component.
TypeError: Cannot read properties of undefined (reading 'edges')

If I delete the Algolia instantsearch code from export async function getStaticProps() then the error goes away (but then search is not being implemented anymore):

export async function getStaticProps() {
  const allPosts = await getAllPosts();
  
  return {
    props: {
      allPosts,
    },
  };
}

Is there a way to have to services (Algolia and Wordpress) use the same getStaticProps()? I tried adding another getStaticProps but it returned the error that getStaticProps is already defined. I am not sure how to use getStaticProps for both Algolia and Wordpress without breaking one or the other…

Right now I am importing getAllPosts from .../lib/api Is it possible to add serverState to the api file? For reference here is what I have in the api file at this moment

Hi @isaac2

@tw2113 is our local WordPress expert. He typically recommends the Algolia plugin from WebDevStudios (he’s a consultant there):

It may take some of the headache out of this integration.

Michael use to hang out here, but I think he’s now mostly over on our Discord server (Algolia) if you want to jump over there for more help.

1 Like

My biggest question would be if the issue is around getting things indexed, or if the issue is about getting the content out of the index for display in this Headless instance. Based on what I’m reading, it’s more the latter, and I’m curious what a response coming from Algolia looks like for the AJAX request and returned object.

Also may or may not be a case of making use of the “WP Search with Algolia” plugin or a self-created process.