⚡

[Next.js] Server Componet とClient Componentとは？

に公開
Next.js
TypeScript
frontend
初心者向け
tech

はじめに

Next.jsの学習の為に、下記書籍を読みました。
下記書籍のServer Componet とClient Componentについて学びがあったので、記事として記録します。

結論

Server Componet(SRC)とは

サーバーサイドのみ実装されるコンポーネント

export default async function ServerComponent() {
  const res = await fetch('http://localhost:4000/posts');
  const posts = await res.json();
  return (
    <div>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Client Component とは

ブラウザ/サーバー両方で実行されるコンポーネント

'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

YouTube のご案内

ポモドーロタイマー（25 分勉強＋ 5 分休憩）を活用した作業・勉強配信を行っています。
集中したいときや、誰かと一緒に頑張りたいときに、ぜひご活用ください。

ご興味のある方は、ぜひお気軽に遊びに来てください！
「Zenn から来ました!!」とコメントを貰えると泣いて喜びます 🤣

GitHubで編集を提案

Discussion