未使用SSR/SSG时Next.js预渲染机制相关技术问询

问题1：未使用SSR/SSG方法时，Next.js是否仍预渲染页面？和传统CSR的区别？ #

• 会预渲染，Next.js会自动对这类页面做静态优化（Static Optimization）：在构建阶段就将页面组件渲染成完整的静态HTML。
• 和传统CSR的核心区别：
  • 传统CSR：浏览器拿到的是几乎空的HTML（仅含根节点），必须等待JS bundle下载、解析并执行后，才能渲染出页面内容。
  • 此类Next.js页面：浏览器直接收到包含完整页面内容的HTML，用户能快速看到页面，同时后台会加载对应的JS bundle，完成页面的hydrate（激活交互功能）。

代码示例：

// pages/main/index.tsx
export default function MainPage() {
  return <div>Main Page....</div>
}

问题2：未使用SSR/SSG时，构建过程和服务器返回内容？ #

• 构建阶段：Next.js会将这类页面编译成两个产物：完整的静态HTML文件，以及对应的客户端JS bundle（用于后续交互激活）。
• 请求阶段：不管是静态托管（如Vercel、对象存储）还是使用Next.js服务器，都会直接返回预渲染好的完整HTML，而非纯CSR的空壳HTML。浏览器无需等待JS执行就能看到页面内容。

问题3：和传统CSR相比，SEO和初始加载性能有优势吗？ #

• SEO方面：有切实优势。搜索引擎爬虫能直接抓取到HTML里的完整内容，无需等待JS执行，页面更容易被正确索引；而传统CSR页面如果没有额外SEO适配，爬虫可能抓取不到有效内容。
• 初始加载性能：优势明显。首屏内容加载速度更快，核心Web指标（如LCP最大内容绘制）会显著优于传统CSR，用户能更早看到页面内容，体验更好。

问题4：无动态需求时，是否需要加空的getServerSideProps启用SSR？ #

完全没必要，原因如下：

• 静态优化的页面是构建时生成的静态文件，请求时直接返回，服务器资源占用极低，响应速度更快。
• 启用SSR后，每次请求都需要服务器重新渲染页面，会增加服务器负载，降低响应效率，反而得不偿失。
• 除非后续有动态数据获取需求，否则不需要额外添加空实现的getServerSideProps。

关于页面预渲染的观察确认 #

你查看下载的HTML发现是预渲染后的内容，这个观察是正确的。Next.js对未配置SSR/SSG的页面默认做静态优化，构建时就生成了完整的HTML，请求时直接返回该文件。

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