nextjs

静态生成

Next.js 的静态生成 (Static Generation, SG) 是一种构建方式，它在构建时预渲染页面 HTML，并将这些 HTML 文件直接提供给客户端。这意味着页面内容在用户请求之前就已经准备好了，从而提供更快的加载速度和更好的 SEO 性能。

工作原理：

在构建过程中，Next.js 会为每个静态生成的页面生成一个对应的 HTML 文件。当用户请求页面时，服务器直接返回预先构建好的 HTML 文件，无需在服务器端进行任何渲染。这与传统的服务器端渲染 (SSR) 不同，SSR 是在每次请求时动态生成 HTML。

使用场景：

静态生成适用于内容不经常变化的页面，例如：

  • 博客文章
  • 产品页面
  • 文档
  • 营销 landing page

优势：

  • 更快的加载速度： 因为 HTML 已经在构建时生成，所以服务器可以立即响应请求，无需等待渲染。
  • 更好的 SEO： 搜索引擎爬虫可以更容易地抓取预渲染的 HTML 内容，从而提高网站的 SEO 排名。
  • 降低服务器负载： 由于页面是在构建时生成的，服务器无需处理每个请求的渲染，从而降低了服务器负载。
  • 更好的缓存： 静态生成的 HTML 文件可以被 CDN 缓存，进一步提高加载速度。

如何使用：

在 Next.js 中，可以使用 getStaticProps 函数来实现静态生成。这个函数在构建时运行，并返回一个包含页面所需数据的对象。这些数据将被传递给页面的组件，用于渲染 HTML。

import Head from "next/head";
import Layout from "../../app/layout";

// pages/post-static/[id].js
// 使用静态生成html例子打包后会生成多个html文件，每个文件对应一个id
function Post({ post, id }: any) {
  return (
    <Layout>
      <div>
        <Head>
          <title>{`${id}标题`}</title>
          <meta name="description" content={`Post${id}页面描述`} />
          <meta name="keywords" content={`文章${id}的关键词`} />
          <meta
            name="viewport"
            content="initial-scale=1.0, width=device-width"
          />
          {/* 其他SEO相关的标签 */}
        </Head>
        <h1>{JSON.stringify(post.data)}</h1>
      </div>
    </Layout>
  );
}

// 获取静态页面数据(如果只有一个页面则不需要此函数)
export async function getStaticProps({ params }: any) {
  const res = await fetch(
    `http://xxx/api/utils-updates/1?populate=*&id=${params.id}`
  );
  const post = await res.json();

  return {
    props: {
      post,
      id: params.id,
    },
  };
}

// 这里是根据id动态生成html文件，可以根据接口返回的数据生成多个html文件
export async function getStaticPaths() {
  return {
    paths: [
      { params: { id: "1" } },
      { params: { id: "2" } },
      { params: { id: "3" } },
    ],
    fallback: false, // 或者 'blocking' 或 true
  };
}

export default Post;