Next.js SSR未渲染预期HTML咨询：为何仅返回空div与JSON数据？

这种情况不正常，你的理解是对的：使用getServerSideProps的页面应该在服务端完成完整HTML渲染，页面源代码里应该能看到<article>这类实际内容标签，而不是只有JSON数据脚本。

可能的问题点：

• 组件渲染逻辑被限制在客户端执行：比如你在组件里加了if (typeof window !== 'undefined')这类判断，把文章内容的渲染放到了这个分支里，导致服务端渲染时跳过了这部分，只输出骨架。
• 数据传递错误：检查getServerSideProps的返回值，是否正确通过return { props: { 你的数据 } }把数据传递给页面组件。如果返回格式错误，组件拿不到数据就无法渲染内容。
• 依赖客户端专属API：组件里使用了window、document这类仅浏览器环境存在的对象，服务端渲染时会触发错误，Next.js会跳过出错部分的渲染，转而在客户端补全。
• 组件未正确接收props：页面组件的参数是否正确解构了传入的数据，比如有没有拼写错误（比如把posts写成post）。

正确示例参考：

// pages/index.js
export async function getServerSideProps() {
  // 服务端请求数据
  const res = await fetch('https://api.example.com/blog-posts');
  const posts = await res.json();

  return {
    props: { posts }, // 传递数据给页面组件
  };
}

export default function Home({ posts }) {
  // 直接基于服务端传递的数据渲染内容
  return (
    <div className="home">
      {posts.map(post => (
        <article key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

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