Next.js 服务器端渲染实战：getServerSideProps 详解与示例

作者：远帆时间：2026-10-26 07:40:22浏览：262

本文深入解析 Next.js 中的 getServerSideProps 函数，阐述其如何通过服务器端预渲染生成静态 HTML，从而提升页面加载速度、优化搜索引擎抓取并允许使用服务端代码。通过包含随机事实 API 调用、查询参数处理及操作系统信息获取的完整代码示例，展示 SSR 的实际应用与客户端/服务端日志差异。

正文

服务器端渲染（SSR）的核心目标是在向用户交付网页前，尽可能多地将其转换为静态 HTML 结构。这意味着诸如调用外部 API 获取数据等操作，不再发生在用户浏览页面的客户端阶段，而是提前在服务器端完成，确保页面在被请求时已包含完整内容。

在 Next.js 框架中，若页面组件导出了 getServerSideProps 函数，则该函数会在每次对该页面发起请求时被自动调用。开发者可以在该函数中执行数据获取逻辑，并将结果作为 props 返回，最终传递给页面组件进行渲染。

为什么选择 SSR？

SSR 允许服务器直接提供静态 HTML 内容，而非依赖客户端 JavaScript 动态构建页面。这种机制带来以下显著优势：

页面加载速度显著提升，因为传输的数据包更小，且所需数据已在服务器端预获取。这对于网络环境较差或连接速度较慢的用户尤为友好。
搜索引擎如 Google 能更轻松地索引和抓取网站内容，因为服务器直接返回的是静态 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;
        });
}

接下来是页面组件部分。该组件主要负责展示从 getServerSideProps 接收到的 props，并使用了 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,
        },
    };
}

最终渲染效果如下所示：