🍔
[Next.js] Server Componet とClient Componentとは?
はじめに
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>
);
}
Discussion