Sobes.tech
Intervyu yordami
Resurslar
Intervyuga tayyorgarlik
Resurslar
Ish qidirish
Resurslar
Huquqiy
Savollarga qaytish
Middle

Server tomonidan render qilish texnologiyasi (SSR) qanday ishlaydi?

sobes.tech AI

AIdan javob

Server tomonidan rendering (SSR) — bu veb-sahifaning birinchi ko‘rinishi serverda, foydalanuvchining brauzerida emas, amalga oshiriladigan texnikadir.

Oddiy mijoz tomonidagi renderingda, brauzer bo‘sh HTML faylini JavaScriptga havola bilan oladi. Brauzer JavaScriptni yuklab, tahlil qiladi, bajaradi va faqat shundan so‘ng DOMni dinamik tarzda quradi va mazmunni ko‘rsatadi.

SSR bilan, server ilovaning komponentlarini ishlov beradi, tayyor HTML kodini ishlab chiqaradi va uni brauzerga yuboradi.

SSR bosqichlari:

  1. So‘rov: Foydalanuvchining brauzeri serverga HTTP so‘rov yuboradi.
  2. Serverda render qilish: Server ilovaning JavaScript kodini ishga tushiradi, UI komponentlarini render qilish mantiqini o‘z ichiga oladi va to‘liq shakllangan HTML satrini oladi.
  3. Javob: Server bu HTML faylini brauzerga yuboradi.
  4. Birinchi ko‘rinish: Brauzer HTMLni oladi va darhol sahifa mazmunini ko‘rsatadi, chunki barcha elementlar allaqachon markupda mavjud.
  5. Hidratatsiya: HTML yuklangandan so‘ng, brauzer ilovaning JavaScript kodini yuklab, ishga tushiradi. Bu kod statik markupni "hayotga keltiradi", interaktivlik, voqealar uchun handlerlar qo‘shadi va holatni bog‘laydi.

SSR ning afzalliklari:

  • Yaxshilangan SEO: Qidiruv robotlari to‘liq shakllangan HTML bilan sahifalarni yaxshiroq indekslaydi.
  • Birinchi Contentful Paint (FCP) — sahifa mazmuni tezroq ko‘rinadi: Foydalanuvchi sahifa mazmunini tezroq ko‘radi.
  • Pastki qurilma va sekin internet uchun yaxshilangan kirish imkoniyati: Asosiy mazmunni ko‘rsatishda mijoz qurilmasining ishlashiga kamroq bog‘liq.

SSR ning kamchiliklari:

  • Serverga yuklama ortadi: Server render qilish uchun ko‘proq hisoblashlar bajaradi.
  • Dasturlash murakkabligi: Kodning izomorfiyasini (server va mijozda ham ishlash imkoniyati) hisobga olish kerak.
  • Javobning kattaligi oshadi: Birinchi server javobi to‘liq HTMLni o‘z ichiga oladi.
// Mijoz kodining misoli (pseudokod)
// Oddiy mijoz ilovasi bo‘sh div oladi
const appDiv = document.getElementById('app');
// JavaScript yuklanadi va mazmun yaratadi
appDiv.innerHTML = `<h1>Salom, dunyo!</h1>`;

// Server kodining misoli (frameworkdan foydalanib pseudokod)
// SSRda, server to‘liq HTML ishlab chiqaradi
import ReactDOMServer from 'react-dom/server';
import App from './App';

const html = ReactDOMServer.renderToString(<App />);
// Server quyidagicha yuboradi:
// <div id="app"><h1>Salom, dunyo!</h1></div>
OldingiKeyingi