企业级 | Next.js SSR配置

▌ 技术引导
企业级Next.js SSR配置不是简单的开启`ssr: true`就完事了，它需要考虑请求分发、缓存策略、动态内容加载、路由预取、服务端渲染与客户端渲染的平衡点。很多团队在初期配置时容易把`getServerSideProps`和`getStaticProps`混用，导致性能暴跌，甚至出现服务器负载异常。我见过在生产环境里，如果每个页面都用`getServerSideProps`，在高并发时会把服务器CPU拉到90%+，进而触发自动扩容，但扩容后又因为负载波动频繁，最终导致成本翻倍。真正的企业级SSR需要结合`next.config.js`中`revalidate`参数、`next.js`的`swc`编译优化、`redis`缓存中间件、以及Node.js的`pm2`进程管理。关键点在于预加载、缓存粒度、请求拦截和响应压缩。如果想做到真正的稳定和高效，得从一开始就用`next.js`的`Image`组件和`API Routes`来构建请求链路，而不是用第三方库强行模拟。

配置`next.config.js`时，必须指定`distDir`，这是部署时必须关注的点，否则会把静态资源生成到错误的路径。我见过不少团队部署到云服务后，因为没改`distDir`导致404页面混乱，甚至出现`/pages`路径被覆盖的问题。另外，`next.js`的`redirects`配置要结合`rewrites`使用，才能实现服务端重定向，避免客户端路由混乱。还有，`next.js`的`swc`配置要放进去，特别是`optimizeImports`参数，它能大幅减少构建时间。企业级项目必须启用`next.js`的`trailingSlash`配置，把路径统一为`/page`结尾，这样在路由匹配和缓存管理上更有利。

动态内容加载时，不要盲目使用`getServerSideProps`，它每个请求都触发一次，对服务器压力巨大。如果内容可以缓存，用`getStaticProps`更合适，但需要配合`revalidate`参数，这样能保证缓存时效性。在部署到VPS或者云服务器时，建议用`pm2`来管理Node.js进程，它支持集群模式、负载均衡、自动重启，特别适合长时间运行的SSR服务。另外，`next.js`的`next export`功能可以用来生成静态页面，减轻服务器压力。我见过一些团队在使用`next.js` SSR时，忘记配置`cache-control`头，导致CDN缓存失效，反而加重服务器负担。

企业级SSR配置还需要考虑请求的幂等性，例如在用户登录后，某些页面需要传递session信息到服务端，这时候用`cookies`和`headers`进行传递是必须的。而且，`next.js`的`headers`配置必须用`next.config.js`中的`headers`函数来定义，否则不会生效。有些团队直接在`pages`里写`res.setHeader`，结果部署后发现请求头根本没被设置，导致跨域问题。另外，`next.js`的`next.config.js`中的一些配置项要配合`vercel`或`netlify`的部署环境使用，比如`basePath`、`assetPrefix`，这些在配置时要特别注意，否则会出现静态资源路径错误。

技术背景部分需要明确`SSR`和`SSG`的区别，以及如何在两者之间切换。对于企业级应用，很多页面是动态生成的，不能用SSG，这时候就必须用SSR。但配置SSR时，必须确保服务器能承受高频请求，否则直接挂掉。我见过一个团队用`Next.js` SSR部署到`AWS Lambda`，结果因为并发处理能力不足，导致用户请求排队，最终性能下降严重。因此，企业级配置必须考虑`Node.js`版本兼容性、`pm2`的进程管理、以及`redis`或`memcached`的使用，来优化缓存和负载。核心问题在于如何平衡开发效率和生产性能，同时保证高可用和可扩展性。

▌ 技术参考

一 在企业级Next.js SSR配置中，核心在于服务端渲染的稳定性和可扩展性。很多团队在部署时忽略了`next.config.js`中`distDir`的设置，导致静态资源生成路径异常，进而引起404错误。生产环境建议将`distDir`设置为`/.next`，并确保部署服务能正确读取该目录。例如，在`next.config.js`中加入`distDir: '/.next'`可以避免路径混淆。

二 配置`next.config.js`中的`headers`函数是确保企业级SSR安全和性能的重要一步。这个函数允许你定义全局请求头，如`Cache-Control`，从而优化CDN缓存策略。例如，`headers: () => [{ source: '/:path', headers: [{ key: 'Cache-Control', value: 'public, max-age=3600' }] }]`可以设置所有页面的缓存时间。此外，`headers`还支持`rewrite`和`redirect`功能，可以统一处理路径重定向，避免客户端路由错误。

三 使用`getServerSideProps`时必须配合`revalidate`参数，否则每次请求都会重新生成页面，导致服务器负载过高。`revalidate`是`next.js` 12引入的新特性，可以控制页面重新生成的时间间隔。例如，在`getServerSideProps`中返回`{ props, revalidate: 60 }`可以让页面每60秒更新一次，避免数据过时。同时，`revalidate`可以结合`next.config.js`中的`experimental`配置项，如`experimental: { serverComponents: true }`，来优化整体渲染流程。

