Next.js使用getServerSideProps进行服务器端渲染demo

时间:2022-12-13 Jovie 人气:0

正文

服务器端渲染试图在提供网站之前将你的网页尽可能多地转换为静态HTML。这意味着像调用API这样的事情，不是在你浏览页面时发生在客户端，而是在服务器上，在页面被提供之前发生。

在Next.js中，任何同时导出getServerSideProps函数的页面都会在对该页面提出请求时调用该函数。然后你可以在该函数中返回道具，然后将其传递给页面。

为什么使用SSR？

SSR让你提供静态的HTML，而不是在客户端使用JavaScript来创建你的页面。这样做的好处是：

你的页面会加载得更快，因为包的大小更小，而且你已经获取了你需要的任何数据。这对连接速度较慢的人来说特别有帮助。
它使谷歌等搜索引擎更容易对你的网站进行索引和抓取，因为它只是静态HTML。
你可以在你的应用程序中使用服务器端的代码，因为这些代码不会在客户端。

getServerSideProps

这里有一个例子，它使用随机事实API，在请求时检索一个随机事实。为了好玩，让我们也使用查询字符串参数来控制我们获取的事实数量。我还加入了对os模块的使用，它从我的电脑上获取了我的用户名。这只有在代码在服务器上运行时才能实现。

下面是一个使用axios的简单的取值函数。你可以忽略其中的内容，重要的是我们得到的只是一个包含我们的事实的简单JSON对象。如果你想了解更多关于axios的信息，请查看我们的这篇文章：

function fetchFact() {
    //Just a simple get request which gets back a fact in a JSON object
    return axios
        .get('https://uselessfacts.jsph.pl//random.json?language=en')
        .then((res) => {
            return res.data;
        });
}

然后，我们有了我们的页面组件。这只是显示我们的道具，用TailwindCSS做了一点花哨的造型：

export default function SSRExample({ name, facts }) {
    console.log('Hi from the client!');
    return (
        <div className="flex h-screen w-screen flex-col items-center justify-center bg-white text-3xl text-white">
            <p className="mb-10 rounded bg-neutral-800 p-10">
                Heres some fun facts from {name}
            </p>
            <ul className="flex max-w-2xl flex-col gap-5 rounded bg-neutral-800 p-10 shadow">
                {facts.map(({ id, text }) => (
                    <li key={id}>{text}</li>
                ))}
            </ul>
        </div>
    );
}

这里是我们的getServerSideProps，用来获取数据：

export async function getServerSideProps({ query }) {
    const { count } = query;
    const promises = [...new Array(Number(count))].map(() => fetchFact());
    const facts = await Promise.all(promises);
    const name = os.userInfo().username;
    //console.log(facts);
    console.log('Hi from the server!');
    console.log('Count:', count);
    console.log('Username:', name);
    console.log('Facts:', facts);
    return {
        props: {
            name,
            facts,
        },
    };
}

这就是它的模样!

如果我们检查我们的控制台，getServerSideProps只在服务器上运行，所以我们看到了服务器上的日志，而不是我们组件中的日志。在客户端，我们得到了相反的结果，代码被剥离出来，我们只看到我们组件的日志。

开发服务器控制台

Chrome开发工具控制台

希望这是对Next.js中SSR的快速介绍。Next.js还支持另一种预渲染，即使用静态网站生成，你可以在这里查看更多相关信息，更多关于Next.js getServerSideProps的资料请关注其它相关文章！

加载全部内容