Next.js 中的 getServerSideProps() （使用 App Router）

Question

我尝试接触 Next.js 13（使用 App Router）并遇到了一些问题。我的测试应用程序的结构是：

---/school
------/app
   ------/layout.tsx
   ------/page.tsx
---/src

./app/page.tsx是​

async function Page() {

    const hotels = await hotelService.getAllHotels()

    return (
        <RootLayout>
            <HomePage hotels={hotels}/>
        </RootLayout>
    )
}

export default Page

当下一个构建进行收集页面数据步骤时， hotelService.getAllHotels()通过 URL 地址从 API 请求数据。URL 地址由$API_BACKEND_ENV变量定义，并取决于环境（URL_FRO_DEV=https://1.1.1.1/hotel/all 和 URL_FRO_PROD=https://2.2.2.2/hotel/all）。

该错误来自const res = wait fetch(this.url + "/hotel/all", { cache: 'no-store' })行。如果this.url未定义，则会引发错误。

如何避免收集页面数据并抛出异常？

NEXT JS文档表示getServerSideProps ()不会在下一个构建命令中启动。我尝试在getServerSideProps()内定义hotelService.getAllHotels ()并期望不请求 API。但这不起作用。

async function Page({ data }) {

    return (
        <RootLayout>
            <HomePage hotels={data}/>
        </RootLayout>
    )
}

export async function getServerSideProps() {
    const data = await hotelService.getAllHotels()  <<< I expect that this line is not launched while the <next build> command
    return {
        props: data
    }
}

export default Page

Answer 1

getServerSideProps如果您想要类似于在构建时不运行的行为，请使用dynamic路由配置，如下所示：

// layout.js / page.js / route.js

export const dynamic = "force-dynamic"; //  

async function Page() {
  const hotels = await hotelService.getAllHotels();

  return (
    <RootLayout>
      <HomePage hotels={hotels} />
    </RootLayout>
  );
}

export default Page;

附带说明一下，getServerSideProps它本身不能在app路由器（目录）内工作。此外，路由段仅适用于layout、page和route文件，不适用于普通组件（就像getServerSideProps没有一样）。