⚡

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

2024/09/18に公開

Next.js

はじめに

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で編集を提案

はじめに

結論

Server Componet(SRC)とは

Client Componentとは

Discussion