რა არის SSR, SSG და ISR Next.js-ში?

Question

Accepted Answer

ეს არის სამი ძირითადი სტრატეგია იმის თაობაზე, *როდის* იქმნება გვერდის HTML. სწორი არჩევანი თითოეულ გვერდზე ბალანსს უჭერს ახალიმობას, პერფორმანსს და სერვერის খარჯებს. ## SSG — Static Site Generation (빌드დროს) ```tsx // HTML generated ONCE during `next build`, then served from CDN export default async function Page() { const posts = await fetch("...", { cache: "force-cache" }).then(r => r.json()); return ; } ``` გვერდი პრე-რენდერდება სტატიკური HTML-ად빌ड-დროს და კეშირდება CDN-ზე. **ყველაზე სწრაფი** დოსტავკა, მაგრამ კონტენტი გაყინულია მანამ, სანამ არ მოხდება შემდეგი빌 ud. საუკეთესო იმ კონტენტისთვის, რომელიც იშვიათად იცვლება: მარკეტინგის გვერდები, დოკუმენტაცია, ბლოგის პოსტები. ## SSR — Server-Side Rendering (თითოეულ მოთხოვნაზე) ```tsx // HTML generated FRESH on every request export default async function Page() { const data = await fetch("...", { cache: "no-store" }).then(r => r.json()); return ; } ``` სერვერი რენდერდება გვერდი მოთხოვნაზე, ამიტომ მონაცემები ყოველთვის აქტუალურია — ნელი პასუხების ღირებულებით და სერვერის დატვირთვა თითოეულ ვიზიტზე. საუკეთესო პერსონალიზებული ან ყოველთვის ახალი მონაცემებისთვის: დაფები, ანგარიშის გვერდები, ძიების შედეგები. ## ISR — Incremental Static Regeneration (ჰიბრიდი) ```tsx // Static, but automatically rebuilt in the background every N seconds export const revalidate = 60; // regenerate at most once per 60s export default async function Page() { const products = await fetch("...", { next: { revalidate: 60 } }).then(r => r.json()); return ; } ``` ISR ემსახურება სტატიკურ HTML-ს (სწრაფი, CDN-შე კეშირებული), მაგრამ **გადამოწმებს** მას ფონზე განრიგის მიხედვით — ამიტომ თქვენ მიიღებთ სტატიკურ პერფორმანსს პერიოდულად ახალი მონაცემებით, მთელი საიტის ხელახლა აშენების გარეშე. საუკეთესო კონტენტისთვის, რომელიც ზოგჯერ იცვლება: პროდუქტის სიები, სიახლეები, რეიტინგის ფორმები. ## შედარება ```text Speed Freshness Server cost Use for SSG fastest build-time only none docs, marketing SSR slower always fresh every request dashboards, personalized ISR fast every N seconds occasional catalogs, news ``` ## რატომ აქვს მნიშვნელობა App Router-ში თქვენ აირჩევთ ამას თითოეულ fetch-ზე cache აპციების საშუალებით (`force-cache` = SSG, `no-store` = SSR, `revalidate` = ISR), ნაცრად სპეციალური ფუნქციების. ანაზღაურების გაცნობიერება — სტატიკა სწრაფია მაგრამ მოძველებული, SSR ახალია მაგრამ ღირებული, ISR ორივეს ბალანსირდება — საშუალებას გაძლევთ ოპტიმიზაციის თითოეული გვერდი პერფორმანსისა და მონაცემთა ახალიმობის სწორი ნარევისთვის.