四 部署企业级SSR时，建议使用`pm2`来管理Node.js进程。`pm2`支持集群模式、负载均衡、自动重启，这些对SSR服务至关重要。例如，运行`pm2 start server.js -i max`可以启动最大数量的进程，充分利用多核CPU。同时，`pm2`的`--no-daemon`参数能确保进程在后台运行，避免因资源占用问题导致服务中断。对于高并发场景，使用`pm2`的`cluster`模式比单进程部署更稳定。

五 在企业级SSR配置中，`next.js`的`Image`组件必须配合`next.config.js`中的`images`配置项使用，否则会导致图片加载失败或性能下降。例如，`images: { domains: ['yourdomain.com'] }`可以确保图片域名安全，同时避免不必要的跨域请求。此外，`next.js`的`next/image`组件支持`priority`和`loading`参数，可以优化首屏加载速度。如果使用CDN加速，还要配置`assetPrefix`，确保静态资源路径正确。

六 企业级SSR配置中，`redirects`和`rewrites`要分开处理，确保路径管理清晰。`redirects`用于重定向，如`301`或`302`，而`rewrites`用于路径替换，例如将`/old-page`重定向到`/new-page`。例如，在`next.config.js`中使用`redirects: [ { source: '/old-page', destination: '/new-page', permanent: true } ]`，可以实现永久重定向。而`rewrites`则需要使用`next.config.js`中的`rewrites`函数，如`rewrites: () => [ { source: '/api/:path', destination: '/api-handler' } ]`，把所有`/api`请求都指向统一的处理函数。

七 `Next.js`的`trailingSlash`配置必须统一，否则会导致路径不一致的问题。例如，设置`trailingSlash: true`可以让所有路径自动添加斜杠，如`/about`变成`/about/`。这在SEO优化和路径缓存中非常关键。如果网站使用`nginx`代理，还要确保配置中的`location`规则与`trailingSlash`匹配，否则会出现404错误。

八 当使用`getStaticProps`时，必须结合`revalidate`参数来确保内容的时效性。例如，`getStaticProps`返回`{ props, revalidate: 10 }`可以让页面在10秒后重新生成，避免数据过期。同时，`revalidate`还可以配合`next.config.js`中的`distDir`使用，将生成的页面缓存到指定位置，提升部署效率。

九 在企业级SSR配置中，`next.js`的中间件配置不能忽略。中间件可以用于处理请求、验证权限、记录日志等。例如，使用`next.js`的`middleware`文件来定义请求处理逻辑，如`async function middleware(req, res, next)`，可以控制页面访问权限。此外，中间件还支持`cookie`和`headers`的解析，如`req.headers.cookie`，适合需要传递用户状态的场景。

十 对于动态内容加载，建议使用`cookies`和`headers`传递信息，而不是直接在`getServerSideProps`中请求数据库。例如，在客户端使用`document.cookie`设置`authToken`，然后在服务端通过`cookies`解析获取，可以减少重复请求。同时，使用`headers`传递`Authorization`头也能提升请求效率，避免额外的参数传递。

十一 `Next.js`的`next.config.js`中必须明确`basePath`和`assetPrefix`配置，否则会导致静态资源和页面路径混乱。例如，设置`basePath: '/app'`可以让所有页面路径自动带上`/app`前缀，而`assetPrefix: 'https://cdn.yourdomain.com'`则能确保CDN加速正确生效。

十二 在企业级SSR部署时，`next.js`的`output`配置推荐设置为`export`，这样可以生成静态页面，减轻服务器压力。例如，在`next.config.js`中使用`output: { exportTrailingSlash: true }`，可以确保所有页面都以`/`结尾，避免路径错误。

十三 使用`next.js`的`next export`功能可以生成静态页面，但必须配合`next.config.js`中的`basePath`和`assetPrefix`。例如，`next export`会将所有页面导出到`out`目录，如果`basePath`设置为`'/app'`，那么导出的页面也会自动带上该路径。

十四 `Next.js`的`swc`配置必须优化，特别是`optimizeImports`参数。例如，在`next.config.js`中使用`swc: { optimizeImports: true }`，可以减少构建时间，提升开发效率。此外，`swc`还支持`minify`和`compress`，可以减小代码体积，优化加载性能。

十五 在企业级SSR中，`next.js`的`serverComponents`配置可以提升渲染性能。例如，使用`experimental: { serverComponents: true }`，可以将部分逻辑移至服务端，减少客户端负担。不过，`serverComponents`需要配合`next.js` 13或更高版本使用，且不能与其他某些特性兼容，需要提前测试。