? ?? ??? ???? ?? ? ??? ????? ?? ??? ???? ?? ??? ???? ???? ????. RSC(React Server Components)? ?? ? ??????? ???? ???? ??? ????? ??? ?? ??? ????? ??? ???? ???? ??????. React Server ????? ????, ? ????, ??? ??? ? ??? ???????.

---

React ?? ????? ??????

React Server Components(RSC)? ?????? ?? ???? ???? ??? ??? React ???????. ????? ? ???? ???? ?? React ?? ??? ?? RSC? ???? ???? ?? ? ???? ??? ?????? ????? ???? JavaScript? ?? ?? ? ????. ? ?? ??? ??? ??? ??? ??????.

RSC? ?? ??:

• ?? ?? ???: ?? ??? ???? ?????? ?? ???? ?????.
• ???? ??? ????: ?? ????? ? API ?? ?? ???? ?? ???? ?????.
• ?????? JavaScript ??: JavaScript ????? ????? ??? ?? ??? ????.
• ??? ??: ?? ????? ?? ??? ?? ???? ????? ???? ?????.

---

React ?? ?? ??? ??

1. ??? ??

RSC? ???? ??? ?????? ?????? ?????? ???? ?? JavaScript? ?? ????. ?? ?? ?? ??? ???? ?? ??? ???? ??? ?????.

2. ???? ??? ????

RSC? ???? ?? ?? ??? ????? ??? ???? ?? ???? ??? ? ????. ?? ?? ??? ????? ? ?? ??? ?? API ??? ???? ????.

3. SEO ???? ??????

?? ??? ?? ??? ?? ??? ???? ?? ???? ? ??? ?? ? ??????? ?? ???? ??????.

4. ?? ?? ??

RSC? ?? ?? ??? ?? ?????? JavaScript? ???? ???? ?? ?? ??? ?? ???? ??? ?? ??? ?????.

---

React ?? ????? ??? ??????

RSC? ??? ?? ??? ???? ???? ?????? ?? ???? ?? ??? ???? ???. ??? ??? ??? ????.

1. ???? ???: ??? React ????? ????? ? ??? ???? HTML ? JSON?? ?????? ????.
2. ????? ?? ??: ??? ???????? ??? ????? ?? ??? ?? ??? ? ????. ?? ??, ?? ????? RSC? ???? ??? ???? ????? ?? ??? ?????.
3. ????: React? ???? ??? ????? ???? ???? ???? ?? ???? ????? ????? ??? ? ????.

---

?? ??: React ?? ?? ??? ???? ??

React ?? ?? ??? ??? ??? ???????.

???? ??

RSC ??? ????? ?? ???? ???? React ??? ?????. Next.js? ?? ??? React 18? ???? ?????? ??????.

?? ??

1. ?? ?? ??:

// components/ProductList.server.js
import fetch from 'node-fetch';

export default async function ProductList() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name} - ${product.price}</li>
      ))}
    </ul>
  );
}

2. ????? ?? ??:

// components/ProductDetail.client.js
import { useState } from 'react';

export default function ProductDetail({ product }) {
  const [details, setDetails] = useState(null);

  async function fetchDetails() {
    const res = await fetch(`/api/product/${product.id}`);
    const data = await res.json();
    setDetails(data);
  }

  return (
    <div>
      <h2>{product.name}</h2>
      <button onClick={fetchDetails}>View Details</button>
      {details && <p>{details.description}</p>}
    </div>
  );
}

3. ?? ?? ??:

// pages/index.js
import ProductList from '../components/ProductList.server';
import ProductDetail from '../components/ProductDetail.client';

export default function Home() {
  return (
    <div>
      <h1>Product Store</h1>
      <ProductList />
    </div>
  );
}

---

?? ? ?? ??

1. ?? ???: RSC? ?? ???? ????? ?? ??? ???? ???? ????.
2. ?? ??: ???? ?????? ?? ?? ??? ???? ??? ????? ???? ???.
3. ?? ? ????? ??: ??? ??? ?? ?????? RSC? ????? ?????.

---

React ?? ?? ??? ??

React ?? ?? ??? ?? ? ???? ????? ? ?? ?? ?? ??? ???? ? ???? ??? ??? ?????. Next.js? ?? ?????? ???? RSC ??? ???? ?? ??? ?? ???? ?? ??? ? ??????? ??? ? ????.

---

??

React Server ?? ??? ???? ?? ????? ?? ??? ???? ????? ? JavaScript? ??? ??? ???? ?? ? ??? ??? ???? ????. ??? ??? ??? ? ???? ?? ?? ??? ??? ???? ?? ??? ?????. ???? ?? ??? ??????? ???? ??? RSC? ??? ???? ? ?????.

?????? React Server ?? ??? ???? ???? ?? ??? ???? ??? ??? ??????!

? ??? React ?? ????: ?? ? ??? ??? ????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!