面试题：Next.js 路由系统中如何优化动态路由的性能

数据获取策略优化

静态生成（SSG）
- 在构建时获取数据：对于动态路由页面，如果数据变化不频繁，可使用 getStaticProps 方法在构建阶段获取数据。例如，对于 /posts/[id] 页面，在页面组件中定义 getStaticProps 函数，通过 context.params.id 获取动态参数 id，然后根据 id 从数据库或 API 获取文章内容。这样每个页面在构建时就生成了静态 HTML，提升加载性能。
```
export async function getStaticProps(context) {
  const id = context.params.id;
  const post = await fetchPostById(id);
  return {
    props: {
      post
    },
    revalidate: 60 // 可选，设置页面重新生成的时间间隔（秒），用于增量静态再生
  };
}
```
增量静态再生
- 结合 revalidate 参数：在 getStaticProps 中设置 revalidate 参数，如上述示例。Next.js 会在指定的时间间隔后重新生成页面，确保内容在一定时间内保持最新，同时利用构建时生成的静态页面保证初始加载性能。
服务器端渲染（SSR）
- 使用 getServerSideProps：当数据需要实时获取，如用户特定数据或高度动态的数据时，可使用 getServerSideProps。它在每次请求时运行，在服务器端获取数据并将其作为 props 传递给页面组件。
```
export async function getServerSideProps(context) {
  const id = context.params.id;
  const post = await fetchPostById(id);
  return {
    props: {
      post
    }
  };
}
```

缓存机制运用

浏览器缓存
- 设置恰当的缓存头：对于静态资源（如 CSS、JavaScript 文件），在 Next.js 配置中设置合适的缓存头。可以在 next.config.js 中使用 headers 配置。
```
module.exports = {
  headers: () => [
    {
      source: '/_next/static/:path*',
      headers: [
        {
          key: 'Cache - Control',
          value: 'public, max - age = 31536000, immutable'
        }
      ]
    }
  ]
};
```
这样可让浏览器长时间缓存静态资源，减少重复下载。

数据缓存

客户端缓存：在前端代码中，可以使用 useSWR 或 react - query 等库来管理数据缓存。这些库可以自动缓存从 API 获取的数据，并且在组件重新渲染或数据过期时重新获取数据。例如，使用 useSWR：

import useSWR from'swr';
const fetcher = (url) => fetch(url).then((res) => res.json());
const PostPage = ({ params }) => {
  const { data, error } = useSWR(`/api/posts/${params.id}`, fetcher);
  if (error) return <div>Error loading post</div>;
  if (!data) return <div>Loading post...</div>;
  return <div>{data.title}</div>;
};

服务器端缓存：如果使用 SSR，可在服务器端实现缓存机制。例如，在 Node.js 服务器中使用 node - cache 库缓存从数据库获取的数据。当接收到请求时，先检查缓存中是否有对应的数据，如果有则直接返回，否则从数据库获取并缓存。

const NodeCache = require('node - cache');
const myCache = new NodeCache();
async function fetchPostById(id) {
  let post = myCache.get(id);
  if (!post) {
    post = await db.query('SELECT * FROM posts WHERE id =?', [id]);
    myCache.set(id, post);
  }
  return post;
}

其他优化

代码分割

Next.js 自动进行代码分割，对于动态路由页面，确保页面组件及其依赖的代码只在需要时加载。例如，动态导入组件：

const PostPage = () => {
  const [PostComponent, setPostComponent] = useState(null);
  useEffect(() => {
    import('./PostContent').then((module) => {
      setPostComponent(module.default);
    });
  }, []);
  if (!PostComponent) return null;
  return <PostComponent />;
};

优化图片

使用 Next.js 的 next/image 组件优化图片加载。它自动进行图片的优化，如根据设备分辨率加载合适尺寸的图片，并且支持懒加载。

import Image from 'next/image';
const PostPage = ({ post }) => {
  return (
    <div>
      <Image
        src={post.imageUrl}
        alt={post.imageAlt}
        width={800}
        height={600}
      />
    </div>
  );
};

星途面试题库

面试题：Next.js 路由系统中如何优化动态路由的性能

知识考点

面试题答案

数据获取策略优化

缓存机制运用

其他优化