NextJS 13中getServerSideProps未触发，页面数据获取失败求助

你当前页面位于/app/posts/page.js，属于Next.js的App Router架构，但getServerSideProps是旧版Pages Router专属的数据获取API，在App Router中不会被框架自动识别执行，这就是函数不自动运行、数据传不到组件的核心原因。

正确实现方式（App Router） #

App Router中，页面组件默认是Server Component，直接支持在组件内部用async/await获取数据，无需额外导出特殊函数：

// /app/posts/page.js
async function AllPosts() {
    let data = [];
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/users", {
            // 如需类似getServerSideProps的实时数据效果，添加此配置
            next: { revalidate: 0 }
        });
        data = await response.json();
        console.log(data); // 服务器端控制台会输出数据
    } catch (error) {
        console.error("Error fetching data:", error);
    }

    return (
        <div>
            {data.map((item) => (
                <div key={item.name}>
                    <div>{item.name}</div>
                    <p>{item.email}</p>
                </div>
            ))}
        </div>
    );
}

export default AllPosts;

关键说明 #

• App Router不再支持getServerSideProps、getStaticProps等Pages Router的数据获取方法，取而代之的是组件内异步获取、generateStaticParams等新机制。
• 组件内部的fetch请求默认会被Next.js缓存，若需要每次请求都获取最新数据（对应原getServerSideProps的行为），需添加next: { revalidate: 0 }配置。
• 组件内的console.log会输出在服务器端控制台，而非浏览器控制台，这点和Pages Router的getServerSideProps一致。

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