next.js 源码解析 - getServerSideProps 篇-CSDN博客

本文链接：https://blog.csdn.net/pfourfire/article/details/127490929

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

摘要由CSDN通过智能技术生成

老规矩，昨天写了关于 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),...(previewData !== false ? { preview: true, previewData: previewData } : undefined),locales: renderOpts.locales,locale: renderOpts.locale,defaultLocale: renderOpts.defaultLocale});canAccessRes = false;
} catch (serverSidePropsError: any) {if (isError(serverSidePropsError) && serverSidePropsError