Server tomonida render qilish va SPA (bir sahifali…

Server tarafidan render qilish (SSR) va SPA (Single Page Application) veb-ilovalarni yaratishda turli yondashuvlarni ifodalaydi.

Server tarafidan render qilish (SSR):

Birinchi so'rovdan ma'lumotlarni o'z ichiga olgan boshlang'ich HTML serverda ishlab chiqariladi.
Brauzer to'liq tayyor HTML-ni oladi va uni darhol ko'rsatishi mumkin.
Sahifa yuklangandan so'ng, JavaScript yordamida (hidratatsiya) interaktivlik qo'shiladi.

SSR ning afzalliklari:

SEO uchun yaxshiroq optimallashtirish, chunki qidiruv robotlari tayyor kontentni ko'radi.
Birinchi chizish vaqti tezlashadi.
Zaif qurilmalarda yaxshi ishlash.

SSR ning kamchiliklari:

Serverga yuklama ortadi.
Ilova arxitekturasi murakkablashadi.

SPA (Single Page Application):

Brauzer minimal tuzilishga ega va JavaScript va CSS uchun linklarni o'z ichiga olgan yagona HTML faylni yuklaydi.
Ilovaning barcha kontenti va mantiqi JavaScript yordamida mijoz tomonida yuklanadi va chiziladi.
Sahifalar o'rtasidagi o'tishlar sahifa yangilamasdan, DOM va brauzer tarixini manipulyatsiya qilish orqali amalga oshiriladi.

SPA ning afzalliklari:

Sahifalar o'rtasida silliq o'tishlar.
Nativ ilova hissi.
Birinchi yuklashdan keyin serverga yuklama kamayadi.
React, Angular, Vue.js kabi frameworklar bilan qulay rivojlantirish.

SPA ning kamchiliklari:

SEO muammolari, chunki kontent mijoz tomonida ishlab chiqariladi va qidiruv robotlari uchun kirish mumkin bo'lmasligi mumkin.
Birinchi chizish vaqti uzoqroq, chunki brauzer barcha JS paketini yuklashi va bajarishi kerak.
Mijoz qurilmasining yuqori ishlash talablari.

Asosiy farqlar jadvalda:

Xususiyat	SSR	SPA
Kontent ishlab chiqarish	Serverda	Mijoz tomonida
Birinchi chizish	Tez	Sekinroq (JS yuklanmaguncha)
SEO	Yaxshi	Muammolar bo'lishi mumkin
Serverga yuklama	Boshlanishda yuqori	Birinchi yuklashdan keyin pastroq
Foydalanuvchi tajribasi	Qayta yuklamalar sezilishi mumkin	Silliq o'tishlar
Rivojlantirish murakkabligi	Ko'proq	Kamroq (frameworklardan foydalanish bilan)

SSR misoli (soddalashtirilgan):

// Server kodi (Node.js)
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  const data = { title: 'Salom, dunyo!', content: 'Bu serverdan kontent.' };
  const html = `
    <html>
      <head>
        <title>${data.title}</title>
      </head>
      <body>
        <h1>${data.title}</h1>
        <p>${data.content}</p>
        <script src="/client.js"></script> // Interaktivlik uchun skript
      </body>
    </html>
  `;
  res.send(html);
});

app.listen(3000, () => {
  console.log('Port 3000 da server ishlamoqda');
});

SPA misoli (soddalashtirilgan, konseptual):

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Mening SPA</title>
  <script src="/bundle.js"></script> // Ilovaning barcha JS kodi
</head>
<body>
  <div id="app"></div> // Mijoz tomonida render qilish uchun montaj nuqtasi
</body>
</html>

SPA'da, bundle.js barcha komponentlarni render qilish va mijoz tomonida marshrutlashni boshqarish uchun mantiqni o'z ichiga oladi.

Server tomonida render qilish va SPA (bir sahifali ilova) o'rtasidagi farq nima?