Next.js 14 Tutorial - 50 - Server and Client Components

Summary

The video explains the difference between server and client components in Next.js applications. By default, all components in Next.js are server components, which provide benefits like zero bundle size and SEO. However, server components can't use browser APIs or handle interactivity. The video shows how to create a client component using the 'useClient' directive, allowing access to state and browser APIs. It also covers the rendering behavior - client components prerender on the server then execute on client. The video summarizes that server components only run on server, while client components run on both server and client.

Takeaways

• 😀 By default, every component in a Next.js app is a server component, including the default pages
• 👍 Server components provide benefits like zero bundle size, access to server resources, and better SEO
• ⏱ Server components cannot interact with browser APIs or handle interactivity like state
• 💡 Use the `useClient` directive to define client components that can use browser APIs and state
• 📺 Client components render once on the server for pre-rendering, and then client-side for interactivity
• 😵 Server components only render on the server, not on the client
• 🔄 Client components render on server for pre-rendering, then client for interactivity
• ⚙️ The `useClient` directive signals Next.js to execute a component client-side
• 🏃‍♂️ Client components can access browser APIs and handle interactivity
• 💡 Understanding server vs client components is key to using React Server Components

Q & A

What is the default component type in a Next.js application?

By default, every component in a Next.js app is considered a server component, including the root layout and root page components.

How do you create a client component in Next.js?

To create a client component in Next.js, you must include the `useClient` directive at the top of the component file. This signals to Next.js that the component is intended for client-side execution.

Can server components use state and interact with browser APIs?

No, server components cannot use state or interact directly with browser APIs because they are rendered on the server where there is no browser.

Where do client components execute?

Client components execute primarily on the client-side to allow access to browser APIs and interactivity. However, they are also pre-rendered once on the server to allow immediate display of HTML without a blank screen.

What are some benefits of server components?

Benefits of server components include zero bundle size, access to server-side resources, enhanced security, better SEO, etc.

When will a client component log a message?

A client component will log a message in the browser console when rendered on the client-side. It will also log a message in the terminal when pre-rendered on the server.

Why can't a server component use React hooks like useState?

Server components run on the server where there is no concept of state that exists in the browser. React hooks like useState require a client-side environment to work properly.

What is the purpose of pre-rendering client components on the server?

Pre-rendering client components on the server allows the user to immediately see the page's HTML content rather than a blank screen while waiting for client-side JavaScript.

How do you define routes for server and client components?

Routes for both server and client components are defined the same way in Next.js - by creating files under the pages directory. The component type is determined by whether the `useClient` directive is present.

Can a single Next.js application have both server and client components?

Yes, a Next.js application can have a mix of server components and client components defined using the `useClient` directive.

Outlines

00:00

📺 Creating and Using Server and Client Components in Next.js

The first paragraph introduces server and client components in Next.js. It explains that by default, all components in a Next.js app are server components, including layout and page components. It then demonstrates creating a simple About page server component and shows how it runs on the server. It explains limitations of server components in not being able to use browser APIs or handle interactivity. It then walks through creating a Dashboard page client component using the useClient directive, useState hook, and shows how it can access browser APIs and manage state.

05:01

🖥️ Client Component Rendering Behavior and Lifecycle

The second paragraph dives deeper into client component rendering behavior. It shows that client components render once on the server for pre-rendering and optimization, and then mount on the client for interactivity. It reiterates that server components only render on the server, while client components render on both server and client. It summarizes the key difference between server and client components in Next.js and their rendering lifecycle.

Mindmap

The video is abnormal, and we are working hard to fix it.
Please replace the link and try again.

Keywords

💡server components

Components that run on the server side. They bring benefits like zero bundle size, access to server resources, better SEO. But they can't interact with browser APIs or handle interactivity. All components in Next.js are server components by default.

💡client components

Components that run on the client side and can access browser APIs and handle interactivity. They must include the 'useClient' directive. Client components also prerender on the server first to allow immediate display of HTML.

💡useClient directive

A special instruction that signals Next.js to define a component as a client component instead of default server component. It allows access to browser APIs.

💡rendering

The process of generating and displaying output from a component. Core theme of video is rendering behaviors of server vs client components.

💡rehydration

The process of taking prerendered HTML from server and attaching event listeners on client to make it interactive.

💡prerendering

The initial one time rendering of a client component on the server side. Allows component HTML to load immediately.

💡browser APIs

Interfaces provided by web browsers to interact with them programmatically (e.g. DOM). Server components cannot access these.

💡interactivity

Ability for users to interact with and manipulate components. Handled by client components.

💡state

A variable that allows tracking component data over renders. Server components do not have access to React state.

💡optimization

Improving performance. Prerendering client components is an optimization to allow faster first render.

Highlights

By default every component in a Next.js app is considered a server component

