לימוד Angular – מדריך ל SSR באפליקצית Angular

לימוד Angular – מדריך ל SSR באפליקצית Angular

Server-Side Rendering (SSR) באפליקציית Angular הוא תהליך שבו התוכן מרונדר בצד השרת ונשלח כ-HTML מוכן לדפדפן. במאמר זה נסביר מהו SSR, למה הוא נדרש, ההבדלים בין SSR ל-Single Page Application (SPA), ואיך להפוך אפליקציית SPA ל-SSR או ליצור אפליקציה היברידית שמשתמשת בשתי השיטות.

מהו SSR ולמה הוא נדרש?

SSR מאפשר לרנדר את התוכן בצד השרת ולשלוח את ה-HTML המוכן לדפדפן. זה משפר את הביצועים הראשוניים של האפליקציה ומאפשר למנועי חיפוש לסרוק ולהנדס את התוכן בצורה טובה יותר, מה שמשפיע חיובית על קידום האתר בגוגל (SEO).

יתרונות SSR:

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

ההבדל בין SSR ל-SPA

SPA (Single Page Application) היא אפליקציה שבה כל הרנדרינג נעשה בצד הלקוח. בעוד SPA מציעה חוויית משתמש חלקה יותר לאחר הטעינה הראשונית, היא עשויה לסבול מביצועים ראשוניים איטיים ויכולת SEO נמוכה יותר מאחר שהתוכן נרנדר בצד הלקוח.

SSR מספק את היתרון של טעינה ראשונית מהירה ויכולת SEO טובה יותר מאחר שהתוכן נרנדר בצד השרת ונשלח לדפדפן כ-HTML מלא.

סריקת מנועי חיפוש לאפליקציות SPA לעומת SSR

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

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

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

כיצד להפוך אפליקציית SPA ל-SSR

נשתמש ב-Angular Universal, ספרייה המאפשרת רנדרינג בצד השרת לאפליקציות Angular.

התקנת Angular Universal

ראשית, נתקין את Angular Universal באמצעות ה-CLI של Angular.

ng add @nguniversal/express-engine

הגדרת ה-Server-Side Rendering

לאחר התקנת Angular Universal, נעדכן את הקבצים הנדרשים להגדרת ה-SSR.

server.ts

import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';

const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/browser');

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule,
}));

app.set('view engine', 'html');
app.set('views', DIST_FOLDER);

app.get('*.*', express.static(DIST_FOLDER, {
  maxAge: '1y'
}));

app.get('*', (req, res) => {
  res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});

app.listen(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);
});

angular.json

{
  "projects": {
    "your-app-name": {
      ...
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/browser"
          }
        },
        "server": {
          "options": {
            "outputPath": "dist/server"
          }
        }
      }
    }
  }
}

package.json

{
  "scripts": {
    "dev:ssr": "ng run your-app-name:serve-ssr",
    "build:ssr": "ng build && ng run your-app-name:server",
    "serve:ssr": "node dist/server/main.js"
  }
}

עדכון App Module

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule.withServerTransition({ appId: 'serverApp' })],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

יצירת App Server Module

// app.server.module.ts
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [AppModule, ServerModule],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

אפליקציה היברידית: SSR ו-SPA

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

סיכום

במאמר זה למדנו מהו SSR, למה הוא נדרש וההבדלים בינו לבין SPA. כמו כן, ראינו איך להשתמש ב-Angular Universal כדי להפוך אפליקציית SPA ל-SSR או ליצור אפליקציה היברידית שמשתמשת בשתי השיטות.

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

אם מעניין אותכם לשדרג את יכולות הפיתוח שלכם ב Angular אנחנו מזמינים אותכם להתייעץ איתנו על קורס Angular .

בפוסטים הבאים נעמיק בנושאים נוספים באנגולר ובטכניקות מתקדמות נוספות, אז הישארו מעודכנים!

שתפו את הפוסט

צרו קשר

דילוג לתוכן