Sobes.tech
Հարցազրույցի օգնություն
Ռեսուրսներ
Հարցազրույցի պատրաստում
Ռեսուրսներ
Աշխատանքի որոնում
Ռեսուրսներ
Իրավական
Վերադարձ դեպի հարցեր
Middle

Ինչպես է աշխատում սերվերի կողմի ռենդերինգի (SSR) տեխնոլոգիան։

sobes.tech AI

Պատասխան AI-ից

Սերվերային ռենդերինգը (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>
ՆախորդՀաջորդը