前言

说到getStaticProps、getServerProps 、getInitialProps，就不得不提及 Next.js 中用于构建静态网站和服务器渲染应用的三种不同方式SSR、SSG、ISR.

SSR、SSG、ISR

SSR（Server-Side Rendering）：指的是在服务端将 React 组件渲染成 HTML 字符串，并将其传输到浏览器端进行展示。使用 SSR 可以加快首屏渲染速度，提高 SEO。
SSG（Static Site Generation）：指的是在构建时预渲染应用，生成静态 HTML 文件，并在请求时直接返回这些文件。使用 SSG 可以加速页面加载速度，减轻服务器压力。
ISR（Incremental Static Regeneration）：是一种在构建时部分预渲染，同时在用户请求时进行动态渲染的技术。它会根据一定规则将预渲染的页面分为多个小块，并分别进行缓存。当用户请求访问时，只需要重新生成需要更新的部分，可以加快页面展示速度，减轻服务器压力。

getStaticProps => SSG（静态站点生成）/ ISR（增量静态再生）

一般在编写首页、或静态展示页面等情况下使用，只会在构建时运行一次，具有以下几种特点:

仅可在服务端获取数据。

在构建时运行，将数据预渲染到 HTML 文件中。

对于每个页面，在构建时只会运行一次，不会随着页面请求而重新运行，因此对于数据频繁变化的情况不适用。

对于数据变化不频繁的静态页面，可以提高页面渲染性能和用户体验。


import Head from 'next/head'

import Link from 'next/link'

export default function Home({ posts }) {

return (
    <div>
        <Head>
            <title>My Blog</title>

            <link rel="icon" href="/favicon.ico" />
        </Head>
        <main>
            <h1>My Blog</h1>
            <ul>
                {posts.map((post) => (

                <li key={post.id}>

                <Link href={`/posts/${post.id}`}>

                <a>{post.title}</a>

                </Link>

                </li>

                ))}
            </ul>
        </main>

    </div>
)
}
export async function getStaticProps() {

// 此事例中getStaticProps函数仅在构建时运行一次，此事例中通过fetch在服务端获取posts数据，并通过props传递给Home组件，用于HTML模版的生成。

const res = await fetch('https://jsonplaceholder.typicode.com/posts')
const posts = await res.json()

return {
    props: {
        posts,
        },
    }
}

但有的时候我们并不想完全生成一个静态站点，而又不需要getServerSideProps那样的更新频率，这时就可采用一种折中的办法，ISR： ISR（Incremental Static Regeneration）是在Next.js中使用的一种静态生成方式。与传统的静态生成不同，ISR允许我们指定特定页面或页面片段的重新生成，而不是在每个请求上重新生成整个页面。ISR是通过为每个页面或页面片段设置最大“过期时间”来实现的。当页面被访问时，Next.js会检查该页面或页面片段上的过期时间是否已到期，如果到期则会在后台重新生成页面或页面片段。因此，页面或页面片段的重新渲染是基于时间而不是用户请求的。


// 在这个例子中， 我们为getStaticProps设置了一个revalidate:60，即60秒后页面或页面片段将被重新生成。因此，如果在60秒内访问该页面，页面将直接从缓存中提取。在过期时间达到之前，任何请求都将返回缓存的页面或页面片段，而不会触发任何渲染。

// 若希望渲染间隔变短，可以将revalidate改为你所希望的值

export async function getStaticProps() {

    const data = await fetch('https://myapi.com/data');
    return {
      props: {
          data,
       },
      revalidate: 60, // 60 seconds
      // revalidate: 10
    };
}

getServerSideProps => SSR（服务端渲染）

在编写数据需要频繁更新的页面时使用, 以便于随时获取最新数据，特点如下：

在服务端获取数据。

每次页面请求都会重新运行 getServerSideProps 方法，因此可以实时获取最新数据。

适用于需要实时获取数据的情况。

不能用于在构建时预渲染页面，因此对于数据变化不频繁的静态页面不适用。


import React from 'react';

function MyPage({ serverData }) {
    return (
        <div>
            <h1>Server Data</h1>
            <p>{serverData}</p>
        </div>
    );

}

export async function getServerSideProps() {
// getServerSideProps函数会在组件渲染之前被调用，它可以获取到请求相关的参数和头信息，并返回一个对象，这个对象会作为组件的 props 传递给组件。在这个示例中，返回了一个包含 serverData 属性的对象，这个属性包含了从服务端获取的数据。在组件中，我们使用这个数据渲染了一个简单的文本标签。
const serverData = 'This data came from the server!';
    return {
        props: {
          serverData,
        },
    };
}

export default MyPage;

构建展示

查看构建结果可以帮助大家更好的理解SSR与SSG之间的区别

SSR:

SSG:

总的来说，SSR 和 SSG 是构建 Next.js 应用的两种主要方式，SSR 适用于需要动态数据的应用，SSG 适用于数据较为静态的应用，而 ISR 则是在 SSR 和 SSG 之间的一种折中方案，适用于部分数据需要动态渲染的场景。

Next学习(一)：getServerSideProps、getStaticProps与SSR、SSG、ISR

前言

SSR、SSG、ISR

getStaticProps => SSG（静态站点生成）/ ISR（增量静态再生）

getServerSideProps => SSR（服务端渲染）

构建展示