Server components run on the server, bringing benefits like zero bundle size, access to server resources, security, and SEO

Server components can't interact with browser APIs or handle user interactivity

To create client components, use the "use client" directive to signal they are for client-side execution

Client components gain access to browser APIs and interactivity

Client components render once on the server for pre-rendering, and then on the client

Server components only render on the server, client components render on server and client

Client component name is confusing - they execute once on server but focus is client rendering

In React Server Components, router components default to server, use "use client" for client ones

Server components provide SEO, security, performance

Client components enable interactivity

Client components prerender on server before client-side hydration

Understand server vs client component rendering lifecycles in Next.js

Like, subscribe, and turn on notifications for more content

See you in the next video!

Transcripts

in our previous video we dived into

react server components which introduced

a dual component model differentiating

between server components and client

components in this video we will put

Theory into practice by creating both

types of components in an xjs

application for this section on

rendering I have created a new nexs

project using the command npx create

next app at lat test followed by the

project name which is rendering hyphen

demo

once the command is executed you should

have a project similar to

mine now diving into the RSC

architecture and its integration with

nxs it is important to note that by

default every component in a NS app is

considered a server

component this includes the root layout

and the root page that come out of the

box with a new next year project let's

create a new component to verify this

suppose we want to add a new about page

to our application we would create a new

file called page. TSX within the about

folder within the app

folder let's populate it with a basic

react

component I will use the pieces Explorer

extension for the code

snippet we're going to insert a next

shes page

component export default function

page let's call this about

page and return an H1 tag that says

about

page just by doing this you have created

a server component let's add a lock

statement to verify this

console.log about server

component if we head to the

browser and navigate to localhost 3000

slab we don't see any log message in the

browser

console instead we see the message in

the terminal where we are running our

application it is clear our component is

a server component this component runs

on the server bringing along all the

benefits of server components such as

zero bundle size access to serers side

resources enhanced security better SEO

Etc but several components have their

limitation s they can't interact

directly with browser apis or handle

user

interactivity if we try to incorporate

some State into our about page using use

state for

example name set name with a default

value of an empty string while making

sure we import you state at the

top head back to the

browser you will see an error this is

because you State expects a client

component environment but our about

Peach is a server component if you think

about it server components cannot use

State because they're rendered on the

server where there is no concept of

State as it exists in the browser this

again confirms the fact that every

component created in XS is a server

component unless specified

otherwise let's leave the about page as

a functioning server component

and learn how to create a new client

component we'll make use of a new file

so within the app

folder dashboard page.

TSX and Export a simple component that

uses state to manage a user's name once

again from pieces Explorer I'm going to

insert an nexs page component change the

name to dashboard page import us State

create a state variable called name with

an initial value of empty

string and for the jsx we add an input

element whose value is equal to the name

State variable and on change we call set

name passing in the input value we then

have a paragraph element that renders

hello followed by the

name now at the top of this file we must

include a directive or to put it simply

a special instruction within the code

within double quotes use

client this directive acts as our ticket

to cross the boundary from server to

client side and is what allows us to

Define client

components it signals to nexas that this

component dashboard page along with any

components it Imports is intended for

client side

execution as a result the component

gains full access to browser apis and

the ability to handle

interactivity if we return to the

browser and navigate to SL

dashboard we see the component with its

state working as

expected we do have the text but the

styling is not

appropriate let's now shift our

attention to a very important point

about client components rendering

behavior let's add a lock statement

within the dashboard

component dashboard client component in

the home

page let's add a link to navigate to the

dashboard page so at the top import link

from next SL link and after the

paragraph tag I'm going to add the link

component the text is

dashboard and each ref is equal to slash

dashboard back in the

browser if we navigate to localhost

3000 we should see the dashboard link

click on the

link and we see the log message in the

browser's

console we have it twice because of

reacts strict mode if we go back to the

terminal you can see there is no log

message about the dashboard component

rendering however if you were to reload

the dashboard

route you can see we have the message in

the browser's console again but if we

head back to the

terminal we see the same message here as

well as I mentioned in the previous

video client components are primarily

executed in the client and have access

to browser apis but they are also also

pre-rendered once on the server to allow

the user to immediately see the Page's

HTML content rather than a blank screen

it is an optimization strategy that

nextjs implements and is recommended by

react the name client component is

indeed confusing as a client component

executes once on the server but I'm

confident it will not get in your way of

learning react server

components a very important point to

keep in mind

to summarize in the react server

component architecture and by extension

in the nextjs app router components are

server components by default to use

client components you must include the

use client directive at the top server

components are rendered only on the

server whereas client components are

rendered once on the server and then on

the

client now that we understand how to

define both server and client components

in next shares in the next video Let's

dive into the rendering life cycle of

server and client components in next

shares if you're enjoying the content

please hit the like button subscribe and

turn on notifications to stay updated

I'll see you in the next

video