Next.js Discord

Discord Forum

Suspense components are pre-rendered and don't update data from database on preview environment

Unanswered
Canada Warbler posted this in #help-forum
Open in Discord
Canada WarblerOP
On my dashboard page, Suspense components haven't the same comportement in local environment vs preview environment.

The main part of the source code is bellow:

`
import CardWrapper from '@/app/ui/dashboard/cards';
import RevenueChart from '@/app/ui/dashboard/revenue-chart';
import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
import { lusitana } from '@/app/ui/fonts';
import { Suspense } from 'react';
import { RevenueChartSkeleton, LatestInvoicesSkeleton, CardsSkeleton } from '@/app/ui/skeletons';

export default async function Page() {
  return (
    <main>
      <h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
        Dashboard
      </h1>
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        <Suspense fallback={<CardsSkeleton />}>
          <CardWrapper />
        </Suspense>
      </div>
      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
        <Suspense fallback={<RevenueChartSkeleton />}>
          <RevenueChart />
        </Suspense>
        <Suspense fallback={<LatestInvoicesSkeleton />}>
          <LatestInvoices />
        </Suspense>
      </div>
    </main>
  );
}
`

I attache 2 video as demo.

What I make wrong on the preview env or in my config?

Thx for your help

3 Replies

Please don’t repost the question
Canada WarblerOP
I delete the other one
Yes and I was telling you to not do that. Instead you should’ve bumped the old question.