Add support for critical CSS inlining with App Router

[mlstubblefield]

Link to the code that reproduces this issue

https://github.com/mlstubblefield/nextjs-optimize-css

To Reproduce

1. Create a new next.js repository on vercel
2. Update next config const nextConfig = { experimental:{ optimizeCss: true } }
3. Add critters package - npm install critters
4. Host the page on vercel
5. Run the homepage of the app through webpage test https://www.webpagetest.org/result/231027_BiDcZF_FDJ/1/details/#waterfall_view_step1

Critical CSS is blocking :( and not optimized!

Current vs. Expected behavior

Before the appDir, critical css was inlined and FCP would be really really fast. Now, you can see that FCP is behind the blocking CSS!

Just look at this waterfall https://www.webpagetest.org/result/231027_BiDcZF_FDJ/1/details/#waterfall_view_step1

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

I'm using vercel, buuuut....

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 18.16.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.1-canary.0
  eslint-config-next: 13.5.6
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Additional context

No response

[thaophamvan]

There is no way to inline critical CSS on App router. I can't find any solution to do it now. I don't know why Nextjs not support for App router

@mlstubblefield do you have any solution to solve it now?

[mlstubblefield]

Yea, it's a bummer- we saw huuuge improvements in our FCP when we first added critters, so I'm sad to see it no longer function.

[thaophamvan]

Is there any update on this issue?

Edit by maintainers: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[leerob]

Critters does not support streaming. This experimental flag works in the Pages Router (no streaming) but does not work with the App Router (has streaming). I've updated this issue to be a feature request and converted it to a discussion.