[NEXT-1125] Misleading deopted-into-client-rendering warning on build

[sophiebits]

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:03:51 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T6000
    Binaries:
      Node: 19.5.0
      npm: 9.3.1
      Yarn: 1.22.19
      pnpm: 8.2.0
    Relevant packages:
      next: 13.3.1-canary.8
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

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

App directory (appDir: true)

Link to the code that reproduces this issue

https://stackblitz.com/edit/vercel-next-js-f51au5 (you may have to download locally; I couldn't get next build to run in stackblitz)

To Reproduce

If the root page or layout calls headers() or cookies() outside of any Suspense boundary, then next build outputs this warning for each affected page:

warn  - Entire page / deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /

If it's the root layout that uses that dynamic data, it prints this for every single route.

While it's true that the page can't be statically generated, it's not true that it all deopted into client-side rendering. The page does SSR just fine.

Describe the Bug

Error message is misleading.

Expected Behavior

The error should not appear, or should have different text.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1125

[HamAndRock]

Having the same issues after updating to 13.3/canary. #48404 this is probably the root cause if you are also using route groups.

[Nickman87]

Same issue here, all my pages (inside of groups) give me this same error/warning and 0B size.
I don't use the useSearchParams hook anywhere

[RyanGaudion]

Same issue here. I think it's due to having a "use client" component in my root layout?

[Nickman87]

@RyanGaudion I think in that case it's normal that you deopt into client rendering yes... :)

[RyanGaudion]

@Nickman87 my understanding of this from here was that client components were "prerendered on the server and hydrated on the client" and hence the page should still be able to be pre-rendered on server and only add interactivity to my cookie banner (client component referenced in the root layout) on client side" however I get this warning:

Entire page /blog/[slug] deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /blog/[slug]

Sorry for my misunderstanding but should this be the expected behaviour that the whole page is no longer able to be pre-rendered due to a single client component that is used in the root layout?

[HamAndRock]

@RyanGaudion root layout can't be a client component that's in docs, hovewer if you are getting this error and you are not using useSearchParams anywhere or they are wrapped in Suspense/Dynamic Rendering this should not be happening. It started doing this on 13.3 try using 13.2 to see if it's still there. I think the root cause here are the route groups

[keegandonley]

I'm seeing this warning as well, but only on routes that don't use the experimental-edge runtime. My few routes that use that don't emit the waning unless I change the runtime back to default.

[borispoehland]

Having the same issues after updating to 13.3/canary. #48404 this is probably the root cause if you are also using route groups.

I can confirm this. The route group causes the warning to appear

[RyanGaudion]

Issue resolved for me by wrapping my analytics component (in the root layout) in a suspense boundary

[zartinn]

I have the same problem as @RyanGaudion
I think this warning is not correct as it even appears after I commented out all my client side components in the RootLayout and and page that it was given me the warning.

And when if I leave my client side components in my layout and my page. My pages are still rendered on the server looking into the HTML that is coming back. Something is definitely odd here with the warning.

[Arctomachine]

Issue resolved for me by wrapping my analytics component (in the root layout) in a suspense boundary

In my case the cause of problem was client side component for parsing analytic params from url. The component was called in root layout. After adding it I got this warning for every page. After wrapping it into suspense everything is fixed.
The silly thing about it is that component could not possibly prevent pages from generating as the only thing it returns as jsx is always null.

[KingXP-Pythoner]

I immediately started experiencing this client-side deopting warning after I upgraded to v13.3 and higher. I wasn't using useSearchParams and because I had no errors before the upgrade, I was quite confused what the issue was. I attempted all the solutions including suspense boundaries and removing the use of cookies(). Only solution that worked was to export dynamic=force-dynamic in my /dashboard layout.tsx to force dynamic rendering. I was not satisfied with the fact I had to resort to this solution so after tracking my deployments, I noticed the major change I made was the version upgrade. Once I downgraded to 13.2, the warnings disappeared. Also note that I was using route groups in v13.2 as well as v13.3 and above.

Edit: Important discovery.
I was excited to watch the announcement that the app router is now stable and tried to upgrade to 13.4 in hopes this issue was fixed but i was dissapointed. So i did a little more digging and lo and behold, the issue was Clerk auth provider. It is supposed to work for RSC's but the error is eliminated when I unwrap the component from the body tag in RootLayout.tsx. This is a shame as I dont even know if they recognize their package is causing this warning in nextjs.

[red2678]

