1

I have a blog that is using getStaticProps + getStaticPaths to generate pages from headless WP - all good. Then I have a component that is connecting to the database to allow me to link to the next post in any within any individual category. This component is then used inside the ...postSlug page.

So basically the component works perfectly if I switch to using getServerSideProps for posts, as it updates the 'previous' + 'next' URLs as each post is requested and built on the server. However, if I use getStaticProps the component doesn't update with the correct URLs unless I manually refresh the page. So I need to use some client-side data fetching within the component, with useState, useEffect or SWR or something - but I'm not sure about the best way to do it (or even if that would work or if I should just use gServerSideProps).

Any help would be greatly appreciated. Thanks! Component below edited for clarity ...

export default function MovePost() {
  const { usePost } = client
  const post = usePost()
  const { query = {} } = useRouter()
  const { categorySlug } = query
  const currentPaginationCursor = btoa( `arrayconnection:${post.databaseId}` )
  const { posts } = client.useQuery()

  const previous = posts({
    first: 1,
    before: currentPaginationCursor,
    where: { categoryName: `${categorySlug}` },
  }).nodes[0]?.slug

  return (
    <>
      { previous && 
        <Link href={`/archive/${categorySlug}/${previous}`}>
          <a ...

export default function Page() {
  const { usePost } = client
  const post = usePost()

  return (
    <>
      <Layout> 
          <div dangerouslySetInnerHTML={{ __html: post?.content() ?? '' }} />
        
        <MovePost />
      </Layout>
    </>
  )
}

export async function getStaticProps(context: GetStaticPropsContext) {
  return getNextStaticProps(context, {
    Page,
    client,
    notFound: await is404(context, { client }),
  })
}

export function getStaticPaths() {
  return {
    paths: [],
    fallback: 'blocking',
  }
}
jk2908
  • 56
  • 4
  • Can you show the working component you have with `getServerSideProps`? – juliomalves Jan 31 '22 at 22:03
  • I'm just importing that component into a [postSlug] page, which is itself then exported using getStaticPaths + getStaticProps + ISR. So if I change the [postSlug] page to use getServerSideProps, then the component functions correctly. But using the above configuration it doesn't work as expected, as the URL within the MovePost component doesn't re-fetch the data for every new page. Does that help? Apologies if that's unclear – jk2908 Jan 31 '22 at 22:13
  • I'll get a working example up – jk2908 Jan 31 '22 at 22:18
  • Ok here's the example: https://movepost.vercel.app/archive/all If you click on a post (image) you will see the component below the content. It's the previous/next links. That's generating the each post using getServerSideProps. So when on the 'All' category, you can cycle through all posts. 'Graphics' category cycle through graphics and so on. It does work as expected in dev. Cheers :) (it works fine, I just think it would be quicker using static paths for the post page and client side data fetching for the component?) – jk2908 Jan 31 '22 at 22:48
  • _"But using the above configuration it doesn't work as expected"_ - could you please post the code with the configuration that isn't working? – juliomalves Feb 01 '22 at 00:49
  • Updated in original post. So that is the implementation with getStaticPaths/Props. The component doesn't update with correct 'previous/next post url' on each page change, unless the page is manually refreshed. – jk2908 Feb 01 '22 at 09:29
  • That's the expected behaviour with `getStaticProps` and ISR. Revalidation will only occur when a new page request is made to the server. Client-side page navigation are cached and do not trigger revalidation. Use client-side revalidation if you want fresh data on the client instead. – juliomalves Feb 08 '22 at 00:36
  • 1
    Yeah I know, so my original question was: what is the best way for only that component (MovePost) to revalidate client-side on each page change, whilst keeping ISR/SSG at a page level. Apologies if that was unclear! – jk2908 Feb 08 '22 at 15:19
  • Ah, right - sorry I misunderstood. Using SWR for client-side revalidation is a good option. – juliomalves Feb 08 '22 at 15:31

0 Answers0