fix(frontend): force dynamic rendering on marketplace (#10957)

## Changes 🏗️

When building on Vercel:
```
    at Object.start (.next/server/chunks/2744.js:1:312830) {
  description: "Route /marketplace couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error",
  digest: 'DYNAMIC_SERVER_USAGE'
}
Failed to get server auth token: Error: Dynamic server usage: Route /marketplace couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error
    at r (.next/server/chunks/8450.js:22:7298)
    at n (.next/server/chunks/4735.js:1:37020)
    at g (.next/server/chunks/555.js:1:31925)
    at m (.next/server/chunks/555.js:1:87056)
    at h (.next/server/chunks/555.js:1:932)
    at k (.next/server/chunks/555.js:1:25195)
    at queryFn (.next/server/chunks/555.js:1:25590)
    at Object.f [as fn] (.next/server/chunks/2744.js:1:316625)
    at q (.next/server/chunks/2744.js:1:312288)
    at Object.start (.next/server/chunks/2744.js:1:312830) {
  description: "Route /marketplace couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error",
  digest: 'DYNAMIC_SERVER_USAGE'
}
```
That's because the `/marketplace` page prefetches the store agents data
on the server, and that query uses `cookies` for Auth. In theory, those
endpoints can be called without auth, but I think if you are logged that
affects the results.

The simpler for now is to tell Next.js to not try to statically render
it and render on the fly with caching. According to AI we shouldn't see
much difference performance wise:

> Short answer: Usually no noticeable slowdown. You’ll trade a small
TTFB increase (server renders per request) for correct behavior with
cookies. Overall interactivity stays the same since we still dehydrate
React Query data.
Why it’s fine:
Server already had to fetch marketplace data; doing it at request-time
vs build-time is roughly the same cost for users.
Hydration uses the prefetched data, avoiding extra client round-trips.
If you want extra speed:
If those endpoints don’t need auth, we can skip reading cookies during
server prefetch and enable ISR (e.g., revalidate=60) for partial
caching.
Or move the cookie-dependent parts to the client and keep the page
static.

## Checklist 📋

### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Run the app
  - [x] Page load marketplace is fine and not slow 
  - [x] No build cookies errors 


### For configuration changes:

None
This commit is contained in:
Ubbe
2025-09-19 17:24:08 +09:00
committed by GitHub
parent e5d870a348
commit 0c363a1cea

View File

@@ -9,6 +9,8 @@ import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
import { MainMarkeplacePage } from "./components/MainMarketplacePage/MainMarketplacePage";
import { MainMarketplacePageLoading } from "./components/MainMarketplacePageLoading";
export const dynamic = "force-dynamic";
// FIX: Correct metadata
export const metadata: Metadata = {
title: "Marketplace - AutoGPT Platform",