next.js

Does wrapping entire app in a client side component makes the app a client side rendered application in NextJS?

  1. In NextJS doesn't wrapping layout.js content with SessionWrapper which is a client side component makes the entire app client side rendered?

  2. Someone please explain in detail, Why layout.js content is still rendered on server side?

layout.js file :

import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import SessionWrapper from "@/components/SessionWrapper";

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <SessionWrapper>
                    <Navbar />
                    <div className="text-white min-h-screen relative">
                        {children}
                    </div>
                    <Footer />
                </SessionWrapper>
            </body>
        </html>
    );
}

SessionWrapper component :

"use client"
import { SessionProvider } from "next-auth/react"

export default function SessionWrapper({children}) {
  return (
    <SessionProvider>
      {children}
    </SessionProvider>
  )
}
Solution

  • if you are rendering with ssr or ssg, the component in _app.js would be server component .when we pass server component to client component the server component renders on server and along with placeholder in client component is sent to client where further rendering takes place.

    if you are rendering with csr entire render process takes place on client