Next.js 的服务端渲染 (SSR) 允许你在服务器上预渲染页面，而不是在客户端浏览器中。这有很多好处，包括：

  • 改进 SEO： 搜索引擎爬虫可以更容易地抓取和索引预渲染的 HTML 内容。
  • 更快的首屏加载时间： 用户可以更快地看到页面内容，因为浏览器不需要在客户端执行 JavaScript 来渲染页面。
  • 更好的用户体验： 特别是对于内容较多的页面或网络连接较慢的用户，SSR 可以提供更流畅的体验。

如何在 Next.js 中实现 SSR：

Next.js 提供了两种实现 SSR 的主要方式：

  1. getServerSideProps (页面级别): 这是最常用的 SSR 方法。getServerSideProps 是一个异步函数，它在每个请求时都会在服务器端运行。 它接收一个包含上下文信息的 context 对象，并返回一个包含 props 对象的对象。这些 props 将传递给页面的组件作为 props。

    import Head from "next/head";
    import Layout from "../../app/layout";
    import Link from "next/link";
    import { useRouter } from "next/router";
    import { InferGetServerSidePropsType } from "next";

    // 这里是服务端渲染例子，获取数据，动态根据id渲染页面，而不是生成静态html页面，每次访问都会请求接口，适合需要实时数据更新的页面
    export const getServerSideProps = async () => {
      const res = await fetch("https://api.uomg.com/api/rand.qinghua?format=json");
      const data: any = await res.json();
      console.log(data);

      return {
        props: {
          data,
        },
      };
    };

    function Post({
      data,
    }: InferGetServerSidePropsType<typeof getServerSideProps>) {
      const router = useRouter();
      const { id } = router.query;
      return (
        <Layout>
          <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>
          <div>Post: {id}</div>
          <div>{data.content}</div>
          <Link href="/">HOME</Link>
        </Layout>
      );
    }

    export default Post;