如何使用Next.js通过CDN为静态生成的页面提供服务

Question

我试图将Next.js (9.5.2)用于服务器端呈现和静态站点生成。assetPrefix对我来说很好。我能够在CloudFront上托管我所有的静态资产。但是，我不知道最好的方法是托管静态页面。

我面临两个问题。

1. assetPrefix不应用于SSG页面。因此，指向JS/CSS的链接将类似于我们在CDN上托管生成的HTML的<link rel="preload" href="/_next/static/css/styles.31b6de8d.chunk.css" as="style"/>
2. Assume，我们能够使用assetPrefix提供资产服务，如何使用Next.js增量静态再生和getStaticPath中的fallback: true。我的理解是，如果找不到相应的HTML，那么页面将在服务器端生成。

谢谢大家的帮助。

Answer 1

我对我自己的问题有部分答案。

为第1期

这个问题是我自己的错。assetPrefix与SSR一起工作，但不是为SSG工作，因为我没有正确地传递环境变量。在我的情况下，我们有两个不同的CDN网址生产和分期。因此，我在next.config.js中有类似的内容。因为MY_ENV是从启动我的应用程序的PM2传入的，所以保证当Next.js需要访问next.config.js时，MY_ENV总是可用的。

// next.config.js
const isProd = process.env.MY_ENV === 'production';
const isStaging = process.env.MY_ENV === 'staging';
const isDevelopment = process.env.MY_ENV === 'development';

if (isProd) {
  assetPrefix = 'https://mycdn.cloudfront.net/';
} else if (isStaging) {
  assetPrefix = 'https://mycdn.cloudfront.net/staging';
}

但是，当我为静态页面运行next build时，构建步骤不使用PM2，因此MY_ENV不可用。要使它正常工作，我需要使用不同的变量运行两次构建。

"build": "npm-run-all --parallel build:production build:staging",
"build:production": "MY_ENV=production next build",
"build:staging": "MY_ENV=staging next build",

为第2期

如果我能预先生成所有静态页面。我可以把所有的东西都放在CDN上，他们会工作的。

在我看来，ISR是一个更合适的选择。让ISR工作的方法是要求服务器为每个请求返回HTML，而不是托管在CDN上。因为所有其他资产都托管在CDN上，所以性能仍然很好，这个解决方案适合我的情况。

如果你和我一样，在这个问题上有点挣扎，我希望我的回答能帮到你。