Algolia and Next.js - Index Updates and getStaticProps Side Effects
Asked Answered
E

0

6

I've got a fairly complex Next.js site that is mostly statically rendered and I'm adding Algolia search into the site. The mechanics of Algolia require that you use their API and notify them of additional content every time it gets published.

My question is where in the Next app you notify Algolia. Given that my site is using getStaticProps to fetch data, I figured this is the logical place to notify and update Algolia. It works but wondering what others have done, best practice, tradeoffs, etc.

The lifecycle looks like this:

  • Get data from database via GraphQL (using headless CMS Prismic)
  • Normalize data inside Next before sending to Algolia
  • Send data to Algolia (their system reconciles old/new records be referencing uuid)

Code that makes this happen:

// Use nextjs getStaticProps, destructure default params
export async function getStaticProps({ params, preview = false, previewData }) {
        
  // Data fetch (assume getAllNewsForLandingPage gets an array of obj)
  pageData.data = await getAllNewsForLandingPage(params.uid, previewData)

  // Format and normalize results
  const algoliaFormattedData = dataFormatter(pageData.data)

  // Send data back to Algolia, who will reconcile old and new data automatically
  await AlgoliaIndex.saveObjects(algoliaFormattedData)
}
Everest answered 21/4, 2021 at 19:31 Comment(5)
In your scenario, I'd be tempted to have a separate, independent script that does this on prebuild for instance. This way your Next app stays focused on front-end (so fetching data), and you have independent scripts where you have more freedom to handle other problematics. The advantage of getStaticProps is that you can enjoy Incremental Static Generation. If you need ISG you could keep the code as-is, so your updates are made only when people actually query those data. To avoid blocking the render, you could remove the await and try to queue the update somehow for instance.Sterile
You could rephrase the question as "Side-effects in getStaticProps" to be more genericSterile
@EricBurel - yeah I thought about a serverless function that gets called around build time to manage the updates. It's probably a bit cleaner that way, thanks for your insight. I still wonder if the logic needs to be more in tune with Next to really work correctly. How would the serverless function know when a build is happening?Everest
By using a prebuild script, you are guaranteed that yarn run build will first run your prebuild script, that's the best way I know. There aren't much hooks in Next to detect events. For the serverless function part, maybe this discussion is related: github.com/vercel/next.js/discussions/16068 (it says that if you want to call your own Next.js API routes, you may instead want to just reuse the code)Sterile
@EricBurel - interesting option...github.com/hashicorp/prebuild-webpack-plugin. I'm going to give this a shot in the near future, thanks for your help.Everest

© 2022 - 2024 — McMap. All rights reserved.