Sobes.tech
Кӯмаки мусоҳиба
Захираҳо
Тайёрии мусоҳиба
Захираҳо
Ҷустуҷӯи кор
Захираҳо
Ҳуқуқӣ
Бозгашт ба саволҳо
Middle

Технологияи серверӣ (SSR) чӣ гуна кор мекунад?

sobes.tech AI

Ҷавоб аз AI

Техникии, кидаги сервер томонидан рендеринг (SSR), биринчи веб-саҳифа кўрсатилиши серверда бўлиб, фойдаланувчининг браузерида эмас.

Оддий мижоз томонидан рендерингда, браузер бўш HTML-файлни JavaScript билан бирга олади. Браузер JavaScript-ни юклайди, парс қилади, ишга туширади ва фақат шундан кейин DOM-ни динамик равишда қуриб, мазмунни кўрсата бошлайди.

SSRда, сервер дастур компонентларини ишлайди, тайёр HTML кодни тайёрлайди ва уни браузерга юборади.

SSR босқичлари:

  1. Сўров: Фойдаланувчи браузери HTTP сўровини серверга юборди.
  2. Серверда рендеринг: Сервер UI компонентларининг рендерлаш логикасини ҳам ўз ичига олган JavaScript кодини ишга туширади ва тўлиқ тайёр HTML-стрингни олади.
  3. Жавоб: Сервер бу HTML-файлни браузерга юборди.
  4. Биринчи кўрсатиш: Браузер HTML-ни олади ва мазмунни тезда кўрсатади, чунки барча элементлар аллақачон белгиланган.
  5. Гидратация (Hydration): HTML юклангандан кейин, браузер JavaScript кодини юклайди ва ишга туширади. Бу код статик мазмунда "жонлантириш", интерактивлик, ҳодиса ишловчиларини қўшиш ва ҳолатни боғлаш учун хизмат қилади.

SSRнинг афзалликлари:

  • SEOни яхшилаш: Тўлиқ HTML билан тўлиқ индексланган саҳифалар қидирув роботлари томонидан яхши индексланади.
  • Биринчи мазмунли чизмани тезлаштириш (FCP - First Contentful Paint): Фойдаланувчи мазмунни тезроқ кўради.
  • Заиф қурилмалар ва секин интернет учун яхшироқ кириш имконияти: Асосий мазмунни кўрсатишда клиент қурилмасининг ишлаш қобилиятига бўлган боғлиқлик камаяди.

SSRнинг камчиликлари:

  • Серверда юкламани ошириш: Сервер рендерлаш учун кўпроқ ҳисоблашлар олиб боради.
  • Ривожланишнинг мураккаблиги: Коднинг изоморфизмини ҳисобга олиш керак (серверда ҳам, мижозда ҳам ишлаш имконияти).
  • Жавобнинг катталиги: Биринчи жавоб тўлиқ 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>
ГузаштаОянда