מה ההבדל בין SSR ל-SSG ב-Next.js: המדריך המלא

אם אתה מפתח Next.js, בטח שמעת על SSR ו-SSG. במדריך הזה נסביר לך בדיוק מה ההבדל, מתי להשתמש בכל אחד, ומה היתרונות והחסרונות.

מה זה SSR?

SSR (Server-Side Rendering) = השרת יוצר את ה-HTML בכל בקשה.

איך זה עובד?

// app/page.tsx
export default async function Page() {
  // זה רץ על השרת בכל בקשה
  const data = await fetch('https://api.example.com/data');
  
  return (
    <div>
      <h1>{data.title}</h1>
    </div>
  );
}

התהליך:

1. משתמש מבקש דף
2. השרת מריץ את הקוד
3. השרת יוצר HTML
4. השרת שולח HTML למשתמש

יתרונות SSR

✅ תוכן דינמי - תמיד מעודכן
✅ SEO טוב - Google רואה תוכן מלא
✅ Personalization - תוכן מותאם למשתמש
✅ Real-time data - נתונים עדכניים

חסרונות SSR

❌ איטי יותר - צריך לרוץ על השרת כל פעם
❌ עומס על השרת - כל בקשה = עבודה
❌ TTFB גבוה - Time to First Byte איטי יותר

מה זה SSG?

SSG (Static Site Generation) = ה-HTML נוצר בזמן Build.

איך זה עובד?

// app/page.tsx
export default async function Page() {
  // זה רץ רק בזמן Build
  const data = await fetch('https://api.example.com/data');
  
  return (
    <div>
      <h1>{data.title}</h1>
    </div>
  );
}

התהליך:

1. בזמן npm run build
2. Next.js מריץ את הקוד
3. Next.js יוצר HTML סטטי
4. HTML נשמר כקובץ
5. משתמש מקבל HTML מוכן

יתרונות SSG

✅ מהיר מאוד - HTML מוכן מראש
✅ עומס נמוך על השרת - רק הגשה
✅ CDN Friendly - קל לקאש
✅ ביצועים מעולים - Core Web Vitals טובים

חסרונות SSG

❌ תוכן סטטי - לא מתעדכן אוטומטית
❌ Build Time - צריך לבנות מחדש לעדכונים
❌ לא מתאים לתוכן דינמי - כמו Dashboard

מה זה ISR?

ISR (Incremental Static Regeneration) = הטוב משני העולמות.

איך זה עובד?

// app/page.tsx
export const revalidate = 3600; // רענון כל שעה

export default async function Page() {
  const data = await fetch('https://api.example.com/data');
  
  return (
    <div>
      <h1>{data.title}</h1>
    </div>
  );
}

התהליך:

1. בזמן Build - יוצר HTML
2. משתמש מבקש דף - מקבל HTML מהיר
3. אחרי X שניות - רענון ברקע
4. הבקשה הבאה - מקבל HTML מעודכן

יתרונות ISR

✅ מהיר כמו SSG - HTML מוכן
✅ עדכונים אוטומטיים - רענון ברקע
✅ עומס נמוך - רק רענון מדי פעם
✅ מתאים לרוב המקרים - איזון מושלם

מתי להשתמש בכל אחד?

SSG - מתי?

מתאים ל:

• בלוגים
• אתרי תוכן
• Landing Pages
• תיעוד
• אתרים עם תוכן סטטי

דוגמה:

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

export default async function Post({ params }) {
  const post = await getPost(params.slug);
  return <article>{post.content}</article>;
}

SSR - מתי?

מתאים ל:

• Dashboards
• אתרים עם תוכן אישי
• E-commerce עם מחירים דינמיים
• אתרים עם Authentication

דוגמה:

// app/dashboard/page.tsx
export default async function Dashboard() {
  const session = await getServerSession();
  const userData = await getUserData(session.user.id);
  
  return <div>Welcome {userData.name}</div>;
}

ISR - מתי?

מתאים ל:

• בלוגים עם עדכונים
• E-commerce עם מוצרים
• אתרי חדשות
• אתרים עם תוכן שמתעדכן מדי פעם

דוגמה:

// app/products/[id]/page.tsx
export const revalidate = 3600; // רענון כל שעה

export default async function Product({ params }) {
  const product = await getProduct(params.id);
  return <div>{product.name}</div>;
}

השוואה - טבלה

דוגמאות מעשיות

דוגמה 1: בלוג

הבחירה: ISR

// app/blog/[slug]/page.tsx
export const revalidate = 3600;

export default async function Post({ params }) {
  const post = await getPost(params.slug);
  return <article>{post.content}</article>;
}

למה ISR:

• מהיר מאוד
• עדכונים אוטומטיים
• SEO מעולה

דוגמה 2: Dashboard

הבחירה: SSR

// app/dashboard/page.tsx
export default async function Dashboard() {
  const session = await getServerSession();
  const data = await getPersonalizedData(session.user.id);
  return <Dashboard data={data} />;
}

למה SSR:

• תוכן אישי
• Real-time data
• Authentication

דוגמה 3: Landing Page

הבחירה: SSG

// app/page.tsx
export default function HomePage() {
  return (
    <div>
      <h1>Welcome</h1>
      <p>תוכן סטטי</p>
    </div>
  );
}

למה SSG:

• מהיר מאוד
• תוכן סטטי
• CDN Friendly

טיפים מעשיים

1. התחל עם SSG

לכל אתר חדש, התחל עם SSG:

• הכי מהיר
• הכי פשוט
• הכי בטוח

2. שדרג ל-ISR אם צריך

אם צריך עדכונים:

• הוסף revalidate
• זהו - עובד!

3. השתמש ב-SSR רק אם חייב

SSR רק אם:

• תוכן אישי
• Real-time data
• Authentication

4. מדוד ביצועים

תמיד מדוד:

• PageSpeed Insights
• Lighthouse
• Core Web Vitals

סיכום

SSG:

• ✅ הכי מהיר
• ✅ מתאים לתוכן סטטי
• ❌ לא מתעדכן אוטומטית

SSR:

• ✅ תוכן דינמי
• ✅ Real-time
• ❌ איטי יותר

ISR:

• ✅ מהיר + עדכונים
• ✅ איזון מושלם
• ✅ מתאים לרוב המקרים

המלצה: התחל עם SSG, שדרג ל-ISR אם צריך, השתמש ב-SSR רק אם חייב.

רוצה עזרה בבחירת האסטרטגיה הנכונה? צור קשר ונעזור לך.