1~
2Ang React Server Components (RSC) ay pundamental na binago kung paano tayo gumagawa ng mga React application. Sa pamamagitan ng paglilipat ng rendering logic sa server, malaki ang mababawas natin sa JavaScript bundle na ipinapadala sa client, na nagdudulot ng mas mabilis na load time at mas magandang user experience. Sa artikulong ito, tutuklasin natin ang mga advanced pattern at pinakamahusay na kasanayan para sa paggamit ng RSC sa 2026.
3~
4## Ano ang Server Components?
5~
6Tradisyunal, ang mga React component ay nire-render nang buo sa client (CSR) o pre-rendered sa server bilang HTML (SSR) at pagkatapos ay hina-hydrate sa client. Ang **Server Components** ay nagbibigay-daan sa atin na mag-render ng mga component _eksklusibo_ sa server. Ang kanilang code ay hindi kailanman ipinapadala sa browser.
7~
8### Mga Benepisyo
9~
101.  **Zero Bundle Size**: Ang mga dependency na ginagamit sa Server Components (tulad ng markdown parser o mabibigat na date library) ay nananatili sa server.
112.  **Direktang Backend Access**: Maaari kang mag-query sa iyong database nang direkta sa loob ng iyong component nang hindi nag-eexpose ng API endpoint.
123.  **Awtomatikong Code Splitting**: Ang mga client component na ini-import sa server-side ay awtomatikong hinahati sa hiwalay na bundle.
13~
14## Data Fetching Pattern
15~
16Sa RSC, maaari mong gawin ang iyong mga component na `async` at direktang mag-await ng data.
17~
18```tsx
19// app/users/page.tsx
20import { db } from '@/lib/db';
21~
22export default async function UsersPage() {
23  const users = await db.user.findMany();
24~
25  return (
26    <main>
27      <h1>Mga User</h1>
28      <ul>
29        {users.map((user) => (
30          <li key={user.id}>{user.name}</li>
31        ))}
32      </ul>
33    </main>
34  );
35}
36```
37~
38### Suspense para sa Streaming
39~
40Dahil ang data fetching ay maaaring mabagal, balutan ang iyong mga component sa `<Suspense>` para agad na magpakita ng fallback UI habang naglo-load ang data.
41~
42```tsx
43import { Suspense } from 'react';
44import UserList from './UserList';
45import LoadingSkeleton from './LoadingSkeleton';
46~
47export default function Page() {
48  return (
49    <section>
50      <h1>Mga User Ko</h1>
51      <Suspense fallback={<LoadingSkeleton />}>
52        <UserList />
53      </Suspense>
54    </section>
55  );
56}
57```
58~
59## Pagsasama ng Server at Client Components
60~
61Isa sa mga pinaka-nakakalitong aspeto ay kung paano pagsamahin ang mga Server at Client component.
62~
63**Panuntunan**: Ang Server Components ay maaaring mag-import ng Client Components. Ang Client Components ay _hindi maaaring_ direktang mag-import ng Server Components. Gayunpaman, maaari kang magpasa ng Server Component bilang `children` sa isang Client Component.
64~
65### Ang "Children" Pattern
66~
67```tsx
68// ClientComponent.tsx
69'use client';
70~
71import { useState } from 'react';
72~
73export default function ClientWrapper({ children }) {
74  const [count, setCount] = useState(0);
75~
76  return (
77    <div onClick={() => setCount((c) => c + 1)}>
78      Bilang: {count}
79      {children} {/* Ito ay maaaring maging Server Component! */}
80    </div>
81  );
82}
83```
84~
85```tsx
86// ServerPage.tsx
87import ClientWrapper from './ClientWrapper';
88import ServerContent from './ServerContent';
89~
90export default function Page() {
91  return (
92    <ClientWrapper>
93      <ServerContent /> {/* Ito ay gumagana nang perpekto */}
94    </ClientWrapper>
95  );
96}
97```
98~
99## Mga Karaniwang Pitfall
100~
1011.  **Paggamit ng Context sa Server Components**: Ang Context ay isang client-side na konsepto. Kung kailangan mong magbahagi ng data sa server-side, ipasa ito bilang props o gumamit ng specialized na request-scope cache.
1022.  **Pagdadagdag ng Event Handlers**: Hindi ka maaaring magdagdag ng `onClick` o `onChange` sa isang Server Component. Ang logic na iyon ay kabilang sa isang generic na Client Component leaf node.
103~
104## Kongklusyon
105~
106Ang React Server Components ay hindi lang isang feature; ito ay isang paradigm shift. Sa pamamagitan ng pag-unawa sa hangganan ng server at client, maaari kang gumawa ng mga application na parehong highly interactive at incredibly mabilis.
107~