Question

我正在尝试将Next.js（9.5.2）用于服务器端渲染和静态网站生成。 SSR使用assetPrefix对我来说很好用。我能够将所有静态资产托管在CloudFront上。但是，我不确定最好的方法是托管静态页面。

我面临2个问题。

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

感谢大家的帮助。

Answer 1

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

对于问题1 ：

问题是我自己的错。 assetPrefix使用了SSR，但没有使用SSG，因为我没有正确传递环境变量。在我的情况下，我们有2个不同的CDN URL用于生产和暂存。因此，我在next.config.js中有以下内容。由于MY_ENV是从PM2传入的，这会启动我的应用程序，因此可以保证，当Next.js需要访问MY_ENV时，next.config.js将始终可用。

// 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上，因此性能仍然相当不错，并且该解决方案非常适合我的情况。

如果您像我一样在这个问题上苦苦挣扎，希望我的回答对您有所帮助。

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

1 个答案: