如何解析和改写next.js的getServerSideProps源码以适应长尾词需求？

本文共计607个文字，预计阅读时间需要3分钟。

目录 + SSR 处理 + 动态加载处理 + 总结 + SSR 处理 + 老规矩，今天写了关于 getServerSideProps 的内容，明天将继续深入探讨 getServerSideProps 相关的源码，看看 next.js 中是如何实现 getServerSideProps 的，还有哪些其他细节。

目录

• SSR 处理
• 动态加载处理
• 总结

SSR 处理

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

我们先从 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.code === 'ENOENT') { delete serverSidePropsError.code; } throw serverSidePropsError; } if (data == null) { throw new Error(GSSP_NO_RETURNED_VALUE); } if ((data as any).props instanceof Promise) { deferredContent = true; } const invalidKeys = Object.keys(data).filter(key => key !== 'props' && key !== 'redirect' && key !== 'notFound'); if (invalidKeys.length) { throw new Error(invalidKeysMsg('getServerSideProps', invalidKeys)); }

注意这里的 getServerSideProps 是从外层传进来了，因为涉及的代码较多，就不贴了，主要是通过 packages/next/server/load-components 中的 loadComponents，将路由文件中的 getServerSideProps 通过从 require 后的页面中取出。不过挺好奇他在 node 端是怎么 require 页面代码而不报错的，毕竟页面代码中很可能会存在依赖浏览器环境的代码，估计是做了一些类似于 runtime shim 之类的操作？此处先挖个坑，以后有空研究下。突然想起页面都是 SSR 了，初始化代码肯定都做过处理了