はじめに
Reactの基礎も理解できてきたからNext.jsにスキルアップしてみたい！
そんなエンジニアさんがNextを初めて触った時につまづくのは「server action」だと思います。
事実僕も「くらいあんと」？「さーばー」なんだそれは？
と言った感じでした。
そんな方のためにつまづく点をできる限りカバーしつつ、紹介していきたいと思います。
ターゲット
- 初めてNextを触る方
- いまいち
use clientとuse serverの使い分けが分からずエラーが出てしまう人 - 完全に理解できなくてもなんとなくイメージを掴みたい方
- つよつよだけどクイズに正解して気持ちよくなりたい方
use clientとは？
Next.jsの基盤であるReactでは、最初に空のhtmlを受け取り、その後JavaScriptの力で動的にコンテンツを表示される仕組みとなっています。
この「クライアント側で動作する」コードを書く時にuse clientを宣言します。つまりは、ブラウザ上で動くJavaScriptだと宣言するものです。
use serverとは？
サーバーは先ほど登場した空のhtmlを送る張本人です。
このサーバーを操作したいときはuse serverを用います。
まとめると？
use client：ブラウザ上で動作させたいコードを書くときに宣言する。
use server：サーバーを直接操作したいときに宣言する。
実際のケース
今回はクイズ形式でどちらがベストプラクティスか考えてみましょう。
Q1: useStateのようなhooksを使いたい。
答えを見る
正解: use cliet
解説: hooksはブラウザ上でのみ動作できます。基本的にReactの機能は全てクライアント側で動作すると考えてください。
コラム: このようなエラーを見たことはありませんか？
You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
│ Learn more: https://nextjs.org/docs/getting-started/react-essentials
これを翻訳すると
useStateが必要なコンポーネントをインポートしています。これはクライアント・コンポーネントでのみ機能しますが、その親コンポーネントには "use client "のマークがないため、デフォルトではサーバー・コンポーネントとなります。
このようにuseStateのようなhooksはクライアントで実行する必要があるんですね。
Q2: 事前にHTMLを埋め込んで表示スピードを高速にしたい。
答えを見る
正解: use server
解説: サーバー側で事前にHTMLを用意してあげることでSEO対策にもなります。
Q3: fetchを使ってAPIデータを取得したい。
答えを見る
正解: use server
解説: fetchをサーバーサイドで実行することで、APIコールを効率的に処理できます。またAPIキーの保護やSEOの向上に役立ちます。
終わりに
今回はNext初学者の方のために基礎知識と実際のケースを想定してuse serverとuse clientの使い分けを実践してもらいました。
ぜひ自分で触って確かめてみてください。
百聞は一見にしかずです。
クイズは何問正解できたかな？
つよつよの方も全問正解して気持ちよくなってもらえたらと思います。
コメントで教えていただけると嬉しいです笑
参考文献