Next.js App Router: SSR va SSG - To'liq Qo'llanma

Next.js App Router React ilovalarini yaratish uslubimizni inqilob qilib, unumdorlik, moslashuvchanlik va dasturchi tajribasini oshirdi. Ushbu yangi arxitekturaning markazida ikkita kuchli renderlash strategiyasi yotadi: Server-Side Rendering (SSR) va Statik Sayt Generatsiyasi (SSG). To'g'ri yondashuvni tanlash ilovangizning unumdorligi, SEO va foydalanuvchi tajribasini optimallashtirish uchun juda muhimdir. Ushbu to'liq qo'llanma Next.js App Router kontekstida SSR va SSGning nozik jihatlarini ochib beradi va loyihalaringiz uchun ongli qarorlar qabul qilishingizga yordam beradi.

Asoslarni Tushunish: SSR va SSG

Next.js App Routerning o'ziga xos xususiyatlariga sho'ng'ishdan oldin, keling, SSR va SSG haqida aniq tushunchaga ega bo'laylik.

Server-Side Rendering (SSR)

SSR - bu har bir so'rov uchun React komponentlarini serverda HTMLga render qilish texnikasidir. Server to'liq render qilingan HTMLni mijoz brauzeriga yuboradi, so'ngra u sahifani "jonlantiradi" va interaktiv qiladi.

SSRning Asosiy Xususiyatlari:

• Dinamik Kontent: Tez-tez o'zgaradigan yoki shaxsiylashtirilgan kontentga ega ilovalar uchun ideal. Masalan, dinamik narxlarga ega elektron tijorat mahsulot sahifalari, ijtimoiy tarmoq lentalari yoki foydalanuvchi panellari.
• Real Vaqtdagi Ma'lumotlar: Real vaqtda ma'lumotlar yangilanishini talab qiladigan ilovalar uchun mos keladi. Bunga jonli sport natijalari, fond bozori trekerlari yoki hamkorlikdagi hujjat muharrirlari kiradi.
• Yaxshilangan SEO: Qidiruv tizimi kraulerlari to'liq render qilingan HTMLni osongina indekslay oladi, bu esa SEO unumdorligini yaxshilaydi.
• Sekinroq Dastlabki Yuklanish Vaqti: Server har bir so'rov uchun sahifani render qilishi kerakligi sababli, dastlabki yuklanish vaqti SSGga nisbatan sekinroq bo'lishi mumkin.
• Server Talablari: SSR renderlash jarayonini boshqarish uchun server infratuzilmasini talab qiladi.

Statik Sayt Generatsiyasi (SSG)

SSG esa, aksincha, React komponentlarini qurish vaqtida (build time) oldindan HTMLga render qilishni o'z ichiga oladi. Hosil qilingan HTML fayllar keyin to'g'ridan-to'g'ri CDN yoki veb-serverdan taqdim etiladi.

SSGning Asosiy Xususiyatlari:

• Statik Kontent: Kontenti tez-tez o'zgarmaydigan veb-saytlar uchun eng mos keladi. Bularga bloglar, hujjatlar saytlari, portfoliolar va marketing veb-saytlari kiradi.
• Tez Dastlabki Yuklanish Vaqti: Sahifalar oldindan render qilinganligi sababli, ular juda tez taqdim etilishi mumkin, bu esa ajoyib unumdorlikni ta'minlaydi.
• Yaxshilangan SEO: SSRga o'xshab, qidiruv tizimi kraulerlari oldindan render qilingan HTMLni osongina indekslay oladi.
• Masshtablashuvchanlik: SSG saytlari juda masshtablashuvchan, chunki ularni CDNdan osongina taqdim etish mumkin.
• Qurish Vaqti: Ko'p statik kontentga ega yirik veb-saytlar uchun qurish jarayoni uzoqroq bo'lishi mumkin.

Next.js App Routerda SSR va SSG: Asosiy Farqlar

Next.js App Router marshrutlarni aniqlash va ma'lumotlarni olishni boshqarish uchun yangi paradigmani taqdim etadi. Keling, ushbu yangi muhitda SSR va SSG qanday amalga oshirilishini va ular o'rtasidagi asosiy farqlarni ko'rib chiqaylik.

App Routerda Ma'lumotlarni Olish

