Εξοικείωση με τα React Server Components το 2026

Τα React Server Components (RSC) έχουν αλλάξει θεμελιωδώς τον τρόπο που χτίζουμε εφαρμογές React. Μεταφέροντας τη λογική rendering στον server, μπορούμε να μειώσουμε σημαντικά το JavaScript bundle που στέλνεται στον client, οδηγώντας σε ταχύτερους χρόνους φόρτωσης. Σε αυτό το άρθρο εξερευνούμε προχωρημένα μοτίβα και βέλτιστες πρακτικές για RSC το 2026.

Τι είναι τα Server Components;

Παραδοσιακά, τα React components γινόταν render εξ ολοκλήρου στον client (CSR) ή pre-render στον server ως HTML (SSR). Τα Server Components μας επιτρέπουν να κάνουμε render components αποκλειστικά στον server. Ο κώδικάς τους δεν στέλνεται ποτέ στον browser.

Τα Οφέλη

1. Μηδενικό μέγεθος Bundle: Τα dependencies παραμένουν στον server.
2. Άμεση πρόσβαση στο Backend: Μπορείτε να κάνετε query τη βάση δεδομένων απευθείας.
3. Αυτόματο Code Splitting: Τα Client components που εισάγονται server-side γίνονται αυτόματα split.

Μοτίβο Ανάκτησης Δεδομένων

// app/users/page.tsx
import { db } from '@/lib/db';

export default async function UsersPage() {
  const users = await db.user.findMany();

  return (
    <main>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </main>
  );
}

Suspense για Streaming

import { Suspense } from 'react';
import UserList from './UserList';
import LoadingSkeleton from './LoadingSkeleton';

export default function Page() {
  return (
    <section>
      <h1>My Users</h1>
      <Suspense fallback={<LoadingSkeleton />}>
        <UserList />
      </Suspense>
    </section>
  );
}

Συνδυασμός Server και Client Components

Κανόνας: Τα Server Components μπορούν να εισάγουν Client Components. Τα Client Components δεν μπορούν να εισάγουν απευθείας Server Components. Αλλά μπορείτε να περάσετε ένα Server Component ως children.

Το Μοτίβο "Children"

// ClientComponent.tsx
'use client';

import { useState } from 'react';

export default function ClientWrapper({ children }) {
  const [count, setCount] = useState(0);

  return (
    <div onClick={() => setCount((c) => c + 1)}>
      Count: {count}
      {children} {/* This can be a Server Component! */}
    </div>
  );
}

// ServerPage.tsx
import ClientWrapper from './ClientWrapper';
import ServerContent from './ServerContent';

export default function Page() {
  return (
    <ClientWrapper>
      <ServerContent /> {/* This works perfectly */}
    </ClientWrapper>
  );
}

Συνηθισμένες Παγίδες

1. Χρήση Context σε Server Components: Το Context είναι έννοια του client-side.
2. Προσθήκη Event Handlers: Δεν μπορείτε να προσθέσετε onClick ή onChange σε Server Component.

Συμπέρασμα

Τα React Server Components δεν είναι απλά ένα χαρακτηριστικό· είναι αλλαγή παραδείγματος. Κατανοώντας τα όρια μεταξύ server και client, μπορείτε να χτίσετε εφαρμογές που είναι ταυτόχρονα ιδιαίτερα διαδραστικές και απίστευτα γρήγορες.