Still having this issue on 13.4

[boatilus]

In my case, I also use route groups and noticed this behavior in 13.4. After opting all routes into the Edge runtime (via exporting runtime = 'edge'), I no longer see this warning.

[arclogos132]

My case was using supabase that used headers() when creating the client.

[F-Moody]

import '../../styles/globals.css'
import MessageToast from '../(shared)/(components)/messageToast'
import Head from './home/head'
import { getServerSession } from 'next-auth'
import { authOptions } from '../../pages/api/auth/[...nextauth]'
import PageContextProvider from './home/(components)/pageContextProvider'
import Logo from '../(shared)/(components)/Logo'
import ProfileDropDown from '../(shared)/(components)/profileDropDown'
import Navbar from '../(shared)/(components)/navbar'

export default async function RootLayout({ children }) {
  const session = await getServerSession(authOptions)

  return (
    <html>
      <Head />
      <body>
        <div className="flex flex-col h-full">
          <div className="flex py-4 px-10 justify-between mobile:hidden">
            <Logo />
            {<ProfileDropDown user={session?.user} />}
          </div>
          <div className="grid grid-cols-6 h-full large:flex large:flex-col">
            <div className="px-6 py-10 col-span-1 flex flex-col gap-2 large:w-full large:h-[52px] large:p-0">
              <Navbar isLoggedUser={!!session?.user} />
            </div>
            <div className="col-span-5 mobile:flex mobile:flex-col">
              <PageContextProvider session={session}>
                <MessageToast />
                {children}
              </PageContextProvider>
            </div>
          </div>
        </div>
      </body>
    </html>
  )
}

I started to have the same problem in every route.
This is an example of a Layout component.

I also tried to wrap the PageContextProvider in a Suspense but nothing.
Even leaving just children without the Provider, still same warning
This issue wasn't here before upgrading.

The thing is that if i check the page source i still see the html being sent.
Is the warning just faulty?

[polnikale]

I have this warning when I have a "Link" component inside my static page. And when I hover it - I see the warning. I mean it's expected, right?

When I set prefetch={false} to the link - the warning is gone

[destroyer22719]

Hello guys, I found out other ways that would cause that warning, if you guys could check my issue out it might be able to solve your problems

[mkimbo]

I was experiencing the same and solved it by wrapping my client components in Root Layout with Suspense. I'm on v13.4

[yersultanur]

import { Suspense } from "react"
import Link from "next/link"
import { getDictionary } from "@/get-dictionary"
import { Locale } from "@/i18n-config"

import getMarketingConfig from "@/config/marketing"
import { getCurrentUser } from "@/lib/session"
import { cn } from "@/lib/utils"
import { MainNav } from "@/app/[lang]/components/main-nav"
import { SiteFooter } from "@/app/[lang]/components/site-footer"
import LocaleSwitcher from "@/app/[lang]/components/switcher"
import { buttonVariants } from "@/app/[lang]/components/ui/button"
import UserAccountNav from "@/app/[lang]/components/user-account-nav"

interface MarketingLayoutProps {
children: React.ReactNode
params: {
lang: Locale
}
}

export default async function MarketingLayout({
children,
params,
}: MarketingLayoutProps) {
const user = await getCurrentUser()
const dict = await getDictionary(params.lang as Locale)
const marketingConfig = await getMarketingConfig({
params: { lang: params.lang },
})
return (

      <span className="absolute right-32 flex">
        <LocaleSwitcher />
      </span>
      <nav>
        <Suspense fallback={<p>Загрузка личных данных...</p>}>
          {user ? (
            <UserAccountNav
              user={{
                firstName: user.firstName,
                email: user.email,
              }}
              dict={dict.UserAccountNav}
              lang={params.lang}
            />
          ) : (
            <Link
              href={`/${params.lang}/login`}
              className={cn(
                buttonVariants({ variant: "secondary", size: "sm" }),
                "px-4"
              )}
            >
              {dict.nav.login}
            </Link>
          )}
        </Suspense>
      </nav>
    </div>
  </header>
  <main className="flex-1">{children}</main>
  <SiteFooter dict={dict} />
</div>

)
}

Here is a problem, when I have await getCurrentUser issue stays no matter what, I don't know how I can wrap it to suspense

[timneutkens]

Tracked this down to an accidental conflict between two error digests. Fixed it in #50219. It would specifically incorrectly show up when calling cookies / headers and such.

[github-actions]

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