როგორ მუშაობს სერვერის მხარის რენდერინგის (SSR) ტექნოლოგია?

სერვერული რენდერინგი (SSR) არის ტექნიკა, რომლის დროსაც პირველი გამოჩენა ვებგვერდის სერვერზე ხდება, არა მომხმარებლის ბრაუზერში.

ჩვეულებრივ, კლიენტური რენდერინგის დროს, ბრაუზერი იღებს ცარიელ HTML ფაილს, რომელიც დაკავშირებულია JavaScript-თან. ბრაუზერი იტვირთება JavaScript-ს, ანალიზს უკეთებს, ასრულებს და მხოლოდ ამის შემდეგ დინამიკურად აშენებს DOM-ს და აჩვენებს შინაარსს.

SSR-ის დროს, სერვერი პროცესავს აპლიკაციის კომპონენტებს, ქმნის მზად HTML კოდს და აგზავნის მას ბრაუზერს.

SSR-ის ეტაპები:

1. მოთხოვნა: მომხმარებლის ბრაუზერი გზავნის HTTP მოთხოვნას სერვერზე.
2. სერვერზე რენდერინგი: სერვერი ამუშავებს JavaScript კოდს, რომელიც მოიცავს UI კომპონენტების რენდერინგის ლოგიკას, და იღებს სრულად ფორმირებულ HTML სტრინგს.
3. პასუხი: სერვერი აგზავნის ამ HTML ფაილს ბრაუზერს.
4. პირველი გამოჩენა: ბრაუზერი იღებს HTML-ს და დაუყოვნებლივ აჩვენებს გვერდის შინაარსს, რადგან ყველა ელემენტი უკვე არსებობს მარკაპში.
5. ჰიდრატაცია (Hydration): HTML-ის ჩატვირთვის შემდეგ, ბრაუზერი იტვირთება და ასრულებს აპლიკაციის JavaScript კოდს. ეს კოდი "გაახალგაზრდავებს" სტატიკურ მარკაპს, დამატებით აძლიერებს ინტერაქტიულობას, მოვლენის დამუშავებლებს და დაკავშირებს მდგომარეობას.

SSR-ის უპირატესობები:

• SEO-ს გაუმჯობესება: სრულად ფორმირებული HTML-ის გამო, საძიებო სისტემის ბოტები უკეთ იინდექსირებენ გვერდებს.
• პირველი შინაარსის სწრაფი გამოჩენა (FCP - First Contentful Paint): მომხმარებელი უფრო სწრაფად ხედავს გვერდის შინაარს.
• მცირე დამოკიდებულება სუსტი მოწყობილობებისა და ნელი ინტერნეტისთვის: ნაკლები დამოკიდებულება აქვს მომხმარებლის მოწყობილობის შესრულებაზე ძირითად შინაარსის ჩვენებისთვის.

უარყოფითი მხარეები:

• მატება სერვერზე დატვირთვა: სერვერი მეტ გამოთვლებს ახორციელებს რენდერინგისთვის.
• განვითარების სირთულე: საჭიროა კოდის იმორფიზმის გათვალისწინება (შესაძლებლობა მუშაობის როგორც სერვერზე, ასევე კლიენტზე).
• პასუხის ზომის გაზრდა: პირველი პასუხი სერვერზე შეიცავს სრულ HTML-ს.

// კლიენტის კოდის მაგალითი (პსევდოკოდი)
// ჩვეულებრივი კლიენტური აპლიკაცია იღებს ცარიელ div-ს
const appDiv = document.getElementById('app');
// JavaScript იტვირთება და ქმნის შინაარს
appDiv.innerHTML = `<h1>Hello, world!</h1>`;

// სერვერული კოდის მაგალითი (პსევდოკოდი, ფრეიმვორკის გამოყენებით)
// SSR-ის დროს, სერვერი ქმნის სრულ HTML-ს
import ReactDOMServer from 'react-dom/server';
import App from './App';

const html = ReactDOMServer.renderToString(<App />);
// სერვერი აგზავნის რაღაცას:
// <div id="app"><h1>Hello, world!</h1></div>