面试题：Next.js嵌套路由下的性能优化与SEO策略

性能优化

代码拆分：

动态导入：在 Next.js 中，使用动态 import() 语法进行代码拆分。对于嵌套路由组件，可以在需要渲染该组件时才导入。例如，在父路由组件中：

const ParentComponent = () => {
  const [isChildVisible, setIsChildVisible] = useState(false);
  const ChildComponent = React.lazy(() => import('./ChildComponent'));
  return (
    <div>
      <button onClick={() => setIsChildVisible(!isChildVisible)}>Toggle Child</button>
      {isChildVisible && (
        <Suspense fallback={<div>Loading...</div>}>
          <ChildComponent />
        </Suspense>
      )}
    </div>
  );
};

路由层面拆分：Next.js 支持自动代码拆分，根据路由结构进行拆分。确保每个嵌套路由的页面文件（.jsx 或 .tsx）独立，这样 Next.js 会在需要时加载对应的代码块。

预加载：

Next.js Link 预加载：使用 <Link> 组件的 prefetch 属性。在嵌套路由中，当用户可能会导航到某个子路由时，可以提前预加载该子路由的代码。例如：

import Link from 'next/link';
const ParentPage = () => {
  return (
    <div>
      <Link href="/parent/child" prefetch>
        <a>Go to Child Page</a>
      </Link>
    </div>
  );
};

静态资源预加载：对于嵌套路由页面可能用到的静态资源（如图片、字体等），可以使用 <link rel="preload"> 在 HTML 头部进行预加载。在 Next.js 中，可以在 _document.js 文件中添加：

import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link rel="preload" href="/child - page - image.jpg" as="image" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
export default MyDocument;

SEO 策略

页面元数据：

动态生成元数据：在每个嵌套路由页面中，根据页面内容动态生成元数据（title、description、keywords 等）。在 Next.js 中，可以使用 next/head 组件。例如：

import Head from 'next/head';
const ChildPage = ({ data }) => {
  return (
    <div>
      <Head>
        <title>{data.title}</title>
        <meta name="description" content={data.description} />
        <meta name="keywords" content={data.keywords} />
      </Head>
      {/* 页面内容 */}
    </div>
  );
};
export async function getStaticProps(context) {
  const data = await fetchData(context.params.id);
  return {
    props: {
      data
    },
    revalidate: 60 * 60 * 24 // 一天重新验证一次
  };
}
export async function getStaticPaths() {
  const paths = await getAllPaths();
  return { paths, fallback: false };
}

规范元数据格式：遵循 SEO 最佳实践，确保 title 标签简洁明了且包含关键信息，description 标签能准确概括页面内容，长度控制在合理范围内（一般 description 150 - 160 字符左右）。

结构化数据：

添加 JSON - LD 数据：在嵌套路由页面中添加 JSON - LD 格式的结构化数据，帮助搜索引擎更好地理解页面内容。可以在 next/head 组件中添加 <script type="application/ld+json">。例如，对于一篇文章详情页（嵌套路由）：

import Head from 'next/head';
const ArticlePage = ({ article }) => {
  const structuredData = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    'headline': article.title,
    'datePublished': article.publishedDate,
    'author': {
      '@type': 'Person',
      'name': article.author.name
    },
    'articleBody': article.content
  };
  return (
    <div>
      <Head>
        <script type="application/ld+json">{JSON.stringify(structuredData)}</script>
      </Head>
      {/* 文章内容 */}
    </div>
  );
};

URL 结构优化：
- 保持清晰简洁：嵌套路由的 URL 应该清晰地反映页面的层次结构和内容。例如，使用 /parent - page/child - page - slug 这样的格式，避免使用过长或复杂的参数。
- 使用规范 URL：在必要时，使用 rel="canonical" 标签指定规范 URL，防止因重复内容导致的 SEO 问题。可以在 next/head 组件中添加：
```
import Head from 'next/head';
const DuplicatePage = () => {
  return (
    <div>
      <Head>
        <link rel="canonical" href="https://example.com/parent - page/child - page" />
      </Head>
      {/* 页面内容 */}
    </div>
  );
};
```

星途面试题库

面试题：Next.js嵌套路由下的性能优化与SEO策略

知识考点

面试题答案

性能优化

SEO 策略