אחד הדברים שהכי מרגשים אותי בפריימוורק Remix הוא הצוות שעומד מאחוריו.
Ryan Florence, Michael Jackson, הם מהמהנדסים בעלי הידע הגבוה ביותר בקהילת React ובנו הרבה דברים מוכרים כמו: ( React Router, UNPKG ו-Reach UI).
לאחרונה הם החליטו לעשות צעד משמעותי נוסף, להוסיף שחקן חיזוק רציני לצוות, Kent C. Dodds, הוא דובר, מורה ומאמן בעל שם עולמי והוא מעורב באופן פעיל בקהילת הקוד הפתוח כמתחזק ותורם של מאות חבילות npm פופולריות. קנט הוא מייסד שותף ומנהל חווית מפתחים ב – Remix וכמובן שהוא היוצר של Epic React.
SSR
פריימוורק Remix זה פריימוורק React שהשימוש שלו הוא – server-side rendering או בקיצור (SSR).
המשמעות היא שניתן לבנות את ה Frontend ואת ה Backend באמצעות אפליקציית Remix אחת.
הדאטה מרונדר בצד השרת ונשלח לצד הלקוח עם מינימום JavaScript, בניגוד ל-Vanilla React.
הדאטה מתרנדר ב-Frontend ואז מוצג על המסך, Remix מרנדר את הדאטה ב-Backend ומגיש את ה-HTML ישירות למשתמש.
Routing
הבדל גדול נוסף בין Remix לבין פריימוורקים אחרים (כמו Next.js) הוא אופן הפעולה של הניתוב.
ניתובים ופרמטרים מקוננים נתמכים ברמיקס, ו"הם רעיון קריטי להבנה ברמיקס", תכונה זו של React Router מאפשרת לרמיקס לדעת מה אתה הולך לרנדר עוד לפני שאתה מעבד אותו. זה מאפשר לנו להביא נתונים, גיליונות סגנונות ומודולים עבור העמוד הבא, או רק לחלק שהשתנה בדף.
Http Caching
הסרבר וה HTTP caching עובדים רק כאשר האתר שלכם מקבל טראפיק.
קחו לדוגמא את האינפוט של החיפוש שיש כמעט בכל אתר שאנחנו מכירים, ככל שה Cache מתמלא בחיפושים (queries) שמחפשים אותם באופן קבוע, זה גורם לחיפוש להיות עוד יותר מהיר ולקבל את התוצאות מהר יותר.
Remix יודע לעשות שליפה מוקדמת של עמודים ואז המעברים ביניהם מתבצעים כמעט באופן מיידי.
בואו נעשה השוואה קצרה בין Remix ל Next.js:
SSR
Next.js מגיע עם שלוש אסטרטגיות שונות לעיבוד עמודים:
עיבוד צד לקוח – אתם יכולים לעבד את כל האפליקציה שלכם בצד הלקוח.
יצירת אתר סטטי – ליצור את הדפים שלכם מבעוד מועד במהלך הבנייה.
התחדשות סטטית מצטברת – זה כמו SSG אבל, הדפים שלכם יכולים להתחדש לאחר זמן מהעיבוד בצד השרת – הדפים שלכם מעובדים תמיד בשרת, תוך כדי תנועה.
אז מה זה בעצם SSG (Static-Site Generating)?
ל-SSG יש קווי דמיון עם SSR. הדף נוצר גם בשרת, עם זאת, הדף מעובד בזמן הבנייה. לכן, במקום להציג את הדף בשרת עם קבלת בקשה, הדף כבר מעובד בשרת, ממתין להגשה ללקוח.
רמיקס מגיע עם גישה שונה, מהמר על SSR כפתרון. בשלב זה אתה עשוי לחשוב: "למה להגביל את עצמכם ל-SSR בלבד? SSG מדהים ו-ISR הוא כמו SSG עם כוחות על!".
עם Remix, אין צורך ליצור את הדפים שלכם באופן סטטי. אתם יכולים להשתמש בפתרונות אחרים שהיו קיימים שנים רבות: CDNs ושמירת דפדפן. כן, רמיקס מעדיף להמר על סטנדרטים ובנוי סביבם.
אז איך זה עובד?
כאשר אתם מעבדים דף בשרת אתם צריכים להשתמש ב Cache-Control header. לאחר מכן תוכלו לומר לדפדפן המשתמש ולספק ה-CDN שלכם לשמור דף זה ב Cache במשך פרק זמן מסוים.
אתם יכולים לשמור דפים משתנים בתדירות נמוכה יותר לתקופה ארוכה יותר. דפים המשתנים לעתים קרובות, כמו למשל דף הבית שלכם, עשויים להישמר ב Cache לזמן קצר.
אפשר אפילו לקבל את התנהגות ה-ISR של חידוש דפים ברקע ב-CDN על ידי שימוש באסטרטגיית stale-while-revalidate. אם כי היזהרו, מכיוון שלא כל ספקי ה-CDN תומכים בכך.
נקיטת גישה של SSR בלבד מאפשרת לרמיקס לרוץ על הקצה. זה לדעתי היתרון העיקרי שיש לו על Next.js. אתם יכולים להשתמש בפלטפורמות כמו Cloudflare Workers כדי לארח את האתר שלכם (Hosting) ולקבל שיפור משמעותי בביצועים בתשלום יחסית זניח עבור אירוח (Hosting).
Data Fetching
שליפת הנתונים ב-Next.js תלויה באסטרטגיית העיבוד שנבחרה:
עיבוד צד לקוח – מביא נתונים בצד הלקוח בלבד.
יצירת אתר סטטי – שולף את הנתונים במהלך הבנייה ולאחר מכן באופן אופציונלי מביא אותם מחדש ללקוח כאשר הדף מעובד.
חידוש סטטי מצטבר – מביא את הנתונים במהלך הבנייה ועיבוד העמודים עבור דפים שלא נוצרו במהלך הבנייה, וגם כאשר הדף נוצר מחדש.
עיבוד בצד השרת – שליפת הנתונים בשרת כאשר הדף עובר רינדור.
עבור כל אחת מהאסטרטגיות הללו, תזדקקו לפריימוורק איסוף נתונים (שאילתת תגובה למשל) כדי להיות מסוגלים להביא מחדש נתונים אל הלקוח. גם שליפת נתונים רמיקס קשורה באופן הדוק לאסטרטגיית עיבוד העמודים.
כל מסלול יכול ליישם פונקציית מטעין (Fetching). האחריות שלה היא להביא את הנתונים שלך ולהחזיר אותם.
פריימוורק Remix מעביר את הנתונים האלה לדף שלכם. מטעין (Fetching) זה פועל על שרת כך שתוכלו להתחבר ישירות למסד הנתונים שלך, להתקשר ל-API חיצוני, לקרוא ממערכת הקבצים או לעשות כל דבר שאתם עושים בדרך כלל בשרת.
יצירת פרויקט:
Creating a Remix app
npx create-remix@latest
תחילה בחרו את התיקיה שבה ברצונכם להתקין את הפרויקט :
לאחר מכן, בחרו באפשרות Remix App Server, שהוא השרת המובנה (תוכלו לשנות זאת מאוחר יותר):
בחרו JavaScript, או TypeScript אם אתם מעדיפים:
ודאו שאתם אומרים להתקנה להריץ את npm install כדי שהוא יוכל להגדיר עבורכם את כל ההגדרות והספריות הרלוונטיות לפרויקט:
לאחר מכן תיכנסו לתיקייה שיצרתם, ותריצו את הפקודה, npm run dev.
מבנה תיקיות של הפרויקט:
לסיכום:
פריימוורק Remix מגובה על ידי כמה מהמהנדסים המוכשרים ביותר בקהילת React.
גרסה 1.0 של הפריימוורק מבוסס React מלאה זו שוחררה רק ב-22 בנובמבר 2021. היא שוחררה כעת תחת רישיון MIT והיא קוד פתוח, מה שהופך אותה לשימוש חופשי.
אני חושב שהפריימוורק חזקה מאוד ואמור לצבור פופולריות נוספת ב-2022.
האם אשתמש ברמיקס במקום Next.js?
כנראה שלא, כי ל-Next.js יש קהילה ענקית שתגבה אותי בהשוואה ל-Remix, וזה מובן כי זה פריימוורק חדש.
זה לא אומר שלא אהבתי את הפריימוורק הזה. אני עשוי להשתמש בו עבור הפרויקטים האישיים שלי.
לשאלות בנושא, מוזמנים לפנות אליי.
ארתור מייזלב 👨💻 Full Stack Developer.