App Router server komponentlari ichida `async/await` sintaksisidan foydalanib ma'lumotlarni olish uchun yagona yondashuvni taqdim etadi. Bu SSR yoki SSGdan foydalanayotganingizdan qat'i nazar, ma'lumotlarni olish jarayonini soddalashtiradi.

Server Komponentlari: Server Komponentlari faqat serverda ishlaydigan yangi turdagi React komponentidir. Bu sizga API marshrutlarini yaratmasdan to'g'ridan-to'g'ri komponentlaringiz ichida ma'lumotlarni olish imkonini beradi.

Misol (SSR):

            // app/blog/[slug]/page.js
import { getBlogPost } from './data';

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

Ushbu misolda `getBlogPost` funksiyasi har bir so'rov uchun serverda blog posti ma'lumotlarini oladi. `export default async function BlogPost` uning server komponenti ekanligini bildiradi.

Misol (SSG):

            // app/blog/[slug]/page.js
import { getBlogPost } from './data';

export async function generateStaticParams() {
  const posts = await getAllBlogPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

Bu yerda `generateStaticParams` funksiyasi qurish vaqtida barcha mavjud sluglar uchun blog postlarini oldindan render qilish uchun ishlatiladi. Bu SSG uchun juda muhimdir.

Keshlashtirish Strategiyalari

Next.js App Router SSR va SSG uchun unumdorlikni optimallashtirish maqsadida o'rnatilgan keshlashtirish mexanizmlarini taqdim etadi. Ushbu mexanizmlarni tushunish juda muhimdir.

Ma'lumotlar Keshi: Odatiy bo'lib, server komponentlarida `fetch` yordamida olingan ma'lumotlar avtomatik ravishda keshlanadi. Bu shuni anglatadiki, bir xil ma'lumotlar uchun keyingi so'rovlar keshdan olinadi, bu esa ma'lumotlar manbangizdagi yuklamani kamaytiradi.

To'liq Marshrut Keshi: Marshrutning butun render qilingan natijasi keshlanishi mumkin, bu esa unumdorlikni yanada oshiradi. Siz `route.js` yoki `page.js` fayllaringizdagi `cache` opsiyasi yordamida kesh xatti-harakatini sozlashingiz mumkin.

Misol (Keshni O'chirish):

            // app/blog/[slug]/page.js

export const fetchCache = 'force-no-store';

import { getBlogPost } from './data';

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

Bunday holda, `fetchCache = 'force-no-store'` ushbu maxsus marshrut uchun keshni o'chirib qo'yadi va ma'lumotlarning har doim serverdan yangi olinishini ta'minlaydi.

Dinamik Funksiyalar

Siz `dynamic` marshrut segmenti konfiguratsiya opsiyasini o'rnatish orqali marshrutni ish vaqtida dinamik deb e'lon qilishingiz mumkin. Bu Next.js'ga marshrut dinamik funksiyalardan foydalanayotganini va qurish vaqtida unga boshqacha munosabatda bo'lish kerakligini bildirish uchun foydalidir.

Misol (Dinamik marshrut segmenti):

            // app/blog/[slug]/page.js
export const dynamic = 'force-dynamic'; // static by default, unless reading the request

import { getBlogPost } from './data';

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

Inkremental Statik Regeneratsiya (ISR)

App Router SSR va SSGning afzalliklarini birlashtirgan gibrid yondashuv sifatida Inkremental Statik Regeneratsiyani (ISR) taklif qiladi. ISR sahifalarni statik ravishda yaratishga imkon beradi va shu bilan birga ularni belgilangan intervalda fonda yangilash imkonini beradi.

ISR Qanday Ishlaydi:

1. Sahifaga birinchi so'rov statik generatsiyani ishga tushiradi.
2. Keyingi so'rovlar statik ravishda yaratilgan keshdan olinadi.
3. Fonda Next.js belgilangan vaqt oralig'idan (revalidate time) so'ng sahifani qayta yaratadi.
4. Qayta yaratish tugagach, kesh sahifaning yangi versiyasi bilan yangilanadi.

ISRni Amalga Oshirish:

ISRni yoqish uchun siz `getStaticProps` funksiyasida (`pages` katalogida) yoki `fetch` opsiyalarida (`app` katalogida) `revalidate` opsiyasini sozlashingiz kerak.

Misol (App Routerda ISR):

            // app/blog/[slug]/page.js
import { getBlogPost } from './data';

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

export const revalidate = 60; // Har 60 soniyada qayta tekshirish

            

              
                Copy
              
            
          

Ushbu misol ISRni har 60 soniyada blog postini qayta tekshirish uchun sozlaydi. Bu butun saytni qayta qurmasdan statik kontentingizni yangi saqlashga yordam beradi.

To'g'ri Strategiyani Tanlash: Amaliy Qo'llanma

SSR, SSG va ISR o'rtasida tanlov qilish ilovangizning o'ziga xos talablariga bog'liq. Qaror qabul qilish uchun quyidagi tizimdan foydalaning:

SSRdan Qachon Foydalanish Kerak:

• Dinamik Kontent: Tez-tez o'zgaradigan yoki shaxsiylashtirilgan kontentga ega ilovalar.
• Real Vaqtdagi Ma'lumotlar: Real vaqtda ma'lumotlar yangilanishini talab qiladigan ilovalar.
• Foydalanuvchiga Xos Kontent: Shaxsiylashtirilgan mahsulot tavsiyalari yoki hisob ma'lumotlarini ko'rsatishi kerak bo'lgan elektron tijorat saytlari.
• Dinamik Elementlarga Ega SEO uchun Muhim Sahifalar: Muhim sahifalar shaxsiylashtirilgan ma'lumotlarga tayansa ham to'g'ri indekslanishini ta'minlash.

Misol: Doimiy yangilanadigan maqolalar va shoshilinch yangiliklar xabarlariga ega yangiliklar veb-sayti. Shuningdek, real vaqtda yangilanadigan ijtimoiy tarmoq lentalari uchun mos keladi.

SSGdan Qachon Foydalanish Kerak:

• Statik Kontent: Kontenti tez-tez o'zgarmaydigan veb-saytlar.
• Marketing Veb-saytlari: Korporativ veb-saytlar, landing sahifalari va reklama saytlari.
• Bloglar va Hujjatlar Saytlari: Maqolalar, qo'llanmalar va hujjatlarga ega saytlar.
• Unumdorlik Muhim Bo'lgan Saytlar: SSG o'zining oldindan render qilingan tabiati tufayli yuqori unumdorlikni taklif qiladi.

Misol: Sizning ko'nikmalaringiz va loyihalaringizni namoyish etadigan shaxsiy portfolio veb-sayti. Kompaniyaning kamdan-kam o'zgaradigan "Biz Haqimizda" sahifasi.

ISRdan Qachon Foydalanish Kerak:

• Muntazam Intervallarda Kontent Yangilanishi: Vaqti-vaqti bilan yangilanishi kerak bo'lgan, ammo real vaqtda yangilanishni talab qilmaydigan kontentga ega veb-saytlar.
• Unumdorlik va Yangilikni Balanslash: SSGning unumdorlik afzalliklariga muhtoj bo'lganingizda, lekin ayni paytda kontentingizni nisbatan yangi saqlashni xohlaganingizda.
• Tez-tez Yangilanadigan Yirik Veb-saytlar: ISR sahifalarni inkremental ravishda qayta yaratish orqali uzoq qurish vaqtlaridan qochishga yordam beradi.

Misol: Mahsulot narxlari har kuni yangilanadigan elektron tijorat veb-sayti. Haftasiga bir necha marta yangi maqolalar nashr etiladigan blog.

Next.js App Routerda SSR va SSGni Amalga Oshirishning Eng Yaxshi Amaliyotlari

Optimal unumdorlik va saqlanuvchanlikni ta'minlash uchun Next.js App Routerda SSR va SSGni amalga oshirishda quyidagi eng yaxshi amaliyotlarga rioya qiling:

• Ma'lumotlarni Olishni Optimallashtirish: Renderlash vaqtini qisqartirish uchun serverda olinadigan ma'lumotlar miqdorini minimallashtiring. Faqat kerakli ma'lumotlarni olish uchun GraphQL yoki boshqa usullardan foydalaning.
• Keshdan Foydalanish: Keraksiz ma'lumotlarni olish va renderlashdan qochish uchun App Routerning o'rnatilgan keshlashtirish mexanizmlaridan foydalaning.
• Server Komponentlaridan Oqilona Foydalanish: Mijoz tomonida interaktivlikni talab qilmaydigan ma'lumotlarni olish va mantiq uchun server komponentlaridan foydalaning.
• Rasmlarni Optimallashtirish: Turli qurilmalar va ekran o'lchamlari uchun rasmlarni optimallashtirish uchun Next.js Image komponentidan foydalaning.
• Unumdorlikni Kuzatish: Unumdorlikdagi to'siqlarni aniqlash va bartaraf etish uchun unumdorlikni kuzatish vositalaridan foydalaning.
• CDN Keshini Ko'rib Chiqish: SSG va ISR uchun statik aktivlaringizni global miqyosda tarqatish va unumdorlikni yanada oshirish uchun CDNdan foydalaning. Cloudflare, Akamai va AWS CloudFront mashhur tanlovlardir.
• Core Web Vitalsga Ustunlik Berish: Foydalanuvchi tajribasi va SEOni yaxshilash uchun ilovangizni Asosiy Veb Ko'rsatkichlari (Largest Contentful Paint, First Input Delay, Cumulative Layout Shift) uchun optimallashtiring.

Ilg'or Mulohazalar

Edge Funksiyalari

Next.js shuningdek, chekka tarmoqda (edge network) serversiz funksiyalarni ishga tushirishga imkon beruvchi Edge Funksiyalarini qo'llab-quvvatlaydi. Bu A/B testlari, autentifikatsiya va shaxsiylashtirish kabi vazifalar uchun foydali bo'lishi mumkin.

Middleware

Middleware so'rov bajarilishidan oldin kodni ishga tushirishga imkon beradi. Siz middleware'dan autentifikatsiya, qayta yo'naltirish va funksiya bayroqlari kabi vazifalar uchun foydalanishingiz mumkin.

Xalqarolashtirish (i18n)

Global ilovalarni yaratishda xalqarolashtirish juda muhimdir. Next.js i18n uchun o'rnatilgan yordamni taqdim etadi, bu esa veb-saytingizning lokalizatsiya qilingan versiyalarini osongina yaratishga imkon beradi.

Misol (i18n sozlamasi):

            // next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'fr', 'es', 'de'],
    defaultLocale: 'en',
  },
}

            

              
                Copy
              
            
          

