search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
127k stars 26.99k forks source link

Long TTFB Vercel Nextjs 13 app router with dynamic routes #54280

Closed oliverkidd closed 1 year ago

oliverkidd commented 1 year ago

Verify canary release

Provide environment information

Disclosure: I have installed the latest canary and the issue persists. 
In fact the issue is worse as the latest canary causes:
'failed to set fetch cache' on build so I cant deploy with it.

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:15:09 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 20.5.1
      npm: 9.8.0
      Yarn: 1.22.19
      pnpm: 8.6.12
    Relevant Packages:
      next: 13.4.12
      eslint-config-next: 13.4.12
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6

Which area(s) of Next.js are affected? (leave empty if unsure)

Data fetching (gS(S)P, getInitialProps), Dynamic imports (next/dynamic), Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue or a replay of the bug

na

To Reproduce

Setup

Our project has ~1300 pages with nested dynamic routes. Eg:

└── /
    ├── prefix/
    │   └── [dynamic1] - present in all but 5 routes/
    │       └── prefix2/
    │           └── [dynamic2] - present in ~90% routes/
    │               └── [dynamic3] - present in ~70% routes
    ├── other route 1
    ├── other route 2
    ├── other route 3
    └── ... few others

We are using mantine library for components, stripe for payments, google recaptcha (async deferred)

ALL data fetching is conducting on page.tsx level, and none of the dynamic route page.tsx files are "use client", but the vast majority of components they contain are.

Describe the Bug

Deploying an app router nextJs project and seeing >1s ttfb on page reload for all routes, including test routes just containing an empty div. The TTFB is almost entirely dedicated to 'waiting' for backend processing.

Have tried to deploy to netlify/AWS to rule out vercel as the cause and netlify the issue is similar but AWS doesnt seem to deploy nextJs13 (with out version) from our efforts.

Expected Behavior

From what I expec, a SSR site should be snappy and not have 1s load times. What possibly takes that time up? I can only think of compiling?

Attempts so far:

Current position

Stuck. The only remaining idea would be to make better use of suspense? However, having tried that - no luck.

I have also noticed that a simple page.tsx for the home route with nothing but an empty div within does not statically render. What would cause that behaviour? None of the parent layout/providers components depend on any dynamic functions that would opt them and their children out of dynamic rendering.

Would appreciate any individuals currently running a nextJs app dir project with dynamic routes to get in touch with their metrics on ttfb and how/if they encountered issues like this!

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Vercel

Jared-Dahlke commented 1 year ago

Yeah I had to ditch next because of this. I am having 4-5 second page load times in dev on simple pages with no api calls

oliverkidd commented 1 year ago

I’m referring to production builds as dev is always going to compile on request. But I assume you saw it there too?

osehmathias commented 1 year ago

@Jared-Dahlke - out of interest, what did you ditch to?

Jared-Dahlke commented 1 year ago

@Jared-Dahlke - out of interest, what did you ditch to?

I converted my companies app from vite to nextjs 13 pages, then to app dir, but wasn't happy with the performance so went back to vite .

A handful of problems I encountered with app dir:

  1. Slow page loads in dev (mentioned here )
  2. No importing stuff from dot. For Eg you can't import colors from "mycolors" and then use colors.black. I had all my api calls in an object like that so I would have had to rewrite all that
  3. We use auth0 and the official next auth0 has some problems with app dir they talk about them on the read me.
  4. Couldn't access request in server components which made it much less useful than getServerSideProps

Overall I liked it and I've already upgraded one of my old side projects to app dir . But for something big and complex I just couldn't make it work . I will probably try again soon though

Jared-Dahlke commented 1 year ago

@Jared-Dahlke - out of interest, what did you ditch to?

I converted my companies app from vite to nextjs 13 pages, then to app dir, but wasn't happy with the performance so went back to vite .

A handful of problems I encountered with app dir:

  1. Slow page loads in dev (mentioned here )
  2. No importing stuff from dot. For Eg you can't import colors from "mycolors" and then use colors.black. I had all my api calls in an object like that so I would have had to rewrite all that
  3. We use auth0 and the official next auth0 has some problems with app dir they talk about them on the read me.
  4. Couldn't access request in server components which made it much less useful than getServerSideProps

Overall I liked it and I've already upgraded one of my old side projects to app dir . But for something big and complex I just couldn't make it work . I will probably try again soon though

And icing on the cake was it used mantine 5, and mantine doesn't support app dir until v7 alpha.

osehmathias commented 1 year ago

Thanks for the detail @Jared-Dahlke.

I am also getting a bit fed up with Next 13 app dir on a larger project. Will likely move back to 12 or something else until it becomes more stable 😅

github-actions[bot] commented 1 year ago

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.