Next.js Discord

Discord Forum

Streaming Layout to page

Unanswered
ItetsuLaTable posted this in #help-forum
Open in Discord
ItetsuLaTableOP
Hello everyone!!

My team and I is working on a migration from pages dir to app dir.
We have an CLS issue due to streaming from layout to page.

In facts, the Layout do not contains our page and at the very first load we got only header and footer then page comes.
We do not have this behavior using pages dir :/

Do you have any suggestion ?

2 Replies

ItetsuLaTableOP
Here is APP dir code 

MY LAYOUT 

export default async function LayoutCourse({ children }) {
  noStore();
  const { isEnabled } = draftMode();

  return (
    <Layout
      isPreview={isEnabled}
      header={
        <div className="home__header">
          <FreeDelivery />
          <Header />
        </div>
      }
      content={children}
      footer={<Footer />}
      footerBanner={<FooterBanner />}
    />
  );
}


MY PAGE
 return (
    <Suspense>
      <div className="home__content">
        <PageView pageView="homepage" />
        <Config />
        <Content {...content} />
      </div>
    </Suspense>
  );
Here is PAGES dir code 
MY PAGE CODE 
return (
    <Layout
      pageView="homepage"
      header={
        <div className="home__header">
          <FreeDeliveryBanner />
          <Header />
        </div>
      }
      content={
        <div className="home__content">
          <Content {...content} />
        </div>
      }
      footer={
        footer ? (
          <ContentfulRenderComponents components={footer.components} />
        ) : null
      }
      footerBanner={slots?.length ? <SlotsBanner slots={slots} /> : null}
    />
  );
};