刷新页面时Next.js静态块503服务不可用问题。间歇性

Question

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

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

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

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

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

使用 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>
  );
}

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

Answer 1

要解决此问题，您需要禁用主机上的缓存。 index.html 应与标头一起发送 Cache-Control: no-store

刷新页面时Next.js静态块503服务不可用问题。间歇性

问题描述投票：0回答：1

1个回答

最新问题

刷新页面时Next.js静态块503服务不可用问题。间歇性

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1