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

Summary

このビデオでは、Reactサーバーコンポーネントを活用して、サーバーコンポーネントとクライアントコンポーネントの両方を作成する実践的なプロセスを紹介しています。Next.jsアプリケーションでの具体的な手順を説明し、新しい「rendering-demo」プロジェクトを作成してから、サーバーコンポーネントとしての「Aboutページ」の追加、そしてクライアントコンポーネントとしての「Dashboardページ」の作成までを解説します。特に、「use client」ディレクティブを使うことでクライアントコンポーネントを定義し、ブラウザAPIへのフルアクセスとインタラクティビティのハンドリングが可能になる点を強調しています。ReactとNext.jsを使ったサーバーとクライアントのコンポーネントモデルの理解と実装方法を、初心者にもわかりやすく説明しています。

Takeaways

• 😀 By default, every component in a Next.js app is a server component, including layout and pages.
• 📝 Use the `useClient` directive to define client components in Next.js.
• 💻 Server components run only on the server, while client components run on client and server.
• 🎯 Client components can access browser APIs and handle interactivity.
• 🔄 Client components pre-render once on server to quickly show HTML.
• 😵 Server components cannot use state or interact with browser APIs.
• 📑 Next.js optimizes by pre-rendering client components on server.
• ✅ Add `useClient` directive to allow component to access browser APIs.
• 📦 Server components have benefits like 0 bundle size, security, SEO.
• ⬇️ Use `useClient` to cross from server to client component boundary.

Q & A

Next.jsアプリケーションでサーバーコンポーネントとクライアントコンポーネントを作成する際の最初のステップは何ですか？

最初のステップは、`npx create-next-app` コマンドを使用して新しいNext.jsプロジェクトを作成することです。

Next.jsアプリケーションにおけるすべてのコンポーネントのデフォルトの種類は何ですか？

デフォルトでは、すべてのコンポーネントはサーバーコンポーネントとして扱われます。

新しい「about」ページをNext.jsアプリケーションに追加するためにどのフォルダにファイルを作成しますか？

`about` フォルダ内の `app` フォルダに `page.tsx` ファイルを作成します。

サーバーコンポーネントがサーバー上で実行されることを確認する方法は何ですか？

ブラウザのコンソールではなく、アプリケーションを実行しているターミナルでログメッセージを確認します。

サーバーコンポーネントにおいて `useState` フックの使用を試みた結果は何ですか？

`useState` はクライアントコンポーネント環境を期待しているため、エラーが発生します。

クライアントコンポーネントを作成するために特別な指示（ディレクティブ）をファイルのトップに含める必要があるのはなぜですか？

`use client` ディレクティブは、そのコンポーネントがクライアントサイドで実行されることを指定し、ブラウザAPIへのフルアクセスとインタラクティビティの処理を可能にします。

クライアントコンポーネントがサーバー上で一度レンダリングされる理由は何ですか？

クライアントコンポーネントがサーバー上で一度レンダリングされるのは、ユーザーがページのHTMLコンテンツを即座に見ることができ、空白の画面ではなく最適化戦略として実装されています。

Next.jsアプリケーションでサーバーコンポーネントとクライアントコンポーネントを区別するために使用するキーとなるディレクティブは何ですか？

クライアントコンポーネントを定義するために `use client` ディレクティブを使用します。

Next.jsにおけるサーバーコンポーネントの利点は何ですか？

サーバーコンポーネントの利点には、ゼロバンドルサイズ、サーバーサイドリソースへのアクセス、強化されたセキュリティ、より良いSEOなどがあります。

Next.jsアプリケーションにおいて、クライアントコンポーネントのレンダリング挙動について説明してください。

クライアントコンポーネントは主にクライアントで実行され、ブラウザAPIへのアクセスが可能ですが、ユーザーがページのHTMLコンテンツをすぐに見ることができるように、サーバー上で一度プレレンダリングされます。

Outlines

00:00

🔨 Reactサーバーコンポーネントとクライアントコンポーネントの実践

このビデオでは、Reactのサーバーコンポーネントとクライアントコンポーネントの実践的な作成方法を説明します。最初に、npx create-next-appを使用して新しいNext.jsプロジェクトを作成し、その後、Next.js（nxsと表記されることがある）アプリケーションでのReact Server Components（RSC）アーキテクチャの統合について解説します。Next.jsでは、デフォルトで全てのコンポーネントがサーバーコンポーネントとみなされます。これには、新規プロジェクトにデフォルトで含まれるルートレイアウトとルートページも含まれます。具体的な例として、「about」ページの追加方法を説明し、サーバーコンポーネントがブラウザAPIやユーザーのインタラクティビティと直接的に対話できない制限を持つこと、そしてクライアントコンポーネントに必要な特別な指示（use clientディレクティブ）の使用方法についても触れます。

05:01

🔄 クライアントコンポーネントのレンダリングと挙動の理解

このセクションでは、Next.jsにおけるクライアントコンポーネントのレンダリング挙動に焦点を当てます。特に、クライアントコンポーネントがブラウザ上でのインタラクティビティを持つ一方で、最適化のためにサーバー上で一度プレレンダリングされることを説明します。これにより、ユーザーがページのHTMLコンテンツを即座に見ることができるようになります。また、Next.jsの「use client」ディレクティブを使用してクライアントコンポーネントを明示的に指定する方法、およびReactサーバーコンポーネントのアーキテクチャにおいて、サーバーコンポーネントとクライアントコンポーネントがどのように異なり、どのように連携するかについて深く掘り下げます。このビデオは、サーバーとクライアントの両方のコンポーネントをNext.jsアプリケーションで定義し、レンダリングする方法についての理解を深めることを目指しています。

Keywords

💡server components

Components that are rendered on the server side. They have benefits like faster page loads, better SEO, but can't use browser APIs or state.

💡client components

Components that are rendered on the client side and can use browser APIs and state. They also get pre-rendered on the server for faster initial page loads.

💡next.js

A React framework that enables server side rendering and static site generation. It handles setting up server and client side components.

💡useClient directive

A directive in Next.js that marks a component as a client component so it gets rendered on the client side.

💡rendering

The process of generating HTML from a component. Server components render on the server while client components render on both server and client.

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, better SEO

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

Use the `useClient` directive to define client components in Next.js

The `useClient` directive signals that a component is intended for client-side execution

Client components gain access to browser APIs and can handle interactivity

Client components execute once on the server and then on the client

Client component rendering behavior can be confusing due to server-side pre-rendering

Server components only render on the server

Client components render once on server for initial HTML, then fully client-side

Use `useClient` directive to define client components in Next.js

Server components are rendered only on server

Client components render on server for initial HTML, then client-side

Client components have access to browser APIs and interactivity

Next video covers rendering lifecycle differences of server & client components

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