有没有办法 SSG 组件而不是页面？答案

【问题标题】：Is there a way to SSG a component instead of a page?有没有办法 SSG 组件而不是页面？
【发布时间】：2022-01-25 18:41:58
【问题描述】：

我正在使用 Next.js。
您能否告诉我是否有一种方法可以在所有页面上使用的组件（页眉和页脚）中静态生成和显示从数据库中检索到的值？

getStaticProps可以静态生成页面，但是组件好像不行。
我尝试在所有页面使用的标题组件中使用getStaticProps，但出现以下错误。

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>
  )
};

我尝试使用useEffect在客户端获取并显示上面的标签列表，但是由于每次移动页面时都没有显示任何内容而导致屏幕闪烁而困扰我。
我们还认为每次浏览页面时都获取变化不大的数据是一种浪费。

【问题讨论】：

标签： typescript next.js

【解决方案1】：

是的，但正在开发中

你可以在这里试试：https://nextjs.org/docs/advanced-features/react-18

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

【讨论】：

谢谢！现在我就等着 Next.js 进化吧！
是的，这个框架有很大的潜力