const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
  Yuklanmoqda...

2. Keshlashtirish Strategiyalari

Server Tomonida Keshlashtirish: Serverdagi yuklamani kamaytirish va javob vaqtini yaxshilash uchun renderlangan HTML-ni serverda keshlang. Keshlashtirishni turli darajalarda amalga oshiring, masalan:

• Sahifa darajasida keshlashtirish: Muayyan URL uchun butun HTML chiqishini keshlang.
• Fragment keshlashtirish: Sahifaning alohida komponentlari yoki qismlarini keshlang.
• Ma'lumotlarni keshlashtirish: Sahifani renderlash uchun ishlatiladigan ma'lumotlarni keshlang.

Mijoz Tomonida Keshlashtirish: JavaScript, CSS va rasmlar kabi statik aktivlarni saqlash uchun brauzer keshidan foydalaning. Ushbu aktivlarning qancha vaqt keshlanishini nazorat qilish uchun to'g'ri kesh sarlavhalarini sozlang.

CDN (Content Delivery Network): Butun dunyodagi foydalanuvchilar uchun yuklanish vaqtini yaxshilash uchun statik aktivlaringizni global serverlar tarmog'i bo'ylab tarqating. CDNlar dinamik kontentni ham keshlay oladi, bu esa asl serveringizdagi yuklamani yanada kamaytiradi.

