next.js 源码解析 - getServerSideProps 篇

最新推荐文章于 2025-08-09 10:43:50 发布

原创

最新推荐文章于 2025-08-09 10:43:50 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节 #前端 #面试 #javascript #es6

本文详细探讨了 Next.js 框架中 getServerSideProps 的工作原理，包括 SSR 处理和动态加载场景。在 SSR 时，Next.js 会调用 getServerSideProps 进行渲染，并处理可能存在的浏览器环境依赖问题。同时，文章还分析了动态加载页面时如何获取和处理数据。最后，作者提供了相关源码的总结，并分享了前端学习资源。

老规矩，昨天写了关于 getServerSideProps 的内容，今天趁热写一下 getServerSideProps 相应的源码，看看 next.js getServerSideProps 是怎么实现的，还有什么从文档无法知晓的细节。

SSR 处理

我们先从 SSR 时相关的 getServerSideProps 处理看起，源码排查步骤上一步已经有所介绍，本篇不再多说，在 SSR 时，next.js 会调用 doRender 来进行渲染，其中会再次调用 renderHTML，进过各种判断和调用最终会进入 packages/next/server/render.tsx 中的 renderToHTML 进行处理。

// const SERVER_PROPS_ID = "__N_SSP";
if (getServerSideProps) {props[SERVER_PROPS_ID] = true;
}

next.js 会先将 props 中的 SERVER_PROPS_ID 设置为 true，用做标识。

try {data = await getServerSideProps({req: req as IncomingMessage & {cookies: NextApiRequestCookies;},res: resOrProxy,query,resolvedUrl: renderOpts.resolvedUrl as string,...(pageIsDynamic ? { params: params as ParsedUrlQuery } : undefined),...(preview