nextJS – קורס fullstack – use client & use server

בעולם המשתנה ללא הרף של פיתוח אתרים, Next.js הפך לכוכב נוצץ, הידוע ביכולות השרת-צד שלו והרנדרינג ההיברידי. אבל מתחת למכסה המנוע שלו שוכבת שפה נסתרת, בה מונחים כמו "use client" ו-"use server" מחזיקים את המפתח למימוש הפוטנציאל המלא שלו. אז חגרו חגורות, כי אנחנו יוצאים למסע לפענח את ההנחיות החשובות האלה ולהבין את ההשפעה שלהן על מסע Next.js שלכם.

שני עולמות, שורה אחת של קוד

לפני שנצלול לפרטים, בואו נקים בסיס. בעולם אפליקציות הרשת, לקוח מתייחס לדפדפן של המשתמש שלך, החלון לעולם הדיגיטלי שלך. לעומת זאת, השרת שוכן במרכז נתונים, עובד קפדן ונאמן שמכין תגובות עבור המשתמשים שלך. Next.js מאפשר לך לנצל את שניהם ולפתח כ fullstack developer, לחוויות משתמש חלקה.

• SSR: הדף נבנה על השרת ומועבר לדפדפן שלם ומוכן. יתרונות: SEO מעולה, מהירות ראשונית טובה, תוכן דינמי זמין מיד. חסרונות: עומס שרת גדול יותר, השהייה ראשונית עד לקבלת הדף.
• CSR: דף HTML בסיסי מועבר תחילה, ובו קוד JavaScript שמוריד ומרנדר את התוכן באופן דינמי בדפדפן. יתרונות: עומס שרת נמוך, גמישות גבוהה לאינטראקטיביות. חסרונות: SEO יכול להיות פחות יעיל, תלות בחיבור רשת טוב, השהייה עד לשליפת התוכן.

use client – שומר הסף של צד הלקוח

תחשוב על "use client" כרכיב ריאקטי לכל דבר רכיב שמתורגם לJS ונתאם מהדפדפן. על ידי הוספת ההנחיה הזו בראש קובץ, אתה אומר ל-Next.js: "היי, תמקד את תשומת הלב שלך בדפדפן! רנדר הכל בקובץ הזה וברכיבים המיובאים שלו בצד הלקוח בלבד." לזה יש כמה יתרונות:

• ביצועים משופרים: על ידי העברת העבודה לדפדפן של המשתמש, אתה מפחית את עומס השרת וזמני הטעינה של העמודים, מה שמוביל לחוויית משתמש מהירה וחלקה יותר.
• חבילות שרת קטנות יותר: קוד מסומן כ-"client" לא מקובץ עם קוד השרת, מה שהופך את הפריסה שלך לרזה וקלה יותר.
• גמישות לאינטראקטיביות: רנדור בצד הלקוח אידאלי כשהוא מתמודד עם אינטראקציות של משתמשים ותוכן דינמי. דמיינו לחיצה על לחצן שמפעילה אנימציה. "use client" מאפשר לך לטפל בפעולות כאלה ביעילות בתוך דפדפן המשתמש.

use server – נכנס לבמה

בעוד "use client" בונה את צד הלקוח, "use server" בונה את צד השרת. הנחיה זו מורה ל-Next.js לבצע משימות ספציפיות, כמו שליפת נתונים או חישובים, על השרת לפני שליחת ה-HTML המרונדר לדפדפן. זה שימושי במיוחד כאשר:

• אבטחת נתונים רגישים: מידע מסוים, כמו מפתחות API או סיסמאות משתמש, לא צריך להיות חשוף בצד הלקוח. "use server" מאפשר לך לטפל בנתונים כאלה בצורה מאובטחת על השרת.
• רנדרינג מראש עבור SEO: כאשר בוטים זוחלים באתר שלך לצורך דירוג מנוע חיפוש, הם מצפים לתוכן מרונדר לחלוטין. "use server" מבטיח שהדפים שלך ידידותיים ל-SEO, אפילו עבור אתרים סטטיים.
• אופטימיזציה של שליפת נתונים SSR: שליפת נתונים בשרת לפני שליחת העמוד לדפדפן מובילה לטעינת עמוד ראשונית מהירה יותר, ומספקת רושם ראשוני טוב יותר.

