⚡

[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>
  );
}
GitHubで編集を提案

Discussion