Next.js 中的预渲染，使用静态生成来获取数据
2023年03月29日 - 约 487 字

在 Next.js 中预渲染

Next.js 有两种预渲染形式：Static Generation和Server-side Rendering。区别在于它何时为页面生成 HTML。

静态生成是在构建时生成 HTML 的预渲染方法。然后在每个请求上重新使用预呈现的 HTML 。
服务器端呈现是在每个请求上生成 HTML 的预呈现方法。

重要的是，Next.js 允许您选择用于每个页面的预呈现表单。您可以通过对大多数页面使用静态生成并为其他页面使用服务器端呈现来创建“混合”Next.js 应用程序。

使用静态生成 ( getStaticProps())

现在，我们需要添加一个 import for 并在ingetSortedPostsData 中调用它。getStaticPropspages/index.js

在您的编辑器中打开 pages/index.js 并在导出的组件上方添加以下代码Home：

import { getSortedPostsData } from '../lib/posts';

export async function getStaticProps() {
  const allPostsData = getSortedPostsData();
  return {
    props: {
      allPostsData,
    },
  };
}

通过返回 in 中的对象 allPostsData 内部，博客文章将作为 prop 传递给组件。现在您可以像这样访问博客文章：propsgetStaticPropsHome

export default function Home ({ allPostsData }) { ... }

显示博客文章

要显示博客文章，让我们更新组件以在带有您的自我介绍的部分下方Home添加另一个带有数据的标签。不要忘记也将道具从更改 () 为 ({ allPostsData }) ：

export default function Home({ allPostsData }) {
  return (
    <Layout home>
      {/* Keep the existing code here */}

      {/* Add this <section> tag below the existing <section> tag */}
      <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
        <h2 className={utilStyles.headingLg}>Blog</h2>
        <ul className={utilStyles.list}>
          {allPostsData.map(({ id, date, title }) => (
            <li className={utilStyles.listItem} key={id}>
              {title}
              <br />
              {id}
              <br />
              {date}
            </li>
          ))}
        </ul>
      </section>
    </Layout>
  );
}

如果您访问http://localhost:3000 ，您现在应该可以看到博客数据。

恭喜！我们已经成功地获取了外部数据（从文件系统）并使用这些数据预渲染了索引页面。

Next.js 中的预渲染，使用静态生成来获取数据2023年03月29日 - 约 487 字

在 Next.js 中预渲染

使用静态生成 ( getStaticProps())

显示博客文章

Next.js 中的预渲染，使用静态生成来获取数据
2023年03月29日 - 约 487 字