Haqiqiy Dunyo Misollari

Keling, turli kompaniyalar Next.js bilan SSR, SSG va ISRdan qanday foydalanayotganiga oid ba'zi real dunyo misollarini ko'rib chiqaylik:

• Netflix: Optimal SEO va tez dastlabki yuklanish vaqtlarini ta'minlash uchun o'zining landing sahifalari va qidiruv natijalari uchun SSRdan foydalanadi.
• Vercel: Kontentga boy va tez-tez o'zgarmaydigan hujjatlar veb-sayti uchun SSGdan foydalanadi.
• HashiCorp: O'z blogi uchun ISRdan foydalanadi, bu ularga butun saytni qayta qurmasdan muntazam ravishda yangi maqolalar nashr etish imkonini beradi.

Xulosa

Next.js App Router zamonaviy veb-ilovalarni yaratish uchun kuchli va moslashuvchan platformani taklif etadi. SSR va SSG o'rtasidagi farqlarni, shuningdek ISRning afzalliklarini tushunish, renderlash strategiyangiz haqida ongli qarorlar qabul qilish uchun juda muhimdir. Ilovangizning o'ziga xos talablarini diqqat bilan ko'rib chiqib va eng yaxshi amaliyotlarga rioya qilib, siz unumdorlikni, SEOni va foydalanuvchi tajribasini optimallashtirishingiz mumkin, natijada global auditoriyaga xizmat ko'rsatadigan muvaffaqiyatli veb-ilovani yaratasiz.

Ilovangizning unumdorligini doimiy ravishda kuzatib borishni va kerak bo'lganda renderlash strategiyangizni moslashtirishni unutmang. Veb-dasturlash landshafti doimo rivojlanib bormoqda, shuning uchun muvaffaqiyatga erishish uchun eng so'nggi tendensiyalar va texnologiyalardan xabardor bo'lish muhimdir.