Πώς λειτουργεί η τεχνολογία server-side rendering…

Ο server-side rendering (SSR) είναι μια τεχνική όπου η πρώτη εμφάνιση μιας ιστοσελίδας πραγματοποιείται στον διακομιστή, όχι στον περιηγητή του χρήστη.

Στην κανονική πελάτη-πλευρά απόδοση, ο περιηγητής λαμβάνει ένα κενό αρχείο HTML με έναν σύνδεσμο σε JavaScript. Ο περιηγητής φορτώνει το JavaScript, το αναλύει, το εκτελεί και μόνο τότε κατασκευάζει δυναμικά το DOM και εμφανίζει το περιεχόμενο.

Με το SSR, ο διακομιστής επεξεργάζεται τα συστατικά της εφαρμογής, δημιουργεί τον έτοιμο κώδικα HTML και τον στέλνει στον περιηγητή.

Τα στάδια του SSR:

Αίτημα: Ο περιηγητής του χρήστη στέλνει ένα αίτημα HTTP στον διακομιστή.
Απόδοση στον διακομιστή: Ο διακομιστής τρέχει τον κώδικα JavaScript της εφαρμογής, συμπεριλαμβανομένης της λογικής απόδοσης των UI συστατικών, και λαμβάνει μια πλήρως διαμορφωμένη αλυσίδα HTML.
Απάντηση: Ο διακομιστής στέλνει αυτό το αρχείο HTML στον περιηγητή.
Πρώτη εμφάνιση: Ο περιηγητής λαμβάνει το HTML και εμφανίζει αμέσως το περιεχόμενο της σελίδας, καθώς όλα τα στοιχεία ήδη υπάρχουν στη σήμανση.
Υδράτωση: Μετά τη φόρτωση του HTML, ο περιηγητής φορτώνει και εκτελεί τον κώδικα JavaScript της εφαρμογής. Αυτός ο κώδικας "ζωντανεύει" τη στατική σήμανση, προσθέτοντας διαδραστικότητα, χειριστές συμβάντων και δεσμεύοντας την κατάσταση.

Πλεονεκτήματα του SSR:

Βελτιωμένο SEO: Οι μηχανές αναζήτησης ευρετηριάζουν καλύτερα τις σελίδες με πλήρως διαμορφωμένο HTML.
Ταχύτερη πρώτη εμφάνιση περιεχομένου (FCP - First Contentful Paint): Ο χρήστης βλέπει το περιεχόμενο της σελίδας πιο γρήγορα.
Καλύτερη πρόσβαση για αδύναμες συσκευές και αργό διαδίκτυο: Λιγότερη εξάρτηση από την απόδοση της συσκευής του πελάτη για την εμφάνιση του βασικού περιεχομένου.

Μειονεκτήματα του SSR:

Αυξημένο φορτίο στον διακομιστή: Ο διακομιστής εκτελεί περισσότερους υπολογισμούς για την απόδοση.
Πολυπλοκότητα ανάπτυξης: Πρέπει να λαμβάνεται υπόψη η ισομορφία του κώδικα (η δυνατότητα εκτέλεσής του τόσο στον διακομιστή όσο και στον πελάτη).
Μεγαλύτερο μέγεθος απάντησης: Η πρώτη απάντηση του διακομιστή περιέχει πλήρη HTML.

// Παράδειγμα κώδικα πελάτη (ψευδοκώδικας)
// Η κανονική εφαρμογή πελάτη λαμβάνει ένα κενό div
const appDiv = document.getElementById('app');
// Το JavaScript φορτώνεται και δημιουργεί περιεχόμενο
appDiv.innerHTML = `<h1>Γειά σου, κόσμε!</h1>`;

// Παράδειγμα κώδικα διακομιστή (ψευδοκώδικας με χρήση πλαισίου)
// Στο SSR, ο διακομιστής δημιουργεί πλήρη HTML
import ReactDOMServer from 'react-dom/server';
import App from './App';

const html = ReactDOMServer.renderToString(<App />);
// Ο διακομιστής στέλνει κάτι σαν:
// <div id="app"><h1>Γειά σου, κόσμε!</h1></div>

Πώς λειτουργεί η τεχνολογία server-side rendering (SSR);