Next.js 居然不支持 静态生成 时用 动态路由

[scienhub]

最近我正在重构一个基于 Vue3 和 Vite 的 SPA 项目，同时调研一些可用的技术方案。

我们的需求是让少部分页面（如主页、About Us 、Contact 、Terms of Use 等）在构建时生成纯静态页面；而其余页面使用动态路由（例如 “/username” 或 “/username/projectname”），前端通过路由参数动态获取数据，类似传统的 SPA 模式。

由于觉得 SSR 的实现需要额外的服务器支持，显得过于繁重，因此希望能采用一种仅靠 Nginx 就可以部署的方案。本质上，我们希望将 SPA 中的一部分页面静态化，以便于 SEO 优化。

然而，经过一番搜索后发现，Next.js 最新的 App Router 在使用静态生成（output=export）时居然不支持动态路由。感觉这种需求非常常见和基础，却没有被很好地支持。

从中感受到，Next.js 似乎为了配合 Vercel 的托管业务，有意推动用户更多地使用 SSR 。

相关 GitHub 讨论： https://github.com/vercel/next.js/discussions/55393

[xiaoming1992]

不谈 nextjs ，单纯说你自己用 nginx （或者其他服务器）部署静态文件，如果要实现动态路由，应该需要自定义配置吧，就例如把/username/projectname 重定向到诸如（ username ）目录下的（ projectname ）.html 文件。

如果 nextjs 来实现这一套，必然会和 nginx 配置耦合。诚然这需求确实很常见，我也需要，但我感觉 nextjs 应该不会实现这一套。

[huijiewei]

你这个不是 Pre-rendering 么？

[cj323]

这个 SSG 的需求 react router 可以: https://reactrouter.com/start/framework/rendering ，里面也说了，prebuild page 很适合没有 SSR 时候的 SEO 需求

另外这个 page level SSG 我记得 tanstack start ，nuxt 也可以，他们底层应该都是通过 vite 达成的，Next.js 没有用 Vite 。

另外，自信一点，Vercel 就是有意推动 SSR ，人家就是卖 infra 挣钱的。你一个 Nginx 能干的事情换成 SSR+边缘计算人家能挣不少呢。

[scienhub]

@huijiewei 是部分页面 pre-rendering ，剩下的页面路由，比如 user1/project1 要查数据库

[scienhub]

@cj323 感谢。我看了下 reactrouter 的文档，看样子确实就是我要的。

nuxt 似乎是可以达到我的需求，但是感觉 react 生态略完整一些。

像我这种项目，ssr 完全没有必要。

[Plumbiu]

[generateStaticParams]( https://nextjs.org/docs/app/api-reference/functions/generate-static-params) 不就可以？

[scienhub]

@Plumbiu 这个是在 build time 指定参数的。
我需要在 build 后通过用户访问的地址去查数据库，传统的 spa 那种

[vishun]

？？查数据库还仅靠 nginx ？

[scienhub]

@vishun

我已经有 express 后端了，不想 SSR 再要个 node 后端，也不想用 vercel/cloudflare 的边缘计算。就想一个 nginx 解决问题。

我的需求就是：主页，about-us 等少数几个页面直接 build 期间静态生成；
然后 /username/projectname 这种页面，直接前端请求后端资源，渲染页面，也就是传统 spa 的模式。

不知道我有没有讲清楚。

[mailworks]

@scienhub 传统 spa 不就是 use client 吗？ Next.js 好像是可以按路由页面 SSG 、SSR 、SPA 混着来的吗？其实我也不太懂

[scienhub]

@mailworks

use client 跟 spa 没有关系的，这个比较复杂你可以搜一下看看。

我贴的 GitHub 链接，next 不支持 spa 的动态路由的，不过有开发者承诺今年 3/4 月份会完成这个功能。