Understanding the 'use client' Directive in Next.js: Client-Side Components Explained

Hey guys, in this article, we’re going to explore why we use the 'use client' directive in the app router version of Next.js. We'll also dive into what pre-rendering is, the difference between server components and client components, and how these concepts all connect to 'use client.' By understanding these concepts, you'll be able to improve your Next.js skills. So, let’s get started with pre-rendering in Next.js!

What is Pre-rendering in Next.js?

Pre-rendering in Next.js, or generation, is a method of creating HTML for each page in advance, making it beneficial for both SEO and performance. Next.js uses pre-rendering by default, allowing for both Static Generation and Server-Side Rendering, and this method happens on the server, rather than on the client or in the browser.

What is 'use client'?

In Next.js, you can choose to pre-render your pages on the server or render them on the client in the browser. If you want your components to be generated or pre-rendered by the server, you don’t need to do anything—by default, all components run on the server in Next.js. But if you want your components to run on the client, you have to add "use client" at the top of your component. "use client" is a convention used to define client components.

Note: If you need to use hooks or handle events in your code, your component must be a client component, so you’ll need to add "use client". If you’ve already added "use client" in the parent component, you don’t need to add it again in every child component. All the child components will automatically be treated as client components.

Finally, you can read the complete articles about CSR, SSR, SSG, and ISR.