面试题：Next.js 嵌套路由与 SSR/SSG 结合的复杂场景问题及解决

1. 嵌套路由下的数据预取不一致问题

原因分析

不同渲染模式差异：SSR 是在服务器端渲染时获取数据，SSG 是在构建时获取数据。嵌套路由中不同层级组件可能使用不同渲染模式，导致数据获取时机不同，进而数据不一致。
动态数据依赖：嵌套路由下子路由可能依赖父路由的数据，若父路由数据更新不及时或获取方式与子路由不匹配，就会产生不一致。

解决方案

统一数据获取逻辑：在顶层布局组件中统一数据获取逻辑，利用 getStaticProps 或 getServerSideProps 来获取所有路由层级可能需要的数据，并通过上下文或 props 传递给子组件。例如：

// pages/_app.js
import { useState, useEffect } from'react';
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const [sharedData, setSharedData] = useState(null);

  useEffect(() => {
    async function fetchSharedData() {
      // 统一获取数据逻辑
      const response = await fetch('/api/shared-data');
      const data = await response.json();
      setSharedData(data);
    }
    fetchSharedData();
  }, [router]);

  return <Component {...pageProps} sharedData={sharedData} />;
}

export default MyApp;

数据缓存：利用 next - cache 或自定义缓存机制，在不同渲染模式下共享数据缓存，减少重复请求。例如：

// utils/cache.js
const cache = {};

export async function getDataWithCache(key, fetcher) {
  if (cache[key]) {
    return cache[key];
  }
  const data = await fetcher();
  cache[key] = data;
  return data;
}

确保数据一致性钩子：在客户端使用 useEffect 钩子来对比和更新数据，确保客户端和服务器端数据一致。例如：

function MyComponent({ serverData }) {
  const [clientData, setClientData] = useState(null);

  useEffect(() => {
    if (serverData && clientData!== serverData) {
      setClientData(serverData);
    }
  }, [serverData]);

  return (
    // 组件渲染逻辑
  );
}

2. 客户端 hydration 问题

原因分析

SSR 和客户端渲染差异：SSR 生成的 HTML 与客户端 JavaScript 渲染结果可能不一致，特别是在处理复杂 UI 状态和事件绑定方面。
第三方库兼容性：某些第三方库可能在服务器端和客户端渲染行为不同，导致 hydration 失败。

解决方案

严格的代码规范：确保服务器端渲染代码和客户端代码逻辑一致，避免使用仅在客户端有效的代码路径。例如，避免在 getStaticProps 或 getServerSideProps 中使用浏览器特定 API。
测试和调试：使用 next dev 结合 console.log 或调试工具，对比服务器端和客户端渲染结果，及时发现不一致点。同时，可以利用 Next.js 的 next/debug 模块辅助调试。
第三方库适配：对于不兼容的第三方库，寻找替代方案或编写适配器，使其在 SSR 和客户端渲染中表现一致。例如，对于某些依赖浏览器 DOM 的库，可以使用 next/dynamic 进行动态导入，确保仅在客户端渲染时加载。

import dynamic from 'next/dynamic';

const ChartComponent = dynamic(() => import('react - chartjs - 2'), { ssr: false });

3. 路由切换时的性能抖动问题

原因分析

资源加载：每次路由切换都可能重新加载大量资源，包括 JavaScript、CSS 和图片等，导致性能抖动。
渲染开销：复杂的嵌套路由和组件重新渲染会增加渲染开销，特别是在处理大量数据和复杂 UI 时。

解决方案

代码分割：使用 Next.js 的动态导入和代码分割功能，按需加载组件和资源。例如：

import dynamic from 'next/dynamic';

const BigComponent = dynamic(() => import('../components/BigComponent'));

function MyPage() {
  return (
    <div>
      <BigComponent />
    </div>
  );
}

缓存和预加载：利用浏览器缓存和 Next.js 的预加载功能，提前加载可能需要的资源。在 next.config.js 中配置 assetPrefix 以启用缓存，同时使用 next/link 的 prefetch 属性预加载页面。

import Link from 'next/link';

function MyLink() {
  return (
    <Link href="/next - page" prefetch>
      <a>Go to Next Page</a>
    </Link>
  );
}

优化渲染：使用 React.memo 或 shouldComponentUpdate 来减少不必要的组件重新渲染。对于频繁更新的数据，可以使用 useReducer 或 useContext 来优化状态管理和渲染。例如：

const MyMemoComponent = React.memo((props) => {
  return (
    // 组件渲染逻辑
  );
});

服务端优化：在服务器端，优化数据库查询和 API 响应时间，减少数据获取的延迟，从而提升整体性能。可以使用缓存技术，如 Redis，来加速数据查询。

星途面试题库

面试题：Next.js 嵌套路由与 SSR/SSG 结合的复杂场景问题及解决

知识考点

面试题答案

1. 嵌套路由下的数据预取不一致问题

原因分析

解决方案

2. 客户端 hydration 问题

原因分析

解决方案

3. 路由切换时的性能抖动问题

原因分析

解决方案