Server tərəfi renderləşməsi və SPA (tək səhifəli…

Server tərəfli renderləşdirmə (SSR) və SPA (Single Page Application) veb tətbiqlərinin yaradılmasında fərqli yanaşmaları təmsil edir.

Server tərəfli renderləşdirmə (SSR):

İlk HTML serverdə yaradılır və ilk sorğudan məlumatları əhatə edir.
Brauzer tam hazır HTML alır və dərhal göstərə bilər.
Səhifə yükləndikdən sonra, interaktivlik JavaScript (həzm) vasitəsilə əlavə olunur.

SSR-nin üstünlükləri:

Daha yaxşı SEO optimizasiyası, çünki axtarış robotları hazır məzmunu görür.
İlk çəkiliş vaxtının sürətləndirilməsi.
Zəif cihazlarda daha yaxşı performans.

SSR-nin çatışmazlıqları:

Server üzərində daha çox yük.
Daha mürəkkəb tətbiq memarlığı.

SPA (Single Page Application):

Brauzer minimal markup və JavaScript və CSS-ə linklər olan tək HTML fayl yükləyir.
Bütün məzmun və tətbiq logikası JavaScript vasitəsilə yüklənir və göstərilir.
Səhifələr arasında keçid yenidən yüklənmədən həyata keçirilir, DOM və brauzer tarixçəsi ilə manipulyasiya edilərək.

SPA-nın üstünlükləri:

Səhifələr arasında hamar keçidlər.
Təbii tətbiq hissi.
İlk yükləmədən sonra server üzərində yükün azalması.
React, Angular, Vue.js kimi çərçivələrlə rahat inkişaf.

SPA-nın çatışmazlıqları:

SEO problemləri, çünki məzmun müştəri tərəfində yaradılır və axtarış robotları üçün əlçatan olmaya bilər.
İlk çəkiliş vaxtının uzun olması, çünki brauzerin bütün JS paketini yükləməsi və icra etməsi lazımdır.
Müştəri cihazının performans tələbləri yüksəkdir.

Əsas fərqlər cədvəldə:

Xüsusiyyət	SSR	SPA
Məzmunun yaradılması	Serverdə	Müştəri tərəfində
İlk çəkiliş	Tezliklə	Daha yavaş (JS yüklənəndən sonra)
SEO	Yaxşı	Problemlər ola bilər
Server yükü	Yüksək başlanğıcda	Yüklənmədən sonra azalma
İstifadəçi təcrübəsi	Yenidən yükləmələr görünə bilər	Hamar keçidlər
İnkişaf çətinliyi	Daha yüksək	Daha aşağı (framework-lərlə)

SSR nümunəsi (sadələşdirilmiş):

// Server tərəfi kodu (Node.js)
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  const data = { title: 'Salam, dünya!', content: 'Bu serverdən gələn məzmundur.' };
  const html = `
    <html>
      <head>
        <title>${data.title}</title>
      </head>
      <body>
        <h1>${data.title}</h1>
        <p>${data.content}</p>
        <script src="/client.js"></script> // interaktivlik üçün skript
      </body>
    </html>
  `;
  res.send(html);
});

app.listen(3000, () => {
  console.log('Server 3000 portunda dinləyir');
});

SPA nümunəsi (sadələşdirilmiş, konseptual):

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Mənim SPA</title>
  <script src="/bundle.js"></script> // bütün JS kodu
</head>
<body>
  <div id="app"></div> // müştəri tərəfi render üçün mərkəz
</body>
</html>

SPA-də, bundle.js bütün komponentlərin və marşrutlaşdırmanın logikasını ehtiva edəcək.

Server tərəfi renderləşməsi və SPA (tək səhifəli tətbiq) arasındakı fərq nədir?