Ի՞նչն է տարբերությունը սերվերային ռենդերինգի և SPA…

Սերվերային ռենդերինգը (SSR) և SPA (Single Page Application) տարբեր մոտեցումներ են վեբ հավելվածների ստեղծման համար:

Սերվերային ռենդերինգ (SSR):

Առաջին HTML-ը ստեղծվում է սերվերից և պարունակում է տվյալներ առաջին հարցումից:
Բրաուզերը ստանում է ամբողջովին պատրաստ HTML, որը կարող է անմիջապես ցուցադրել:
Սկզբից հետո, ինտերակտիվությունը ավելացվում է JavaScript-ով (հիդրատացիա):

SSR-ի առավելությունները:

Լավ SEO օպտիմիզացիա, քանի որ որոնողական ռոբոտները տեսնում են պատրաստ բովանդակությունը:
Արագ առաջին պատկերի ժամանակ:
Լավ կատարողականություն թույլ սարքերում:

SSR-ի թերությունները:

Ավելի մեծ բեռ սերվերի վրա:
Ավելի բարդ ծրագրային շինարարություն:

SPA (Single Page Application):

Բրաուզերը բեռնում է մեկ HTML ֆայլ, որը պարունակում է նվազագույն կառուցվածք և հղումներ JavaScript և CSS-ներին:
Բոլոր բովանդակությունն ու տրամաբանությունը բեռնում և ցուցադրվում է հաճախորդի կողմից JavaScript-ով:
Միջանցքները էջերի միջև կատարվում են առանց վերաբեռնման, DOM-ի և բրաուզերի պատմության միջոցով:

SPA-ի առավելությունները:

Հարթ անցումներ էջերի միջև:
Նատիվ հավելվածի զգացում:
Առաջին բեռնումից հետո սերվերի բեռի նվազում:
Հեշտ զարգացում React, Angular, Vue.js ֆրեյմվորկների հետ:

SPA-ի թերությունները:

SEO խնդիրներ, քանի որ բովանդակությունը ստեղծվում է հաճախորդի կողմից և կարող է չլինել որոնողական ռոբոտների համար հասանելի:
Ավելի երկար առաջին պատկերի ժամանակ:
Բարձր պահանջներ հաճախորդի սարքի կատարողականության համար:

Հիմնական տարբերությունները աղյուսակում:

Գծագիր	SSR	SPA
Բովանդակության ստեղծում	Սերվերից	Հաճախորդից
Առաջին պատկերի ժամանակ	Արագ	Ավելի դանդաղ (JS բանդլի բեռնումից հետո)
SEO	Լավ	Մոտավորապես խնդիրներ
Բեռ սերվերի վրա	Բարձր սկզբում	Նվազում առաջին բեռնումից հետո
Օգտագործողի փորձը	Մոտենում է վերաբեռնման	Հարթ անցումներ
Զարգացման բարդություն	Ավելի բարձր	Փոքր (ֆրեյմվորկների օգտագործմամբ)

SSR օրինակ (պարզեցված):

// Սերվերային կոդ (Node.js)
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  const data = { title: 'Բարև, աշխարհ!', content: 'Սա սերվերից բերված բովանդակությունն է.' };
  const html = `
    <html>
      <head>
        <title>${data.title}</title>
      </head>
      <body>
        <h1>${data.title}</h1>
        <p>${data.content}</p>
        <script src="/client.js"></script> // Ինտերակտիվության համար սցրիպտ
      </body>
    </html>
  `;
  res.send(html);
});

app.listen(3000, () => {
  console.log('Սերվերը լսում է 3000 պորտին');
});

SPA օրինակ (պարզեցված, կոնցեպտուալ):

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Իմ SPA-ն</title>
  <script src="/bundle.js"></script> // Բոլոր JS կոդը
</head>
<body>
  <div id="app"></div> // Միջավայր հաճախորդի ռենդերինգի համար
</body>
</html>

SPA-ում, bundle.js կպարունակի բոլոր կոմպոնենտների ռենդերինգի և երթուղիների կառավարումը հաճախորդի կողմից։

Ի՞նչն է տարբերությունը սերվերային ռենդերինգի և SPA (մեկ էջանի հավելվածի) միջև։