Next.js 14 Tutorial - 50 - Server and Client Components
Summary
TLDRこのビデオでは、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
🔨 Reactサーバーコンポーネントとクライアントコンポーネントの実践
このビデオでは、Reactのサーバーコンポーネントとクライアントコンポーネントの実践的な作成方法を説明します。最初に、npx create-next-appを使用して新しいNext.jsプロジェクトを作成し、その後、Next.js(nxsと表記されることがある)アプリケーションでのReact Server Components(RSC)アーキテクチャの統合について解説します。Next.jsでは、デフォルトで全てのコンポーネントがサーバーコンポーネントとみなされます。これには、新規プロジェクトにデフォルトで含まれるルートレイアウトとルートページも含まれます。具体的な例として、「about」ページの追加方法を説明し、サーバーコンポーネントがブラウザAPIやユーザーのインタラクティビティと直接的に対話できない制限を持つこと、そしてクライアントコンポーネントに必要な特別な指示(use clientディレクティブ)の使用方法についても触れます。
🔄 クライアントコンポーネントのレンダリングと挙動の理解
このセクションでは、Next.jsにおけるクライアントコンポーネントのレンダリング挙動に焦点を当てます。特に、クライアントコンポーネントがブラウザ上でのインタラクティビティを持つ一方で、最適化のためにサーバー上で一度プレレンダリングされることを説明します。これにより、ユーザーがページのHTMLコンテンツを即座に見ることができるようになります。また、Next.jsの「use client」ディレクティブを使用してクライアントコンポーネントを明示的に指定する方法、およびReactサーバーコンポーネントのアーキテクチャにおいて、サーバーコンポーネントとクライアントコンポーネントがどのように異なり、どのように連携するかについて深く掘り下げます。このビデオは、サーバーとクライアントの両方のコンポーネントをNext.jsアプリケーションで定義し、レンダリングする方法についての理解を深めることを目指しています。
Mindmap
Keywords
💡server components
💡client components
💡next.js
💡useClient directive
💡rendering
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
5.0 / 5 (0 votes)