Warning Prop `href` did not match

Question

I have a dynamic page route after another dynamic page route. I'm only getting this warning for the second dynamic page route.

Warning: Prop `href` did not match. Server: "/books/category/[category]/filter/[filter]#" Client: "/books/category/literatura-oastei/filter/ceva#"

How to solve this warning?

Answer 1

I had to use the fallback property set to blocking inside the getStaticPaths function.

Example:

export const getStaticPaths: GetStaticPaths = async () => {
  return {
    paths: [],
    fallback: 'blocking'
  };
};

Read more about the fallback property here.