Nextjs: Loading or Suspense fallback won't show in production

Question

I've migrated my personal page to the app directoy with nextjs v13.

I was trying adding loaders for RSCs first in the fallback prop of the Suspense component and also adding a loading component located at path of each route from the app directory.

// src/app/posts/loading.tsx
import { Container } from '~/components/organisms/container';

export default function Loading() {
  return (
    <Container>
      {/* Add a big loading string with tailind */}
      <span className="text-6xl font-bold text-center text-red-500">Loading...</span>
    </Container>
  );
}

and also like this

// src/app/posts/page.tsx
export default async function PostsPage() {
  return (
    <Container>
      <PageHeader
        title='Posts'
        description="I love to write about things I'm learning. 
            Blogging is a great way to improve and share knowledge.
            And who knows, maybe one day it might help me to write a book!"
      />
      <Suspense
        fallback={
          <Container>
            {/* Add a big loading string with tailind */}
            <span className='text-6xl font-bold text-center text-red-500'>
              Loading...
            </span>
          </Container>
        }
      >
        {/* @ts-expect-error Server Component */}
        <Posts />
      </Suspense>
    </Container>
  );
}

both working in local development

however they are not shown in my vercel deployments

Wrapping with Suspense the RSCs: this url
Using the loading.tsx file: this url

I'm using node 18.16 locally and node 18.x in my vercel deployment. I'm also using the default configuration for deploying nextjs projects in vercel.

The branch code can be found here in case anybody needs more details

score 0 · Answer 1 · answered Jun 13 '23 at 14:17

You don't include how you are loading the data, but if you are using the new fetch then it might have something to do with the built-in caching that nextjs is doing -- it will cache data indefinitely by default. On production it just looks like your posts are loaded instantly

score 0 · Answer 2 · answered Aug 18 '23 at 21:08

That is because when deploying in vercel, it executes the production mode of your application, and in this mode the static html of each of your pages is automatically built, that is why you do not see the loading load. To solve this you would have to work the component as ""Client Component", assigned the "use client" directive at the top, and here you would work it as you would in react with Suspense and lazy. The disadvantage of this is that you will not have the static html of the component you are loading, which is good for SEO

Nextjs: Loading or Suspense fallback won't show in production

2 Answers2