Next.js nima? React dan farqi, SSR, SSG, ISR, CSR tushunchalari
Muammodan boshlaylik
Siz React da portfolio sayt yozdingiz. Hammasi chiroyli ishlaydi. Bir kuni do'stingiz aytadi:
"Google da ismingni qidirsam — saytingni topolmadim."
Siz Google ga kirasiz, ismingizni yozasiz — haqiqatan ham yo'q. Nima muammo?
Muammo React ning ishlash usulida. Buni tushunish uchun brauzer va Google boti qanday farq qilishini bilish kerak.
React qanday ishlaydi va nima muammo bor
Siz google.com ga kirasiz — brauzer serverdan HTML oladi, ekranda ko'rsatadi. Oddiy.
Lekin React da boshqacha. React saytiga kirganda server bo'sh HTML yuboradi:
<html>
<body>
<div id="root"></div>
</body>
</html>
<div id="root"> — ichida hech narsa yo'q. Keyin brauzer JavaScript fayllarini yuklab oladi, ular ishlaydi, React komponentlar shu bo'sh div ichiga joylashadi. Shundan keyingina siz sahifani ko'rasiz.
Bu jarayon shunday ko'rinadi:
Siz saytga kirasiz
↓
Server → bo'sh HTML yuboradi
↓
Brauzer JS fayllarni yuklab oladi (100–500 KB)
↓
JS ishlaydi, React render qiladi
↓
Siz nihoyat sahifani ko'rasiz
Muammo 1 — Google boti sahifani ko'rmaydi.
Google boti ham xuddi shu bo'sh HTML ni oladi. Lekin u JavaScript ni ishlatmaydi — shunchaki HTML ni o'qiydi. Bo'sh <div> ko'radi va "bu sahifada hech narsa yo'q" deb ketadi. Saytingiz Google da indekslanmaydi.
Muammo 2 — Sekin internet bo'lsa oq ekran ko'rinadi. JavaScript yuklanib bo'lguncha foydalanuvchi bo'sh sahifa ko'radi. 3G internet bo'lsa bu 3–5 soniya. Ko'pchilik shunda saytni yopib ketadi.
Next.js nima
Next.js — React ustiga qurilgan framework. React sizga g'ishtlar beradi, Next.js esa o'sha g'ishtlardan uy qurish uchun tayyor loyiha beradi — poydevor, devorlar, tom hammasi.
React → faqat UI kutubxonasi, faqat CSR
Next.js → React + routing + server + optimizatsiya
Next.js yuqoridagi muammolarni hal qiladi. Qanday? Sahifani qayerda va qachon render qilishni siz tanlaysiz. Buning uchun 4 ta strategiya bor.
4 ta rendering strategiyasi
1. CSR — Client-Side Rendering
Bu React ning odatiy usuli — render brauzerda bo'ladi. Yuqorida aytgan muammo aynan shu.
Qachon ishlatiladi: Foydalanuvchiga xos ma'lumotlar — dashboard, profil sahifasi, sozlamalar. Bu sahifalar Google da indekslanishi shart emas, chunki har bir foydalanuvchi o'z ma'lumotini ko'radi.
Qachon ishlatilmaydi: Blog, mahsulot sahifasi, bosh sahifa — bular Google da ko'rinishi kerak.
'use client'
import { useState, useEffect } from 'react'
export default function ProfilePage() {
const [user, setUser] = useState(null)
useEffect(() => {
// Sahifa brauzerda ochilgandan keyin ma'lumot olinadi
fetch('/api/me').then(r => r.json()).then(setUser)
}, [])
if (!user) return <p>Yuklanmoqda...</p>
return <h1>Salom, {user.name}</h1>
}
2. SSR — Server-Side Rendering
Foydalanuvchi sahifaga kirganda server ma'lumotni oladi, HTML render qiladi va tayyor HTML ni yuboradi. Brauzer tayyor HTML ni ko'rsatadi — JavaScript kutilmaydi.
Siz saytga kirasiz
↓
Server ma'lumotni oladi (DB yoki API dan)
↓
Server HTML render qiladi
↓
Tayyor HTML sizga yetadi
↓
Siz darhol sahifani ko'rasiz
Google boti ham tayyor HTML ni oladi — hamma narsa indekslanadi.
Qachon ishlatiladi: Har so'rovda o'zgaradigan ma'lumotlar. Masalan, aviabilet narxlari — har daqiqada o'zgaradi, har foydalanuvchi uchun boshqacha bo'lishi mumkin (valyuta, chegirma).
Qachon ishlatilmaydi: Har so'rovda server ishlaydi — bu server yukini oshiradi. Agar ma'lumot tez-tez o'zgarmasa, SSG yaxshiroq.
export default async function FlightPage({ params }) {
// Bu kod serverda ishlaydi, har so'rovda qayta
const flight = await fetch(
`https://api.example.com/flights/${params.id}`,
{ cache: 'no-store' } // keshlanmasin, har safar yangi ma'lumot
).then(r => r.json())
return (
<div>
<h1>{flight.from} → {flight.to}</h1>
<p>Narx: {flight.price} so'm</p>
</div>
)
}
cache: 'no-store' — "bu ma'lumotni keshlamaslik kerak, har so'rovda yangi ol" degani. Shu bir qator SSR ni yoqadi.
3. SSG — Static Site Generation
Loyiha deploy qilinayotganda (build vaqtida) barcha sahifalar bir marta render qilinadi va HTML fayllar sifatida saqlanadi. Foydalanuvchi kirganda server shunchaki tayyor faylni beradi — hech qanday hisoblash yo'q.
Build vaqtida (bir marta):
Ma'lumot olinadi → HTML render → Fayl saqlanadi
Foydalanuvchi kirganda:
Server → tayyor HTML fayl → Foydalanuvchi
(server hech narsa hisoblamaydi — eng tez usul)
Qachon ishlatiladi: Blog postlar, hujjatlar, marketing sahifalar — ma'lumot kamdan-kam o'zgaradi.
Qachon ishlatilmaydi: Tez-tez o'zgaradigan ma'lumotlar. Agar blog postni yangilasangiz — qayta deploy qilmasangiz eski versiya ko'rinadi.
export default async function BlogPost({ params }) {
// Bu kod faqat build vaqtida ishlaydi
const post = await fetch(
`https://api.example.com/posts/${params.slug}`
).then(r => r.json())
return (
<article>
<h1>{post.title}</h1>
<div>{post.content}</div>
</article>
)
}
// Next.js ga qaysi sahifalarni oldindan yaratishni aytamiz
export async function generateStaticParams() {
const posts = await fetch('https://api.example.com/posts')
.then(r => r.json())
return posts.map(post => ({ slug: post.slug }))
}
generateStaticParams — "mana shu sluglar uchun HTML fayllar yaratib qo'y" degani. Build vaqtida Next.js har bir slug uchun alohida HTML fayl yaratadi.
4. ISR — Incremental Static Regeneration
SSG ning muammosi — ma'lumot o'zgarganda qayta deploy kerak. ISR bu muammoni hal qiladi.
ISR da sahifa SSG kabi build vaqtida yaratiladi. Lekin siz "X soniyada bir yangilansin" deb belgilaysiz. O'sha vaqt o'tgandan keyin birinchi so'rovda server yangi HTML yaratadi va eski o'rniga saqlaydi.
Build vaqtida: HTML yaratiladi
↓
Foydalanuvchi kiradi: tayyor HTML (tez!)
↓
60 soniya o'tdi
↓
Keyingi foydalanuvchi kiradi: eski HTML ko'rsatiladi,
lekin orqa fonda yangi HTML yaratiladi
↓
Undan keyingi foydalanuvchi: yangi HTML ko'radi
Qachon ishlatiladi: Ma'lumot o'zgaradi, lekin real-time shart emas. Masalan, yangiliklar sayti — yangilik 1 daqiqada ko'rinsa ham yetarli.
export default async function NewsPage() {
const news = await fetch('https://api.example.com/news', {
next: { revalidate: 60 } // 60 soniyada bir yangilanadi
}).then(r => r.json())
return (
<ul>
{news.map(item => (
<li key={item.id}>{item.title}</li>
))}
</ul>
)
}
revalidate: 60 — "bu ma'lumotni 60 soniyaga keshlash, keyin yangilansin" degani. Shu bir qator ISR ni yoqadi.
Qaysi strategiyani qachon tanlash kerak
Amaliy misol: e-commerce sayt.
Bosh sahifa (kampaniyalar) → ISR (kuniga bir marta yangilanadi)
Mahsulot ro'yxati → ISR (soatiga bir marta)
Mahsulot sahifasi → ISR (soatiga bir marta)
Savat va to'lov → CSR (foydalanuvchiga xos)
Admin panel → CSR (SEO kerak emas)
Blog → SSG (kamdan-kam o'zgaradi)
Buyurtma holati → SSR (real-time kerak)
Bir loyihada barcha strategiyalarni birga ishlatish mumkin — har sahifa uchun eng mosini tanlaysiz.
CSR SSR SSG ISR
────────────────────────────────────────────────────
Tezlik Sekin O'rta Eng tez Eng tez
SEO Yo'q Bor Bor Bor
Server yuki Kam Ko'p Yo'q Kam
Ma'lumot Real-time Real-time Statik Vaqti-vaqti
Next.js React ni almashtirmaydi
Ko'pchilik o'ylaydi: "Next.js o'rgansam React kerak emas". Bu noto'g'ri.
Next.js — React ustiga qurilgan. Siz hali ham React komponentlar yozasiz, useState, useEffect, props — bularning hammasi ishlaydi. Next.js faqat qo'shimcha imkoniyatlar beradi.
React bilmasdan Next.js o'rganish — poydevor qo'ymasdan uy qurish. Avval React ni yaxshi bilib oling.
Xulosa
Next.js — React ning SEO va tezlik muammolarini hal qiluvchi framework.
4 ta strategiya:
- CSR — brauzerda render. Dashboard, profil kabi SEO shart bo'lmagan sahifalar uchun.
- SSR — har so'rovda server render. Real-time va SEO ikkalasi kerak bo'lganda.
- SSG — build vaqtida render. Blog, hujjatlar — eng tez, lekin statik.
- ISR — SSG + avtomatik yangilanish. Ko'p hollarda eng maqbul tanlov.
Keyingi dars
2-dars: Loyiha yaratish — create-next-app, papkalar tuzilishi, App Router va Pages Router farqi
Birinchi Next.js loyihasini yaratamiz va har bir papka nima uchun kerakligini tushuntiramiz.