Next.js 13.5(App Router)禁用JS后无HTML渲染的SEO问题求助

可能原因及对应解决方案 #

1. 子组件包含服务器端不兼容代码 #

你的首页是服务器组件，但如果导入的子组件（如Header、BlogSection、Faq等）标记了'use client'且包含浏览器专属API（如window、document），且未做环境判断，会导致服务器渲染失败，无法生成完整HTML。

解决步骤：

• 检查所有子组件代码，找出依赖浏览器API的部分，用环境判断包裹：

  if (typeof window !== 'undefined') {
    // 仅在客户端执行的逻辑，比如访问window
  }
  

• 对于必须在客户端执行的逻辑，使用useEffect包裹（useEffect仅在客户端触发）：

  'use client';
  import { useEffect } from 'react';
  
  function Header() {
    useEffect(() => {
      // 客户端专属逻辑
    }, []);
    // ...其他渲染代码
  }
  

2. 客户端组件依赖客户端状态初始化渲染 #

如果子组件是客户端组件，且初始渲染依赖useState默认值或useEffect获取的数据，服务器端无法生成对应HTML，禁用JS后内容不会显示。

解决步骤：

• 在服务器组件（首页Home）中预先获取所有需要的数据，通过props传递给客户端组件。例如：

  // Home页面（服务器组件）
  export default async function Home() {
    // 服务器端获取博客数据
    const blogPosts = await fetchBlogPosts();
    return (
      <main>
        {/* 传递数据给客户端组件 */}
        <BlogSection posts={blogPosts} />
      </main>
    );
  }
  

• 确保客户端组件仅使用props中的数据做初始渲染，避免依赖客户端状态生成核心内容。

3. 验证服务器渲染输出 #

用curl命令直接请求首页，检查返回的HTML是否包含完整内容：

curl https://your-domain.com

如果返回的HTML中<main>标签为空或缺少内容，说明服务器渲染时组件未正确生成HTML。此时需要：

• 检查组件的条件渲染逻辑，确保服务器端不会跳过核心内容的渲染。
• 查看Next.js开发服务器的控制台日志，排查是否有渲染错误。

4. 检查Next.js配置 #

• 确保next.config.js中没有错误配置影响静态生成，比如output: 'export'需要确保所有页面都是静态可生成的。
• 尝试执行next build && next export，查看out目录下生成的静态HTML文件是否包含完整内容。如果生成的HTML不完整，说明构建过程中存在问题。

5. Screaming Frog爬取配置 #

确保Screaming Frog的爬取设置正确：

• 关闭「Render JavaScript」选项，模拟无JS环境爬取。
• 检查是否允许爬取Next.js的路由（默认首页是/，无需特殊配置）。
• 如果爬取时返回404或空内容，确认服务器能正常响应非JS请求。

额外排查点 #

• 检查所有图片和资源的导入是否正确，Next.js在服务器端会处理public目录下的资源，确保路径无误。
• 如果使用了第三方UI组件库，确认其支持服务器端渲染（SSR），避免使用仅支持客户端渲染的组件。

内容的提问来源于stack exchange，提问作者pedro