Composing Client and Server Components

Thu Jul 11 2024

tye25

Composing Client and Server Components 是 React 18 中引入的一个重要概念，允许开发者在同一个应用中混合使用客户端和服务器端组件。这种方法旨在结合两种组件类型的优势，以提高应用性能和开发体验。让我为您概述这个概念：

服务器组件（Server Components）:
- 在服务器上渲染
- 可以直接访问服务器资源（如数据库）
- 不包含交互逻辑
- 减少客户端 JavaScript 包的大小
客户端组件（Client Components）:
- 在浏览器中渲染
- 可以包含状态和交互逻辑
- 可以使用浏览器 API

组合这两种组件的基本原则：

示例：

// ServerComponent.js (服务器组件)

importClientComponentfrom'./ClientComponent';

export default async function ServerComponent(){

    const data =await fetchDataFromDatabase();

    return (<div><h1>Server-rendered data:</h1><pre>{JSON.stringify(data,null,2)}</pre><ClientComponent/></div>);}

// ClientComponent.js (客户端组件)

'use client';

import{ useState }from'react';

exportdefaultfunctionClientComponent(){

    const[count, setCount]=useState(0);

    return(<buttononClick={()=>setCount(count +1)}>      Clicked {count} times</button>);}

在这个例子中，ServerComponent 从数据库获取数据并渲染，同时它也包含了一个 ClientComponent，后者处理客户端交互。

使用这种组合方法的优势：

Thu Jul 11 2024

tye25

服务器组件（Server Components）:
- 在服务器上渲染
- 可以直接访问服务器资源（如数据库）
- 不包含交互逻辑
- 减少客户端 JavaScript 包的大小
客户端组件（Client Components）:
- 在浏览器中渲染
- 可以包含状态和交互逻辑
- 可以使用浏览器 API

组合这两种组件的基本原则：

示例：

// ServerComponent.js (服务器组件)

importClientComponentfrom'./ClientComponent';

export default async function ServerComponent(){

    const data =await fetchDataFromDatabase();

    return (<div><h1>Server-rendered data:</h1><pre>{JSON.stringify(data,null,2)}</pre><ClientComponent/></div>);}

// ClientComponent.js (客户端组件)

'use client';

import{ useState }from'react';

exportdefaultfunctionClientComponent(){

    const[count, setCount]=useState(0);

    return(<buttononClick={()=>setCount(count +1)}>      Clicked {count} times</button>);}

在这个例子中，ServerComponent 从数据库获取数据并渲染，同时它也包含了一个 ClientComponent，后者处理客户端交互。

使用这种组合方法的优势：