אם אתם מפתחי צד לקוח או Full Stack סיכוי טוב מאוד שאתם עובדים עם next.js או עם vite. נקסט נותנת דרך מהירה מאוד לבנות אפליקציות ריאקט בלי לחשוב על הפרטים ו vite מציעה פתרון יותר גנרי לכל פריימוורק צד לקוח שנרצה. שני כלים אלה השתלטו על השוק שרק לפני כמה שנים עבד בצורה כמעט בלעדית עם webpack.

בעוד ש next.js מאפשרת לכתוב גם קוד צד שרת וגם קוד צד לקוח, הפוקוס של vite הוא על צד לקוח בלבד. ומה קורה למי שרוצה לפתח קוד צד שרת node.js למשל עם express אבל בלי React? פה עדיין אין אפשרויות טובות:

1. אפשר להשאר עם node.js ולהשתמש בכלי כמו nodemon כדי לרענן את השרת אחרי כל שינוי בקוד ובכלי כמו ts-node בשביל להריץ את הטייפסקריפט (וכן נוד מתקרב לשם עם מצב watch מובנה והפשטת טיפוסי טייפסקריפט אבל אנחנו עדיין לא בעולם של ויט).

2. אפשר לעבור ל deno או bun שיודעים להריץ יופי טייפסקריפט מהקופסה אבל עלולים לסבך אותנו עם חבילות מסוימות שלא נתמכות (בעיקר דינו).

"לך מהר", או בשמו המקצועי vavite הוא פלאגין ל vite שמציע חווית פיתוח צד שרת עם ויט שעובדת טוב כמו פיתוח צד לקוח עם vite וגם מאפשרת הרחבות כמו Server Side Rendering למי שרוצה לבנות לעצמו next.js פשוט ומהיר יותר.

הקישור לפרויקט הוא: https://github.com/cyco130/vavite

ואפשר למצוא המון דוגמאות בתיקיית הדוגמאות שלהם כאן: https://github.com/cyco130/vavite/tree/main/examples

בשביל הניסוי התחלתי פרויקט vite חדש והוספתי את vavite:

$ npm create vite@latest server-demo
$ cd server-demo
$ npm install --save-dev vavite
$ npm install express @types/express

לאחר מכן יצרתי לפי ההוראות קובץ vite.config.ts עם התוכן הבא:

import { defineConfig } from "vite";
import { vavite } from "vavite";

export default defineConfig({
    appType: "custom",
    builder: {
        async buildApp(builder) {
            await builder.build(builder.environments.ssr!);
        },
    },
    plugins: [vavite()],
});

וקובץ src/entry.server.ts עם התוכן הבא:

import express from "express";

const text: string = "Hello New World";

const app = express();

app.get("/", async (req, res) => {
  res.send({ text });
});

// Default export a Connect-compatible handler for dev
export default app;

if (import.meta.env.COMMAND === "build") {
    // Start the Express server in production mode
    app.listen(3000, () => {
        console.log("Server is running on http://localhost:3000");
    });
}

if (import.meta.hot) {
    import.meta.hot.accept();
}

הפעלת שרת הפיתוח עם:

$ npm run dev

ואנחנו באוויר. התוצאה:

1. נתיב ראשי שמחזיר את ה JSON שמוגדר בקוד.
2. שגיאות קומפילציה אם אני טועה בטייפסקריפט, גם בדפדפן וגם במסוף.
3. טעינה אוטומטית אחרי כל שינוי.

אחרי שמסיימים פיתוח מפעילים npm run build והפלאגין הופך את קבצי הטייפסקריפט לקובץ dist/entry.server.js אותו אפשר להפעיל ישירות עם node dist/entry.server.js או ליצור קיצור דרך מה package.json.

בתיקיית הדוגמאות שלהם יש עוד המון דוגמאות להמון פריימוורקים וגם דוגמה לשילוב ריאקט ופיתוח SSR מאפס. סך הכל נראה יופי של כלי לאנשים שרוצים שליטה מלאה על בניית קוד צד השרת שלהם בלי להתפשר על חווית פיתוח מהירה.