Next.js中为何单新闻页初始HTML无动态API数据渲染？

问题场景 #

我正在开发一个Next.js应用，包含两个页面：

• 好莱坞页面：服务端渲染，通过异步服务端组件Page_reuseable获取API数据并传给客户端组件，初始HTML响应中能看到动态数据（浏览器网络面板可查）。
• 单新闻页面：同样采用服务端组件获取数据后传给客户端组件渲染，但初始HTML中无动态API数据，仅在页面底部存在非HTML格式的内容，导致页面字数少，爬虫无法识别内容，不利于SEO。

可能原因 #

1. 客户端组件依赖useEffect等客户端生命周期钩子渲染内容，服务端渲染阶段未生成对应HTML。
2. 服务端组件获取的数据未正确传递给客户端组件，或客户端组件未直接使用传入的props，而是重新发起客户端请求。
3. 单新闻页面意外启用了dynamic="force-static"或静态生成（SSG）模式，导致服务端未实时渲染数据；或页面根组件错误标记为客户端组件（添加了'use client'），无法在服务端执行数据获取。

排查与修复步骤 #

1. 确认页面根组件的服务端身份 #

确保单新闻页面的根组件未添加'use client'指令，仅在需要交互的子组件中使用该指令。服务端组件才能在服务器端执行数据获取并生成带动态内容的HTML。

示例代码：

// 单新闻页面根组件（服务端组件）
async function NewsPage({ params }: { params: { id: string } }) {
  // 服务端异步获取新闻数据
  const newsData = await fetch(`https://your-api.com/news/${params.id}`).then(res => res.json());
  // 传递数据给客户端组件
  return <NewsClientComponent data={newsData} />;
}

export default NewsPage;

2. 修正客户端组件渲染逻辑 #

客户端组件需直接使用服务端传入的props渲染内容，避免依赖useEffect初始化核心展示数据（仅客户端交互所需的额外数据可使用）。

反例（错误做法）：

'use client';
import { useEffect, useState } from 'react';

function NewsClientComponent() {
  const [data, setData] = useState(null);
  useEffect(() => {
    // 客户端重新请求数据，服务端渲染时无内容
    fetch('/api/news/1').then(res => res.json()).then(setData);
  }, []);
  
  return data ? <div>{data.content}</div> : null;
}

正例（正确做法）：

'use client';

// 直接使用服务端传入的props渲染
function NewsClientComponent({ data }: { data: { title: string; content: string } }) {
  return (
    <article>
      <h1>{data.title}</h1>
      <div className="news-content">{data.content}</div>
    </article>
  );
}

3. 验证页面渲染模式配置 #

检查单新闻页面的渲染模式配置，确保未强制静态生成。若需每次请求都在服务端渲染，可添加dynamic配置：

// 强制动态服务端渲染
export const dynamic = 'force-dynamic';

async function NewsPage({ params }: { params: { id: string } }) {
  const newsData = await fetch(`https://your-api.com/news/${params.id}`).then(res => res.json());
  return <NewsClientComponent data={newsData} />;
}

export default NewsPage;

4. 验证初始HTML生成结果 #

打开单新闻页面后右键查看页面源代码，搜索新闻标题、内容等关键词。若能找到对应内容，说明服务端渲染正常；若找不到，回到前面步骤逐一排查。

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