מרגע ש Vercel לקחה את ההובלה בפיתוח של ריאקט היה ברור איך הוויכוח הזה יסתיים וש React Router תאלץ להדביק את הפער. קשה מאוד בפיתוח ללכת נגד הזרם ובמקרה שלנו נגד הכיוון של הספריה שעבורה אתה בונה. הגישה של ריאן פלורנס לאורך הדרך היתה ש Server Components לא מספיק יציבים וממילא עם רמיקס (או ריאקט ראוטר 7) אין בהם צורך.

בכל מקרה אני שמח לראות שזה השתנה ושהאקוסיסטם מתיישר. זה רק מדגיש את החשיבות של הבנת שיטת העבודה ה Full Stack-ית של ריאקט היום: קומפוננטות צד שרת שולפות מידע וקומפוננטות צד לקוח אחראיות על האינטרקטיביות.

לסקרנים זה ריפו דוגמה שהחברים בריאקט ראוטר פרסמו: https://github.com/ryanflorence/rsc-movies

בתיקיית routes/home אני מוצא את ה Server Component של דף הבית:

import { MovieGrid } from "../components/movie-grid.tsx";
import { MovieTile } from "../components/movie-tile.tsx";

export const shouldRevalidate = () => false;

export async function ServerComponent() {
  let featuredMovieIds = [32932, 23643, 29915, 30895, 31472, 33411];

  return (
    <>
      <title>RR RSC Movies</title>
      <MovieGrid>
        {featuredMovieIds.map((id: number) => (
          <MovieTile key={id} id={id} />
        ))}
      </MovieGrid>
    </>
  );
}

וב components/add-to-favorites דוגמה לקומפוננטת צד לקוח:

"use client";
import { useFormStatus } from "react-dom";

export function AddToFavoritesButton({ isLiked }: { isLiked: boolean }) {
  let { pending } = useFormStatus();

  return (
    <button
      type="submit"
      onClick={event => {
        if (pending) event.preventDefault();
      }}
      className="font-instrumentSans font-semibold rounded-xl w-full text-xl border-[2px] py-2 px-5 group"
    >
      <span className="group-hover:scale-105 group-active:scale-100 inline-block transition-transform duration-100">
        {pending
          ? isLiked
            ? "Removing..."
            : "Adding..."
          : isLiked
            ? "Remove from favorites"
            : "Add to favorites"}
      </span>
    </button>
  );
}

נ.ב. בימים אלה אני מסיים עבודה על קורס ריאקט חדש לאתר שמתבסס על תבנית ה Client/Server ויכיל את הסטאק הדיפולטי של React / Next / TypeScript / Shadcn / Tailwind. אני מודה שהייתי מודאג מההתעקשות של ריאקט ראוטר על תבנית ה loaders שלהם ומאוד שמח שבסוף הם הצליחו להתקדם ולשלב את ה loaders על גבי התשתית הריאקטית. עדכון מסודר על הקורס יעלה כשיהיה מוכן כנראה אחרי החג.