Next刷新页面时出现 .js 静态块 503 服务不可用问题。断断续续-解网

问：

赏金将在 7 小时后到期。这个问题的答案有资格获得 +100 声望赏金。在 The Empire 从信誉良好的来源寻找答案之前：

查找任一部分的答案，即 localhost 未捕获的语法错误或已部署的 url 刷新错误。

使用以下 next 配置在静态导出 next.js 网站中工作。

编辑：看起来 503 是与提供文件相关的 nginx 503。我可以根据需要发布 nginx 配置。

const nextConfig = {
    output: 'export',
    distDir: 'dist',
    images: {
        unoptimized: true
    }
}

部署的 url 是我们的测试环境、mysite-test.com 和 mysite-stage.com

已部署的测试阶段代码在首次导航到站点时立即呈现，但在后续导航或刷新到其他页面时呈现。我们得到：有几个 503 静态块错误，如下所示：

应用程序使用输出 'export' 和 docker 和 nginx 部署到 openshift。我将其设置为每个配置输出到 /dist 目录。

该 api 调用一个无头 CMS，使大多数数据立即显示在页面上，并调用其他 2 个 API 来显示文档列表。API 调用仅在呈现每个单独的页面时调用数据。

我已经上下搜索了缓存问题，尝试了独立导出（结果是 403），将“使用客户端”移动到各种组件，并将组件包装在 react 中。我还利用 isLoading 状态在加载数据之前渲染骨架。我尝试确保在使用骨架加载进行渲染之前先交付数据。

如果需要，我可以发布我的 nginx 文件和 dockerfile。

layout.tsx 文件。使用新的项目结构。

import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import Header from './header/page';
import Footer from './footer/page';
import Link from 'next/link';
import styles from './Styles.module.css';
import Head from 'next/head';
import { Suspense } from 'react';
import { Skeleton } from '@mui/material';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'My Site',
  description: 'My Site Description',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" id="page-container">
      <Head>
        <link rel="icon" href="./favicon.ico" sizes="any" />
      </Head>
      <body className={`${inter.className} `}>
        <div className="w-screen bg-white">
          <Link
            href="#main"
            className={styles.stmcl}
            style={{ width: '300px' }}
          >
            Skip To Content
          </Link>
        </div>
        <div>
          <div className="bg-white" style={{ display: 'block' }}>
            <Suspense
              fallback={<Skeleton width={1500} height={1500}></Skeleton>}
            >
              <Header />
              <main id="content" className="min-h-[40em] w-full">
                {children}
              </main>
            </Suspense>
          </div>
          <Suspense fallback={<Skeleton width={1500} height={1500}></Skeleton>}>
            <Footer />
          </Suspense>
        </div>
      </body>
    </html>
  );
}

请求的任何其他支持代码也可以共享。该问题似乎出在本地的第一页加载上，似乎与缓存有关。在部署的代码上，它似乎仅在页面刷新时，不一致/间歇性。

ReactJS 打字稿下一个 .js OpenShift

Next刷新页面时出现 .js 静态块 503 服务不可用问题。断断续续

Next.js static chunks 503 service unavailable issues when refreshing pages. Intermittent

评论

评论