I'm using getStaticPaths and getStaticProps to retrive data from backend and than using useeffect to set these data to the state (data).

Why am i doing this? I'm doing this because of load more button, so i have to load more content when the button is clicked.

But my seo doesnt depend on the state(data).

So my question is does seo(header) is rendered on server and than other components that use data from the state?

export const getStaticPaths = async () => {
  const data = await get();
  if (data.status === 'fail' || !data.data.data) {
    return {
      paths: [],
      fallback: true,
    };
  }
  const paths = data.data.data.map((category: any) => {
    return {
      params: { categoria: category.attributes.name },
    };
  });
  return {
    paths: paths,
    fallback: true,
  };
};

export const getStaticProps = async (context: any) => {
  const id = context.params.categoria.split('-').join(' ');
  const dataCateriesExist = await getGenericAxios();
  if (
    dataCateriesExist.status === 'fail' ||
    dataCateriesExist.data.data.length === 0
  ) {
    return { notFound: true };
  }
  const data = await get();
  const dataVideo = await get(....)
  return { props: { news: data, video: dataVideo }, revalidate: 60 };
};

how i use useEffect:

 useEffect(() => {
    if (!router.isFallback) {
      setNext(props.news?.data?.links?.next?.href || '');
      setData(props.news?.data?.data || []);
      setIncluded(props.news?.data?.included || []);
      setNextVideo(props.video?.data?.links?.next?.href || '');
      setDataVideo(props.video?.data?.data || []);
      setIncludedVideo(props.video?.data?.included || []);
    }
  }, [router.isFallback, props]); 

and i have by seo component that does not use data from the state, its only text

Also without useEffect if i try to do something like

const [data, setData] = useState(props.news?.data?.data || []);

and than the path is changed with another category i see the same data as the before page