I have this very basic page using the app directory. However during build I got this warning.

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

Based on the docs, it mentions that if a page uses useSearchParams . Will cause the closest suspense boundary to be client-side rendered. However on this page I don't even use useSearchParams.

I managed to locate the issue which is from my root layout.client.ts which includes the following.

"use client";

import { useOnComplete } from "../lib/helper/router-event";

export default function RootLayoutClient({ children }: React.PropsWithChildren) {
    useOnComplete();
    return <>{children}</>;
}

This is the content of router-event

"use client";

import { usePathname, useSearchParams } from "next/navigation";
import NProgress from "nprogress";
import { useEffect } from "react";

export function onStart() {
    NProgress.start();
}

export function onComplete() {
    NProgress.done();
}

export function useOnComplete() {
    const pathname = usePathname();
    const searchParams = useSearchParams();
    useEffect(() => onComplete(), [pathname, searchParams]);
}

The purpose of this file is to create a loader similar to how we have it back in the the pages directory. Sourced from https://github.com/joulev/nextjs13-appdir-router-events.

However I have already wrapped my components within "use client" shouldn't NextJS able to seperate betwen client and server side rendering?