יצירת איזון: סימפוניה של לקוח ושרת עם nextjs בשימוש משולב.

"use client" ו-"use server" לא אויבים; הם שותפים בריקוד יפהפה. שימוש מיומן בהם מאפשר לך לנצל את החוזקות של שני הסביבות. כמו כן קל לייצר "בלגן" בשילוב בין שני העולמות ולכן חשוב להקפיד על קונבנציות, השתמשו ברכיבים סטטיים כמו עמודים או לייאאוט שמכילים לרוב מספר רכיבים (שחלקם יכולים להיות SSR וגם CSR) והשתמשו בהן לעשות שימוש SSR ולבצע קריאות על מנת להזרים את המידע וכן לטעון HTML סטטי.

להלן דוגמה לlayout של אזור ה dashboard , כמובן שיהיה SSR . והוא מרנדר מספר רכיבים שונים, עושה בדיקה אם קיים המשתמש, וקיבלנו מה שרצינו, שילוב מנצח:

import { redirect } from "next/navigation";

import { getUserById } from "@/lib/user-service";

import { Navbar } from "./_components/navbar";
import { Container } from "./_components/Container";
import { Sidebar } from "./_components/sidebar";

interface DashboardLayoutProps {
    params: { id: string };
    children: React.ReactNode;
}

const DashboardLayout = async ({ params, children }: DashboardLayoutProps) => {
    const self = await getUserById(params.id);

    if (!self) {
        redirect("/");
    }

    return (
        <>
            <Navbar />
            <div className="flex h-full pt-20">
                <Sidebar />
                <Container>{children}</Container>
            </div>
        </>
    );
};

כמו כן , אם נסתכל ברכיבים הפנימיים , למשל Sidebar נראה כי גם הוא SSR :

import { Toggle } from "./toggle";
import { Wrapper } from "./wrapper";
import { Navigation } from "./navigation";

export const Sidebar = () => {
    return (
        <Wrapper>
            <Toggle />
            <Navigation />
            <div>sidebar</div>
        </Wrapper>
    );
};

אין סיבה להשתמש בCRS במקרה הזה, ולכן מדובר בHTML שעדיף שיהיה סטטי, ולכן נבחר רכיב זה כSSR, כמו כן יכול מאד להיות שייעשה שימוש בSidebar לפעולות שרת (רכיב זה הוא מעניין מעטפת)

אבל אם נסתכל על רכיב Wrapper נראה שהוא כן CSR ומכיל בתוכו רכיבים שהם גם CRS (לא מחייב, אבל עדיף)

"use client";

import { useDashboardSidebar } from "@/store/use-dashboard-sidebar";

interface WrapperProps {
    children: React.ReactNode;
}

export const Wrapper = ({ children }: WrapperProps) => {
    const { collapsed } = useDashboardSidebar((state) => state);

    return (
        <aside
            className={collapsed ? "close" : "open"}
        >
            {children}
        </aside>
    );
};

לסיכום use client & use server

nextjs מבוסס SSR , בא ומנגיש את התועלות של SSR עם ריאקט בצורה נוחה מאד, לדעתי זו גם הסיבה שהוא תפס תאוצה שכזו, כמו כן אפשר גם לבנות פרויקט SSR מבוסס ריאקט ללא nextjs, אך השילוב בין שני העולמות שעובד היטב עם nextjs הוא בהחלט שווה היכרות ואף המעקה של כל מפתח frontend או fullstack . בהמשך נעשה שימושים רבים ושילובים בין העולמות הללו. כך שתוכלו לראות דוגמאות נוספות בהמשך. בפוסט הבא נתחיל ונדון ביישום של פונקציונאליות צד שרת כגון API , MIDDLEWERE, SERVICIES, AUTHENTICATION, DATABASE… בקיצור הולך להיות מעניין 🐊🤩

פוסטים קשורים:

nextJS – קורס fullstack – פונקציות והוקים ב nextjs nextJS – קורס fullstack – רכיבים של nextjs nextJS – קורס fullstack – איך מתחילים nextJS – קורס fullstack – עמודים ותבניות של nextJs