NextJS应用中动态路由与本地Bundle的交互问题

(a) 动态路由页面是否仅支持服务器端渲染？还是也可在客户端进行渲染？ #

动态路由页面并非只能用服务器端渲染，Next.js 提供了多种灵活的渲染策略：

• 使用getServerSideProps时，每次请求都会在服务器端完成渲染；
• 搭配getStaticProps和getStaticPaths（可配置fallback参数），可以预渲染部分动态路由页面，未预渲染的页面能在客户端完成增量静态生成；
• 在Next.js 13+的App Router中，默认使用客户端组件，这类动态路由页面可完全在客户端渲染，无需服务器参与。

(b) 动态路由页面是否会被打包并发送至客户端，以避免与服务器的往返请求？或者每次访问动态页面都会请求服务器（忽略缓存）？ #

这完全取决于你选择的渲染策略：

• 如果是客户端组件（App Router默认）或用getStaticProps预渲染的页面，页面的组件代码会被打包进客户端bundle，访问时直接从本地bundle加载，不需要每次请求服务器（仅在需要获取动态数据时才会发起请求，但组件代码本身已在客户端）；
• 若使用getServerSideProps，页面的渲染逻辑在服务器端，每次访问都会请求服务器生成页面内容，但页面的静态资源（JS/CSS）会被自动缓存，不会重复请求；
• 此外，Next.js 会自动将静态资源缓存到CDN，即便用服务器端渲染，也能大幅减少不必要的服务器往返。

(c) 即便页面采用动态路由，是否可被打包发送至客户端，在交互过程中从本地Bundle中查找？希望了解其底层工作机制。 #

当然可以，底层工作逻辑如下：

• Next.js 在构建阶段会分析所有路由（包括/posts/[id]这类动态路由），将对应的页面组件打包成独立的代码chunk；
• 用户访问首页时，仅加载首页对应的chunk，其他路由的chunk会在用户导航到对应页面时按需懒加载；
• 不管是pages目录还是app目录的动态路由，组件代码都会被打包进客户端bundle。当用户通过next/link导航到动态路由页面时，浏览器会先下载对应的chunk，之后再访问同类型的动态路由页面（比如/posts/123和/posts/456），只要组件相同，就无需重新下载，直接从本地缓存的bundle中读取；
• 简单来说，动态路由的组件代码会被提前打包，而动态数据则根据渲染策略决定是预渲染、服务器端获取还是客户端获取。

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