Misol (server tomonida keshlashtirish uchun Redis'dan foydalanish):

            
const redis = require('redis');
const client = redis.createClient();

async function renderPage(req, res) {
 const cacheKey = `page:${req.url}`;

 client.get(cacheKey, async (err, cachedHtml) => {
 if (err) {
 console.error(err);
 }

 if (cachedHtml) {
 res.send(cachedHtml);
 return;
 }

 const html = await generateHtml(req);

 client.setex(cacheKey, 3600, html); // 1 soatga keshlashtirish
 res.send(html);
 });
}

            

              
                Copy
              
            
          

3. Ma'lumotlarni Olishni Optimallashtirish

Parallel Ma'lumotlarni Olish: Umumiy ma'lumotlarni yuklash vaqtini qisqartirish uchun ma'lumotlarni bir vaqtning o'zida oling. Bir nechta ma'lumot manbalarini parallel ravishda olish uchun `Promise.all` yoki shunga o'xshash usullardan foydalaning.

Ma'lumotlarni Guruhlash: Tarmoqdagi aylanishlar sonini kamaytirish uchun bir nechta ma'lumot so'rovlarini bitta so'rovga birlashtiring. Bu, ayniqsa, ma'lumotlar bazasi yoki API'dan bog'liq ma'lumotlarni olayotganda foydalidir.

GraphQL: Muayyan komponent uchun faqat kerakli ma'lumotlarni olish uchun GraphQL'dan foydalaning. Bu ortiqcha ma'lumotlarni olishning oldini oladi va tarmoq orqali uzatiladigan ma'lumotlar hajmini kamaytiradi.

Misol (`Promise.all` yordamida):

            
async function fetchData() {
 const [user, posts, comments] = await Promise.all([
 fetch('/api/user').then(res => res.json()),
 fetch('/api/posts').then(res => res.json()),
 fetch('/api/comments').then(res => res.json()),
 ]);

 return { user, posts, comments };
}

            

              
                Copy
              
            
          

4. Samarali JavaScript Bajarilishi

JavaScript'ni Minimizallashtirish: Yuklab olinishi va bajarilishi kerak bo'lgan JavaScript kod miqdorini kamaytiring. Ishlatilmaydigan kodni olib tashlang, JavaScript fayllarini minimallashtiring va faqat kerakli kodni yuklash uchun kodni bo'lishdan foydalaning.

JavaScript Ishlashini Optimallashtirish: JavaScript kodining bajarilish vaqtini minimallashtirish uchun samarali algoritmlar va ma'lumotlar tuzilmalaridan foydalaning. Ishlashdagi muammoli joylarni aniqlash va shunga mos ravishda optimallashtirish uchun kodingizni profillang.

Veb Ishchilari (Web Workers): Asosiy ipni bloklamaslik uchun hisoblash jihatidan intensiv vazifalarni veb ishchilariga o'tkazing. Bu foydalanuvchi interfeysining sezgirligini oshirishi mumkin.

Tree Shaking: JavaScript to'plamlaringizdan foydalanilmayotgan kodni olib tashlang. Webpack va boshqa yig'uvchilar tree shaking'ni qo'llab-quvvatlaydi, bu sizning to'plamlaringiz hajmini sezilarli darajada kamaytirishi mumkin.

5. Gidratsiyani Optimallashtirish

Qisman Gidratsiya: Faqat sahifaning interaktiv komponentlarini gidratlang, statik kontentni gidratlanmagan holda qoldiring. Bu bajarilishi kerak bo'lgan JavaScript miqdorini kamaytiradi va dastlabki yuklanish vaqtini yaxshilaydi.

Progressiv Gidratsiya: Komponentlarni ma'lum bir tartibda, eng muhim komponentlardan boshlab gidratlang. Bu foydalanuvchiga sahifaning eng muhim qismlari bilan tezroq o'zaro aloqada bo'lish imkonini beradi.

Gidratsiya Nomuvofiqliklarini Bartaraf Etish: Gidratsiya nomuvofiqliklarining oldini olish uchun serverda renderlangan HTML va mijoz tomonidagi JavaScript'ning mos kelishini ta'minlang. Bu nomuvofiqliklar miltillash yoki xatoliklarga olib kelishi va ishlashga salbiy ta'sir ko'rsatishi mumkin.

Misol (progressiv gidratsiya uchun React'ning `useDeferredValue` dan foydalanish):

            
import { useState, useDeferredValue } from 'react';

function SearchInput() {
 const [query, setQuery] = useState('');
 const deferredQuery = useDeferredValue(query);

 return (
  

    setQuery(e.target.value)} />
   
  
 );
}

            

              
                Copy
              
            
          

6. Freymvorkka Xos Optimizatsiyalar

Har bir JavaScript freymvorkining SSR uchun o'ziga xos optimizatsiyalari mavjud. Mana bir nechta misollar:

• React: Statik HTMLga renderlash uchun `ReactDOMServer.renderToString` dan foydalaning. Komponentlarni memoizatsiya qilish uchun `React.memo` va `useMemo` dan foydalaning.
• Angular: SSR uchun Angular Universal'dan foydalaning. O'zgarishlarni aniqlashni optimallashtiring va Ahead-of-Time (AOT) kompilyatsiyasidan foydalaning.
• Vue.js: SSR uchun Vue Server Renderer'dan foydalaning. Komponentlarni renderlashni optimallashtiring va komponentlar va marshrutlar uchun yengil yuklashdan foydalaning.
• Next.js: Next.js SSR uchun maxsus ishlab chiqilgan React freymvorkidir. U SSR, kodni bo'lish va marshrutlash uchun o'rnatilgan qo'llab-quvvatlashni ta'minlaydi.
• Nuxt.js: Nuxt.js SSR uchun maxsus ishlab chiqilgan Vue.js freymvorkidir. U SSR, kodni bo'lish va marshrutlash uchun o'rnatilgan qo'llab-quvvatlashni ta'minlaydi.

SSR Optimizatsiyasi Uchun Vositalar

Bir nechta vositalar SSR ishlashini optimallashtirishga yordam beradi:

• Google PageSpeed Insights: Veb-saytingizning ishlashini tahlil qiling va yaxshilash kerak bo'lgan sohalarni aniqlang.
• WebPageTest: Veb-saytingizning ishlashini turli joylar va tarmoq sharoitlaridan sinab ko'ring.
• Lighthouse: Veb-sahifalar sifatini yaxshilash uchun ochiq manbali, avtomatlashtirilgan vosita. U ishlash, maxsus imkoniyatlar, progressiv veb-ilovalar, SEO va boshqalar uchun auditlarga ega.
• Webpack Bundle Analyzer: JavaScript to'plamlaringiz hajmini vizualizatsiya qiling va kodni bo'lish imkoniyatlarini aniqlang.
• New Relic, Datadog, Sentry: Ilovangizdagi ishlash muammolarini, shu jumladan server tomonida renderlashdagi qiyinchiliklarni aniqlash va diagnostika qilish uchun ilovalar ishlashini monitoring qilish vositalari.

SSR Amalga Oshirish Misollari

Quyida turli JavaScript freymvorklarida SSR qanday amalga oshirilishi mumkinligiga oid ba'zi misollar keltirilgan:

React va Next.js

Next.js server tomonida renderlashni o'rnatilgan holda qo'llab-quvvatlab, SSRni soddalashtiradi. `pages` katalogidagi sahifalar avtomatik ravishda serverda renderlanadi.

            
// pages/index.js

function HomePage(props) {
 return (
  

   
Veb-saytimga xush kelibsiz!
   
Serverdan olingan ma'lumotlar: {props.data}
  
 );
}

export async function getServerSideProps(context) {
 const data = await fetchData();
 return {
  props: { data }, // sahifa komponentiga props sifatida uzatiladi
 };
}

export default HomePage;

            

              
                Copy
              
            
          

Vue.js va Nuxt.js

Nuxt.js Vue.js ilovalari uchun Next.js ga o'xshash tajribani taqdim etadi. U SSRni soddalashtiradi va marshrutlash, kodni bo'lish va boshqalar uchun o'rnatilgan qo'llab-quvvatlashni ta'minlaydi.

            
// pages/index.vue





            

              
                Copy
              
            
          

Angular va Angular Universal

Angular Universal Angular ilovalari uchun server tomonida renderlashni yoqadi. U Next.js yoki Nuxt.js ga qaraganda ko'proq sozlashni talab qiladi, lekin SSR uchun kuchli yechimni taqdim etadi.

1. Angular Universal o'rnatish: `ng add @nguniversal/express-engine`
2. Serverni sozlash: Server tomonida renderlashni boshqarish uchun `server.ts` faylini o'zgartiring.
3. Ilovani ishga tushirish: `npm run dev:ssr`

Xulosa

Server tomonida renderlash JavaScript freymvorklariga asoslangan veb-ilovalarning ishlashi va SEO'sini yaxshilash uchun kuchli usuldir. Serverda HTML-ni oldindan renderlash orqali SSR dastlabki yuklanish vaqtlarini sezilarli darajada qisqartirishi, qidiruv tizimlarida ko'rinishni yaxshilashi va umumiy foydalanuvchi tajribasini oshirishi mumkin. Garchi SSR ishlab chiqish jarayoniga qo'shimcha murakkablik kiritishi mumkin bo'lsa-da, uning afzalliklari ko'pincha qiyinchiliklardan ustun turadi. Ushbu qo'llanmada keltirilgan optimallashtirish usullarini amalga oshirish orqali dasturchilar global miqyosda yuqori samarali, SEO-ga mos va yuqori darajadagi foydalanuvchi tajribasini taqdim etadigan veb-ilovalarni yaratish uchun SSR kuchidan foydalanishlari mumkin. Bu maslahatlarni bir martalik yechim emas, balki davomiy jarayonning bir qismi deb hisoblang. Veb doimo rivojlanmoqda va sizning optimallashtirish strategiyalaringiz ham moslashishi kerak.

Ilovangizni muntazam ravishda profillashni va kerak bo'lganda optimallashtirish usullaringizni o'zgartirishni unutmang. Shuni ham yodda tutingki, SSR ga eng yaxshi yondashuv ilovangizning o'ziga xos talablariga qarab farq qiladi. Turli usullarni sinab ko'ring va o'z vaziyatingiz uchun eng yaxshi ishlaydiganlarini toping. Turli optimizatsiyalarning ishlash va foydalanuvchi tajribasiga ta'sirini o'lchash uchun A/B testlarini o'tkazishdan qo'rqmang. Va nihoyat, SSR va front-end ishlashini optimallashtirish bo'yicha eng so'nggi ilg'or tajribalardan xabardor bo'lib turing. Veb-ishlab chiqish landshafti doimo o'zgarib turadi va yangi texnologiyalar va usullarni o'rganishni va ularga moslashishni davom ettirish muhimdir.