Next.js应用中模块import是否多次运行？静态/动态路由有差异吗？

首先明确JavaScript模块的核心规则：同一模块仅会被求值一次——首次import时执行模块级作用域内的代码，后续再import该模块时，会直接复用已解析好的导出内容，不会重复执行模块代码。React组件外部的代码只运行一次，本质也是遵循这个规则。

针对Vercel上的Next.js，不同路由/渲染模式下的import执行逻辑如下：

1. 静态生成页面（SSG） #

这类页面在Vercel的构建阶段完成预渲染：

• 模块的import和模块级代码会在构建时执行一次，生成最终的静态HTML和客户端JS资源。
• 用户访问时，浏览器加载预构建好的资源，客户端的模块加载依然遵循ES模块规则，首次加载后复用，不会重复执行模块代码。

2. 服务器端渲染（SSR）与动态路由（如使用getServerSideProps） #

这类页面在每次用户请求时会在Vercel的服务器端运行：

• 服务器端（Node.js环境）：每次请求触发页面渲染时，同一模块首次被import会执行模块级代码，后续请求中再次import该模块时，Node.js会复用模块缓存，不会重复执行。不过Vercel的无服务器函数实例是按需创建的，实例销毁后缓存会失效，但同一实例处理的多次请求会共享缓存。
• 浏览器端：和静态页面逻辑一致，模块仅在首次加载时执行一次。

3. 增量静态再生（ISR） #

这类页面结合了静态生成和动态更新：

• 初始构建时模块代码执行一次，生成静态资源。
• 触发再生（达到缓存有效期或手动触发）时，服务器端会重新执行页面渲染逻辑，模块级代码同样遵循Node.js缓存规则，同一模块在再生过程中仅执行一次。

核心结论 #

• 无论静态还是动态路由，服务器端/构建阶段的import都遵循Node.js模块缓存机制，同一模块仅在首次加载时执行一次，后续复用缓存。
• 浏览器端的import遵循ES模块规则，首次加载模块时执行一次，后续import直接复用已加载的内容。
• 动态路由/SSR页面的服务器端代码虽会在每次请求时运行页面逻辑，但模块级代码不会因每次请求重复执行，除非承载请求的服务器实例被销毁重建。

内容的提问来源于stack exchange，提问作者Magnus