面试题：Next.js 路由系统异常处理与 SSR 及增量静态再生的融合

技术思路

SSR 中的错误处理：
- 在 Next.js 中，SSR 时数据获取通常在 getServerSideProps 函数中进行。当遇到数据获取异常时，不能让整个 SSR 流程崩溃。可以使用 try - catch 块包裹数据获取逻辑。
- 错误边界（Error Boundaries）在 SSR 中，对于 React 组件树中的 JavaScript 错误可以捕获并处理。但对于 getServerSideProps 中的错误，它无法直接捕获，所以我们需要手动处理。
确保 ISR 流程不受影响：
- ISR 依赖于缓存数据，在 SSR 出现数据获取异常时，不能让这个异常影响到 ISR 缓存机制。可以设置一个标志或默认值，使得即使 SSR 数据获取失败，后续 ISR 流程依然可以尝试重新获取数据。
- 在 ISR 重新生成页面时，要确保其获取数据逻辑独立于 SSR 数据获取失败的情况，重新进行数据请求，不受之前 SSR 错误状态的干扰。
正确更新页面缓存：
- 当 ISR 重新获取数据成功后，需要正确更新页面缓存。Next.js 中可以通过设置 revalidate 时间来控制缓存更新频率。在 ISR 数据获取成功后，要确保缓存的是最新且正确的数据。

实现要点

SSR 数据获取异常处理：

export async function getServerSideProps(context) {
  try {
    // 数据获取逻辑
    const res = await fetch('your - api - url');
    const data = await res.json();
    return {
      props: {
        data
      }
    };
  } catch (error) {
    // 处理异常，返回默认数据或错误信息
    return {
      props: {
        error: 'Data fetching failed',
        defaultData: {}
      }
    };
  }
}

错误边界组件：

创建一个错误边界组件，用于捕获 React 组件树中的错误。

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  componentDidCatch(error, errorInfo) {
    // 记录错误信息，可用于日志
    console.log('Error in component:', error, errorInfo);
    this.setState({ hasError: true });
  }
  render() {
    if (this.state.hasError) {
      // 返回错误提示
      return <div>An error occurred in the component.</div>;
    }
    return this.props.children;
  }
}

在页面组件中使用该错误边界。

import React from'react';
import MyErrorBoundary from '../components/MyErrorBoundary';
const Page = ({ data, error }) => {
  if (error) {
    return <div>{error}</div>;
  }
  return (
    <MyErrorBoundary>
      {/* 页面内容 */}
    </MyErrorBoundary>
  );
};
export default Page;

ISR 缓存更新：

在 getStaticProps 或 getStaticPaths 中设置 revalidate 属性。

export async function getStaticProps() {
  try {
    const res = await fetch('your - api - url');
    const data = await res.json();
    return {
      props: {
        data
      },
      revalidate: 60 // 每 60 秒重新验证缓存
    };
  } catch (error) {
    // 处理异常，返回默认数据或错误信息
    return {
      props: {
        error: 'Data fetching failed',
        defaultData: {}
      },
      revalidate: 60
    };
  }
}

确保 ISR 数据获取逻辑能正确处理之前 SSR 出现的异常情况，独立获取数据并更新缓存。在每次 ISR 重新验证时，重新执行数据获取逻辑，若成功则更新缓存中的数据，使得页面展示最新内容。

面试题：Next.js 路由系统异常处理与 SSR 及增量静态再生的融合

知识考点

面试题答案

技术思路

实现要点