reactjstypescriptnext.jsopenshift

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

Working in a static export next.js website with the following next config.

Edit: it looks like the 503s are nginx 503s related to serving the files. I can post nginx config as needed.

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

The deployed url is to our test environment, mysite-test.com and mysite-stage.com

The deployed test an stage code renders right away when first navigating to the site, but on subsequent navigation or refresh to other pages. We get: enter image description here with several 503 static chunk errors as follows: enter image description here

The application is deployed to openshift using output 'export' with docker and nginx.I set it to output to the /dist directory per config.

The api calls a headless CMS for most data to display immediately on the page, and 2 other api calls to display lists of documents. The api calls only call for the data when upon rendering each individual page.

I've searched up and down on caching issues, tried standalone export (results in 403), moving 'use client' to various components, and wrapping components in react . I'm also leveraging isLoading state to render skeletons before the data is loaded. I've tried ensuring the data is delivered first before rendering with the skeleton loading.

If required I can post my nginx file and dockerfile.

layout.tsx file. Using the new project structure.

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

Any other supporting code requested can be shared as well. The issue seems to be on first page load locally, it seems to be caching related. On the deployed code it seems to be only on refresh of pages, an inconsistent/intermittent.

Solution

  • To fix this problem, you need to disable caching on your hosting. The index.html should be sent with headers Cache-Control: no-store