Next.js 13新App目录下如何让布局与页面组件同时加载？

当前项目中，RootLayout布局会先加载完成并显示，首页内容要等布局渲染完才开始加载展示。需要让布局和页面内容准备就绪后同时显示，而非有先后顺序。

现有代码：
App/layout.js

import Footer from "./footer";
import "./globals.css";
import NavBar from "./navbar";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <section>
          <NavBar />
          <div>{children}</div>
          <Footer />
        </section>
      </body>
    </html>
  );
}

App/page.js

"use client";
import { useEffect, useState } from "react";
import Carousel from "./home/carousel/page";
import Video from "./home/video/page";
import Gallery from "./home/gallery/page";
import Givenft from "./home/givenft/page";
import Support from "./home/support/page";

export default function Home() {
  const [isLoaded, setIsLoaded] = useState(false); 

  useEffect(() => {
    setIsLoaded(true);
  }, []);

  return (
    <>
      {isLoaded && (
        <>
          <Carousel />
          <Video />
          <Gallery />
          <Givenft />
          <Support />
        </>
      )}
    </>
  );
}

注：原代码用isLoaded确保客户端初始化完成后渲染内容，避免异步加载问题，但导致内容滞后于布局显示。

核心思路是让布局和内容共享同一个"就绪状态"，只有当两者都准备好时才一起渲染。以下是两种可行方案：

方案1：简化版 - 布局等待客户端初始化完成 #

把RootLayout改为客户端组件，添加状态控制整体渲染时机：

修改App/layout.js：

"use client";
import Footer from "./footer";
import "./globals.css";
import NavBar from "./navbar";
import { useState, useEffect } from "react";

export default function RootLayout({ children }) {
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    // 等待客户端 hydration 完成，或根据实际需求调整时机
    setIsReady(true);
  }, []);

  return (
    <html lang="en">
      <body>
        {/* 就绪后才渲染整个布局+内容 */}
        {isReady ? (
          <section>
            <NavBar />
            <div>{children}</div>
            <Footer />
          </section>
        ) : (
          // 可选：添加加载占位
          <div className="loading">加载中...</div>
        )}
      </body>
    </html>
  );
}

修改App/page.js，移除本地加载状态：

"use client";
import Carousel from "./home/carousel/page";
import Video from "./home/video/page";
import Gallery from "./home/gallery/page";
import Givenft from "./home/givenft/page";
import Support from "./home/support/page";

export default function Home() {
  return (
    <>
      <Carousel />
      <Video />
      <Gallery />
      <Givenft />
      <Support />
    </>
  );
}

方案2：进阶版 - 同步内容异步加载状态 #

如果首页内容包含异步操作（比如数据请求），用Context同步布局和内容的就绪状态：

1. 创建App/ContentReadyContext.js：

"use client";
import { createContext, useContext, useState } from "react";

const ContentReadyContext = createContext();

export function ContentReadyProvider({ children }) {
  const [isReady, setIsReady] = useState(false);
  return (
    <ContentReadyContext.Provider value={{ isReady, setIsReady }}>
      {children}
    </ContentReadyContext.Provider>
  );
}

export function useContentReady() {
  return useContext(ContentReadyContext);
}

2. 修改App/layout.js：

"use client";
import Footer from "./footer";
import "./globals.css";
import NavBar from "./navbar";
import { ContentReadyProvider, useContentReady } from "./ContentReadyContext";

function LayoutInner({ children }) {
  const { isReady } = useContentReady();
  return (
    <>
      {isReady ? (
        <section>
          <NavBar />
          <div>{children}</div>
          <Footer />
        </section>
      ) : (
        <div className="loading">加载中...</div>
      )}
    </>
  );
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <ContentReadyProvider>
          <LayoutInner>{children}</LayoutInner>
        </ContentReadyProvider>
      </body>
    </html>
  );
}

3. 修改App/page.js，在异步操作完成后标记就绪：

"use client";
import { useEffect } from "react";
import { useContentReady } from "../ContentReadyContext";
import Carousel from "./home/carousel/page";
import Video from "./home/video/page";
import Gallery from "./home/gallery/page";
import Givenft from "./home/givenft/page";
import Support from "./home/support/page";

export default function Home() {
  const { setIsReady } = useContentReady();

  useEffect(() => {
    // 替换为实际的异步操作（比如fetch数据）
    const loadContent = async () => {
      // 模拟异步请求
      await new Promise(resolve => setTimeout(resolve, 1500));
      // 内容准备完毕，通知布局
      setIsReady(true);
    };
    loadContent();
  }, [setIsReady]);

  return (
    <>
      <Carousel />
      <Video />
      <Gallery />
      <Givenft />
      <Support />
    </>
  );
}

关键说明 #

• 原代码中isLoaded只控制内容渲染，导致布局先显示；现在把控制逻辑提升到布局层面，确保两者同时就绪后展示。
• 若没有异步操作，方案1足够；若有异步数据请求，方案2能精准同步内容加载状态。
• 加载占位可根据设计需求自定义样式，提升用户体验。

内容的提问来源于stack exchange，提问作者Mohammad syied bin salim