面试题：Next.js 嵌套路由下的布局共享与数据获取优化

顶层布局数据获取：

使用 getStaticProps：如果顶层布局的公共数据不经常变化，可以在顶层布局组件中使用 getStaticProps 来获取数据。例如，假设顶层布局需要获取网站的基本配置信息（如网站标题、版权信息等），可以这样写：

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/site - config');
  const data = await res.json();
  return {
    props: {
      siteConfig: data
    },
    revalidate: 60 * 60 * 24 // 一天后重新验证数据，用于增量静态再生
  };
}

const TopLevelLayout = ({ siteConfig }) => {
  return (
    <div>
      <h1>{siteConfig.title}</h1>
      {/* 其他顶层布局内容 */}
    </div>
  );
};

export default TopLevelLayout;

使用 getServerSideProps：如果公共数据需要实时获取，比如获取当前用户的登录状态（在每个请求时都可能不同），则使用 getServerSideProps。

export async function getServerSideProps(context) {
  const session = await getSession(context);
  return {
    props: {
      userSession: session
    }
  };
}

const TopLevelLayout = ({ userSession }) => {
  return (
    <div>
      {userSession && <p>Welcome, {userSession.user.name}</p>}
      {/* 其他顶层布局内容 */}
    </div>
  );
};

export default TopLevelLayout;

子路由数据获取：

使用 getStaticProps：对于子路由独有的数据，如果数据不经常变化，同样可以使用 getStaticProps。假设子路由是一个文章详情页，需要获取文章内容。

export async function getStaticProps(context) {
  const articleId = context.params.articleId;
  const res = await fetch(`https://api.example.com/articles/${articleId}`);
  const data = await res.json();
  return {
    props: {
      article: data
    }
  };
}

const ArticlePage = ({ article }) => {
  return (
    <div>
      <h2>{article.title}</h2>
      <p>{article.content}</p>
    </div>
  );
};

export default ArticlePage;

使用 getServerSideProps：如果子路由的数据需要实时获取，例如获取用户对某篇文章的最新点赞数，就使用 getServerSideProps。

export async function getServerSideProps(context) {
  const articleId = context.params.articleId;
  const res = await fetch(`https://api.example.com/articles/${articleId}/likes`);
  const data = await res.json();
  return {
    props: {
      likeCount: data.likeCount
    }
  };
}

const ArticlePage = ({ likeCount }) => {
  return (
    <div>
      <p>Like Count: {likeCount}</p>
      {/* 其他文章页面内容 */}
    </div>
  );
};

export default ArticlePage;

避免重复请求和性能优化：
- 数据缓存：在使用 getStaticProps 时，可以利用缓存机制。例如，在 fetch 请求时，可以设置适当的缓存策略。对于相同的请求，浏览器或服务器端缓存可以直接返回数据，避免重复请求。
- 合并请求：如果子路由的数据依赖于顶层布局的数据，并且可以在一次请求中获取，可以合并请求。例如，假设顶层布局获取用户信息，子路由需要根据用户信息获取个性化推荐文章。可以在子路由的 getStaticProps 或 getServerSideProps 中，复用顶层布局获取的用户信息，在一次请求中获取推荐文章数据。
- 静态数据复用：对于使用 getStaticProps 获取的静态数据，Next.js 会在构建时生成静态页面。在子路由组件渲染时，如果顶层布局的静态数据没有变化，不会重复获取，从而优化性能。同时，增量静态再生（通过 revalidate 参数）可以在数据变化时及时更新页面，而不需要完全重新构建。

面试题：Next.js 嵌套路由下的布局共享与数据获取优化

知识考点

面试题答案