Is there a way to SSG a component instead of a page?-CodePudding

I'm using Next.js.
Could you please tell me if there is a way to statically generate and display the values retrieved from the database in the components (header and footer) used on all pages?

getStaticProps can generate pages statically, but it did not seem to be available for components.
I tried to use getStaticProps in the header component used in all pages, but I got the following error.

Module not found: Can't resolve 'fs'

header.tsx

export const getStaticProps = async () => {
  const articleTags = await getArticleTags();
  return { props: { articleTags }, revalidate: 3600 };
};

type HeaderProps = InferGetStaticPropsType<typeof getStaticProps>;

const Header: VFC<HeaderProps> = ({ articleTags }) => {
  const tagList = articleTags.map(tag => {
    return (
      <li key={tag.id}>
        <Link href={`/tags/${tag.name}`}><a>{tag.name}</a></Link>
      </li>
    )
  });

  return (
    <header>
      <ul>{tagList}</ul>
    </header>
  )
};

I tried fetching and displaying the tag list above on the client side using useEffect, but I was bothered by the flickering on the screen caused by the fact that nothing is displayed for a moment every time the page is moved.
We also feel that it is wasteful to fetch data that does not change much, every time we move through the pages.

CodePudding user response：

Yes, but it under development

You can try it here : https://nextjs.org/docs/advanced-features/react-18

https://vercel.com/blog/everything-about-react-server-components