??

? 10? ? ????? ?????? ?? ???? ? ?? HTML, CSS, JavaScript ? ?? Python 2 ????? ??????. ? ?? ?? ??? ?? ? ?????-?? ??? ?? PHP? SQL?? ??????. ? ?? ??? ??? ??? ?? ??? ???? ??? ?? '???(React)'??. ???? ????? ????? ??? ???, ??? ? ?? ???? ??? ?? ??? ?? ?????. ??? ??? ????? ??? ???? ??? ?? ???????.

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

???? ??

RSC? ???? ?? ??? ???? ??? ??? ???? ???? ???. ?? ?? ?? ??? ?????? ???? ?? RSC? ???? React?? ???? ?? ??? ????? ???? ?? ??? ???? ? ????. ?? ???? ??????? RSC? ????????? ?? ???? ? ??? ?? ????? ??? 60% ??? ???? ??????? ??? ??? ?????.

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

 // Before: Client Component
 import { ComplexDataGrid } from 'heavy-grid-library';
import { format } from 'date-fns';

export default function Dashboard() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchDashboardData().then(setData);
  }, []);

  return <ComplexDataGrid data={data} />;
}

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

• ????? JavaScript? ?? ??? ???? ??? ??? ??? ?????? ???? ????.
• useState? ???? ?????? ??? ???? ???? ????.
• useEffect? ???? ????? ???? ? ???? ???? ????.
• ???? ???? ?? ????? ?? ??? ?????.
• ?? ??? ??? ?????? ?????? ??? ??? ??? ??? ? ????.

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

import { sql } from '@vercel/postgres';
import { DataGrid } from './DataGrid';

export default async function Dashboard() {
  const data = await sql`SELECT * FROM dashboard_metrics`;

  return <DataGrid data={data} />;
}

• ?? ??? ????? ??????? useEffect ?? useState? ???? ????.
• ?? ? ??? ?? ?? ??????? ??????.
• ????? ? ??? ???? ??? ???? ????.
• ?? ????? ?? ?? ??? ?????.
• ??? ??? ??? ??? ?? ??? ???? ??????.
• ??? DataGrid ?? ??? ??? ????? ?? ??? ???? ??? ?? ??? ? ????.

??? ?? ???. ? ?? useEffect? ??, ?????? ???? ???? ?? ???, ?? ??? ?? ?????? JavaScript? ????? ???? ?? ??? ????.

?? ??

? ??? ??? ?? ?? ? ?????. RSC? ??? ? ?? ?????? ??? ??? ??? ? ??? ????(? ???? ??? ?? ??? ??) ?? ??? ? ????? ? ????, ?? ? ?? ?? ??? ? ????? SEO? ????? ?? ?? ?????. ?? ??? ?? ??? ?????. ?? React ????? ???? ???? ??? ????.

??? ?? ??? ??? ??? ?????. ??????? ?? ???? ? ?? ?? ??? ???? ??(???!) ????? ?????. ?? React? ?? ?? ?? ????? Next.js? ?? ?? ??? ?? ? ???? ?? ??? ?? ?? ?? ????.

????

??? ???? RSC? ???? ????. ?? ??? ???? ?, ?? ?????/?? ??? ???? ? ??? ????. ???? ??????? ??? ??? ????. ?? ?????? ?? ??????. RSC? ???? ?? ?? ?????? ?? ? ?? ???? ??????. ????? ????? ?? ??:

 // Before: Client Component
 import { ComplexDataGrid } from 'heavy-grid-library';
import { format } from 'date-fns';

export default function Dashboard() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchDashboardData().then(setData);
  }, []);

  return <ComplexDataGrid data={data} />;
}

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

• use client ???? SearchFilter? ????? ?? ??? ????? ?????.
• SearchFilter? ???????? ??? ? ?? ??? ?? ??(onChange ???)? ?????.
• ProductList? ?? ?? ??? ?? ????? ???? ?????.
• ???? ??? ?? ??? ?? ?? ? ????? ???? ??? ? ????.
• ??? ??(SearchFilter)?? JavaScript? ?????? ?????.
• ???? ?? ??(??? ??? ProductGrid)? ???? ??????.

??(??? ?? ??)

RSC? ??? ??? ?? ? ??? ?????. ?? React ??????? ???? ??? ???? ???????. React? ???? ??? ????? ??? ?? ?? ??? ??? ????? ??? ??? ??? ??????.

RSC? ??? ???? ??????? ???? ??? ??? ??? ???? ??? ? ?? ??? ?? ? ?? ?? ?????. ??? ????? ? ?? ?????? RSC? ???? ?? ? ??? React ??????? ???? ?? ??? ? ??? ?????.

??? ?????

?????? React Server ????? ???? ??????? ?? ??? ?? ???? ??, ?? ?? ? ?? ??? ?? ????.
? ??? RSC? ? ? ???? ? ??? ???? ??? ???? ?? ???? ?? ? ??? ????? ?? ????? ?? ?? ???.

?? ??

Ivan Duarte? ????? ?? ??? ?? ??? ??????. ?? ? ??? ?? ??? ??? ?? ??? ????? ??? ?? ??? ???? ?? ????. ? ?? ???? ????? ??? X, Github ? LinkedIn?? ?? ??????.

? ???? ??

ByteUp? ??? ??????? ?? ?????.

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

? ?? ????? ?

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