Next.JS 静态生成在使用“map”方法时对 SEO 不是最优的答案

【问题标题】：Next.JS Static Generation not optimal for SEO when using `map` methodNext.JS 静态生成在使用“map”方法时对 SEO 不是最优的
【发布时间】：2026-02-02 20:30:02
【问题描述】：

我目前正在使用Next.JS 创建一个static website，主要目标是拥有一个非常好的 SEO 优化网站。一切正常，网站使用 Vercel 正确部署，但我注意到部分内容没有直接出现在 HTML 文件中。

例如，我有一个组件循环一个数据数组，使用数组map 方法，如下所示：

{imageTexts.map((image) => (
          <ImageText
            key={image.title + 'TitleImage'}
            title={image.title}
            description={image.description}
            size={imagesSize}
            image={image.image}
          />
        ))}

网站部署到Vercel 后，我在HTML 文件中搜索数据数组(imageTexts) 中包含的信息/字符串，但找不到它们。我猜 Next.JS 使用 javascript 来定位某种 div，然后循环遍历它自己的 JSON 文件以动态显示内容。

对我来说，这似乎扼杀了static websites 超过SPA 的很多 SEO 优势。有什么办法可以将这些字符串直接放在我的 HTML 文件中？我仍然不能 100% 确定这是由 map 方法引起的，但我没有找到任何其他解释。特别是因为其他动态加载的组件没有同样的问题。例如，这个组件字符串可以在HTML文件中找到，没有问题：

{title ? (
        <Text
          type="h2"
          textAlign="center"
        >
          {title}
        </Text>
      ) : null}

【问题讨论】：

标签： reactjs static next.js seo vercel

【解决方案1】：

如果您在服务器上映射 ImageTexts 并且该组件呈现 HTML 标记，则该 HTML 应该在首页加载时发送，如果您执行 CTRL+U 或禁用 javascript，您可以看到它。

【讨论】：

执行 CTRL + U 后看不到文本，这就是我实际面临的问题...我刚刚检查了您关于禁用 javascript 的建议，我发现了一些有趣的东西：我可以看到映射对象的图像，但我看不到字符串。我会进一步调查......
好的，我刚刚找到原因...文本/字符串位于解释 Markdown 的组件中。即： import { Remark } from 'react-remark' 显然，它不能很好地与 Next.JS 配合使用。

【解决方案2】：

好的，我刚刚找到了原因。它与map 方法无关。我实际上是在使用名为react-remark 的库中的<Remark> 组件。看来它与 Next.JS 并不能很好地配合

【讨论】：