面试题：Next.js自定义Document组件在SSR和SSG场景下优化SEO的差异及实践

SSR（服务器端渲染）场景下自定义Document组件优化SEO的关键差异点及实践

关键差异点：
- 实时数据获取：SSR在每次请求时渲染页面，可获取最新数据。这意味着SEO相关数据如动态的元标签内容（例如根据用户地理位置或登录状态变化的标题、描述）能实时生成。
- 性能考虑：由于每次请求都需服务器处理渲染，性能开销较大。需注意服务器资源利用，避免渲染时间过长影响SEO（搜索引擎可能不喜欢加载过慢的页面）。
针对性优化实践：
- 动态元标签：例如，根据用户的地区显示不同的页面标题和描述。假设应用是一个电商网站，在日本访问的用户，标题中可包含“日本限定商品”等字样。

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    const userRegion = ctx.req?.headers['x - client - region'];// 假设通过header获取地区信息
    let title = '默认标题';
    let description = '默认描述';
    if (userRegion === 'Japan') {
      title = '日本限定商品 - 电商平台';
      description = '发现日本限定的各类优质商品';
    }
    return {
     ...initialProps,
      title,
      description
    };
  }

  render() {
    return (
      <Html>
        <Head>
          <title>{this.props.title}</title>
          <meta name="description" content={this.props.description} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

性能优化：可使用缓存策略，如Memcached或Redis，缓存频繁访问页面的渲染结果，减少服务器重复渲染。例如，对于一些商品列表页，若数据更新频率不高，可缓存渲染后的HTML片段。

SSG（静态站点生成）场景下自定义Document组件优化SEO的关键差异点及实践

关键差异点：
- 预先生成页面：SSG在构建时生成页面静态文件。SEO数据在构建时确定，适用于内容更新不频繁的页面。
- 构建时间优化：构建时间会影响部署速度。若SEO相关处理复杂，可能导致构建时间过长。
针对性优化实践：
- 静态元标签：以博客网站为例，每篇文章的标题、描述等SEO元数据在构建时确定。

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    const blogPost = ctx.query.blogPost;
    let title = '默认博客标题';
    let description = '默认博客描述';
    // 假设从数据文件或API获取博客文章元数据
    const blogPostsData = {
      'post - 1': {
        title: '第一篇博客 - 技术分享',
        description: '深入探讨技术领域的新知识'
      }
    };
    if (blogPostsData[blogPost]) {
      title = blogPostsData[blogPost].title;
      description = blogPostsData[blogPost].description;
    }
    return {
     ...initialProps,
      title,
      description
    };
  }

  render() {
    return (
      <Html>
        <Head>
          <title>{this.props.title}</title>
          <meta name="description" content={this.props.description} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

构建时间优化：可并行处理构建任务，例如使用next - build - parallel插件，加快构建速度。对于大型项目，还可按需拆分构建任务，只重新构建有变化的部分。

SEO最佳实践通用点

语义化HTML：确保HTML结构清晰，使用合适的标签如<header>、<nav>、<main>、<article>、<section>、<footer>等，便于搜索引擎理解页面内容结构。
图像优化：在<img>标签中添加alt属性，描述图像内容，利于搜索引擎识别图像主题。同时，压缩图像以减少加载时间。
结构化数据标记：使用JSON - LD等格式添加结构化数据，帮助搜索引擎更好地理解页面内容，如文章类型、产品信息等，可能在搜索结果中获得更丰富的展示（如面包屑导航、产品价格等）。

星途面试题库

面试题：Next.js自定义Document组件在SSR和SSG场景下优化SEO的差异及实践

知识考点

面试题答案

SSR（服务器端渲染）场景下自定义Document组件优化SEO的关键差异点及实践

SSG（静态站点生成）场景下自定义Document组件优化SEO的关键差异点及实践

SEO最佳实践通用点