Static Rendering — build vaqtida generatsiya, qachon mos

~15 daq · Next.js · Rendering Strategiyalari

Muammodan boshlaylik

Siz blog sayt yozdingiz. Har kuni minglab odam kiradi. Har bir kishi kirganda server ma'lumotlar bazasiga so'rov yuboradi, HTML render qiladi, javob qaytaradi.

Lekin bir narsaga e'tibor bering — blog postlar kamdan-kam o'zgaradi. Bugun yozilgan post ertaga ham bir xil. Undan keyingi kuni ham. Har bir foydalanuvchi uchun server bir xil HTML ni qayta-qayta render qilmoqda.

Bu — isrof. Bir marta render qilib, natijani saqlasa bo'lmaydimi?

Aynan shu — Static Rendering.

Static Rendering qanday ishlaydi

npm run build buyrug'i berilganda Next.js barcha sahifalarni bir marta render qiladi va HTML fayllar sifatida saqlaydi.

Build vaqtida (bir marta):
  DB dan ma'lumot olinadi
  HTML render qilinadi
  Fayl saqlanadi: .next/static/...

Foydalanuvchi kirganda:
  Server → tayyor HTML fayl → Foydalanuvchi
  (hech qanday hisoblash yo'q)

1000 ta foydalanuvchi bir vaqtda kirsa ham — server 1000 ta bir xil faylni beradi. DB ga bitta ham so'rov ketmaydi.

Next.js da default — Static

App Router da fetch ishlatilgan sahifa default holda statik render qilinadi. Siz hech narsa qo'shimcha yozmasangiz ham.

// app/blog/page.tsx
// Hech qanday maxsus sozlama yo'q — default static
export default async function BlogPage() {
  const posts = await fetch('https://api.example.com/posts')
    .then(r => r.json())

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

Bu sahifa build vaqtida bir marta render qilinadi. Foydalanuvchi kirganda server shunchaki tayyor HTML ni beradi.

Dynamic route da Static Rendering

/blog/[slug] kabi dynamic route da Next.js qaysi sahifalarni oldindan yaratishni bilmaydi. Buning uchun generateStaticParams kerak:

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts')
    .then(r => r.json())

  // Next.js shu sluglar uchun HTML fayllar yaratadi
  return posts.map(post => ({ slug: post.slug }))
}

export default async function BlogPost({ params }) {
  const { slug } = await params
  const post = await fetch(`https://api.example.com/posts/${slug}`)
    .then(r => r.json())

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

Build vaqtida Next.js:

  1. generateStaticParams ni chaqiradi — sluglar ro'yxatini oladi
  2. Har bir slug uchun BlogPost ni render qiladi
  3. HTML fayllarni saqlaydi

/blog/nextjs-kirish, /blog/react-hooks — har biri alohida HTML fayl.

generateStaticParams da bo'lmagan slug kelsa

Build vaqtida yaratilmagan slug ga foydalanuvchi kirsa nima bo'ladi? Masalan, build dan keyin yangi post qo'shildi.

Bu xulq-atvorni dynamicParams bilan boshqarish mumkin:

// default: true — yangi slug kelsa serverda render qilinadi
export const dynamicParams = true

// false — faqat build vaqtida yaratilganlar, qolganlar 404
export const dynamicParams = false

dynamicParams = true (default) — yangi slug kelsa Next.js uni serverda render qiladi va keyingi so'rovlar uchun keshda saqlaydi. Aslida bu ISR ga o'xshaydi.

Qachon Static Rendering mos

Blog postlar          ✅ — kamdan-kam o'zgaradi
Hujjatlar, FAQ        ✅ — deyarli o'zgarmaydi
Marketing sahifalar   ✅ — statik kontent
Mahsulot sahifalari   ⚠️ — narx o'zgarsa ISR yaxshiroq
Foydalanuvchi profili ❌ — har kishi uchun boshqacha
Buyurtma holati       ❌ — real-time kerak

Qachon Static Rendering ishlamaydi

Sahifa dinamik bo'lib qoladi — ya'ni Static Rendering o'chiriladi — quyidagi holatlarda:

1. cache: 'no-store' ishlatilsa

// Bu sahifa static bo'lmaydi — har so'rovda yangi ma'lumot
const data = await fetch('/api/data', { cache: 'no-store' })

2. cookies() yoki headers() ishlatilsa

import { cookies } from 'next/headers'

// Cookie foydalanuvchiga xos — static bo'lmaydi
const cookieStore = await cookies()
const token = cookieStore.get('token')

3. searchParams ishlatilsa

// URL dagi ?q=... har kishi uchun boshqacha — static bo'lmaydi
export default function Page({ searchParams }) {
  const query = searchParams.q
}

Bu holatlarda Next.js sahifani avtomatik Dynamic Rendering ga o'tkazadi.

Build natijasini ko'rish

npm run build dan keyin Next.js har bir sahifa uchun qanday rendering ishlatilganini ko'rsatadi:

Route (app)                    Size    First Load JS
┌ ○ /                          142 B   87.2 kB
├ ○ /about                     142 B   87.2 kB
├ ● /blog                      142 B   87.2 kB
├ ● /blog/[slug]               142 B   87.2 kB
│   ├ /blog/nextjs-kirish
│   ├ /blog/react-hooks
│   └ /blog/javascript-asoslari
└ ƒ /dashboard                 142 B   87.2 kB

○  (Static)   — statik, build vaqtida yaratilgan
●  (SSG)      — statik, generateStaticParams bilan
ƒ  (Dynamic)  — har so'rovda render

○ va ● — Static Rendering. ƒ — Dynamic Rendering.

Tez-tez uchraydigan xatolar

1. generateStaticParams da barcha sahifalarni olmaslik

// ❌ — faqat birinchi 10 ta post
export async function generateStaticParams() {
  const posts = await fetch('/api/posts?limit=10').then(r => r.json())
  return posts.map(p => ({ slug: p.slug }))
}

// ✅ — barcha postlar
export async function generateStaticParams() {
  const posts = await fetch('/api/posts').then(r => r.json())
  return posts.map(p => ({ slug: p.slug }))
}

2. Tez-tez o'zgaradigan ma'lumot uchun Static ishlatish

Narxlar, zaxira miqdori, yangiliklar — bular uchun Static emas, ISR yaxshiroq. Static da foydalanuvchi eskirgan ma'lumot ko'radi.

3. generateStaticParams ni async qilmaslik

// ❌
export function generateStaticParams() {
  return fetch('/api/posts')...  // Promise qaytaradi, lekin await yo'q
}

// ✅
export async function generateStaticParams() {
  const posts = await fetch('/api/posts').then(r => r.json())
  return posts.map(p => ({ slug: p.slug }))
}

Xulosa

Static Rendering — build vaqtida HTML yaratiladi, serverda saqlanadi. Eng tez rendering usuli.

Default holda static  → fetch ishlatilgan sahifa
generateStaticParams  → dynamic route uchun qaysi sahifalar yaratilishini aytish
dynamicParams = false → faqat build vaqtida yaratilganlar, qolganlar 404
dynamicParams = true  → yangi slug kelsa serverda render (default)

Static bo'lmaydi: cache: 'no-store', cookies(), headers(), searchParams.

Keyingi dars

14-dars: Dynamic Rendering — har so'rovda generatsiya, qachon mos

Static Rendering mos bo'lmagan holatlarda Dynamic Rendering ishlatiladi. Qanday yoqiladi, qanday ishlaydi.