NextJs app router prefetch in dyanmic generated page

64 views Asked by At

I have an issue in NextJs app router. The setup is like this:

app
  -store
    -page.js
    [regionName]
      [placeName]
        [storeName]

In store page I have a list of links that routes to the storeName and regionName pages. regionName page also have links that routes to storeName.

All pages and components are server components.

I have a StoreCard component that contains a link that looks like this

<Link href={`/store/${url_key}`}>Go to store</Link>

From the store page link works as it should. Problem is when I navigate to regionName page and click on the link to navigate to storeName, about 100 requests are made to the correct link plus a query of ?_rsc=shortStringId with a status of 200 and a content type of text/x-component.

After a few seconds an error is thrown

Unhandled Runtime Error:
async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

When I build the project i see that storeName page is static generated (prerendered as static content) and all other pages are generated dynamically (server-rendered on demand using Node.js).

Should this be a problem with Next Link prefetch?

0

There are 0 answers