Next.js 13中getServerSideProps未调用，无法加载帖子

问题描述 #

在Next.js 13项目中，页面仅渲染<h1>All Posts</h1>，帖子列表无法加载；调试时发现getServerSideProps未被调用，请求从未发出。相同逻辑在纯React环境中可正常运行。

代码重现 #

Main.js #

import React from "react";

export const getServerSideProps = async () => {
const res = await fetch("https://jsonplaceholder.typicode.com/posts");
let allPosts = await res.json();

return {
props: {
  allPosts: allPosts.map((post) => post.title),
  },
 };
};

const Posts = ({ allPosts }) => {
return (
<div>
  <h1>All Posts</h1>
  {allPosts?.map((post, idx) => (
    <div key={idx}>{post}</div>
  ))}
  </div>
   );
 };

export default Posts;

layout.jsx #

export default function RootLayout() {
 return (
 <html lang="en">
  <head>
    <title>Digital</title>
  </head>
  <body>
    <Main></Main>
  </body>
</html>
 );
}

问题原因 #

1. 文件命名不符合App Router规范：Next.js 13 App Router要求页面组件必须命名为page.js/page.jsx，你的Main.js不会被识别为页面组件，导致服务端数据逻辑无法触发。
2. App Router不兼容getServerSideProps：该API是Pages Router专属特性，App Router采用组件内异步数据获取的方式替代。
3. RootLayout使用错误：App Router的根布局需要接收children属性渲染页面内容，而非硬编码组件，且原代码缺少Main组件的导入语句。

解决方案 #

方案一：适配App Router规范（推荐） #

1. 重命名页面文件：将Main.js重命名为app/page.js（App Router默认首页路径）。
2. 改用异步组件获取数据：

// app/page.js
const Posts = async () => {
  // 添加cache: 'no-store'实现类似getServerSideProps的实时数据获取
  const res = await fetch("https://jsonplaceholder.typicode.com/posts", { cache: 'no-store' });
  const allPosts = await res.json();
  const postTitles = allPosts.map(post => post.title);

  return (
    <div>
      <h1>All Posts</h1>
      {postTitles.map((title, idx) => (
        <div key={idx}>{title}</div>
      ))}
    </div>
  );
};

export default Posts;

3. 修正RootLayout：

// app/layout.jsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <title>Digital</title>
      </head>
      <body>{children}</body>
    </html>
  );
}

方案二：切换回Pages Router #

若需继续使用getServerSideProps，可切换到Pages Router模式：

1. 创建pages目录，将原Main.js移入并命名为pages/index.js。
2. 创建全局布局文件：

// pages/_app.js
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <title>Digital</title>
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

此时原getServerSideProps逻辑将正常生效。

内容的提问来源于stack exchange，提问作者Captai-N