## SSG у App Router У сучасному Next.js з App Router статична генерація часто працює автоматично. Наприклад: ```tsx // app/about/page.tsx const AboutPage = () => (

About us

Static page generated by Next.js.

); export default AboutPage; ``` Якщо сторінка не використовує динамічні речі типу `cookies`, `headers` або запити без кешування, Next.js може зробити її статичною. Для динамічних routes можна використовувати `generateStaticParams`. Наприклад: ```tsx // app/blog/[slug]/page.tsx type BlogPageProps = { params: Promise<{ slug: string; }>; }; export async function generateStaticParams() { const posts = [{ slug: 'first-post' }, { slug: 'second-post' }]; return posts.map((post) => ({ slug: post.slug })); } const BlogPage = async ({ params }: BlogPageProps) => { const { slug } = await params; return (

Blog post: {slug}

); }; export default BlogPage; ``` Тут Next.js заздалегідь знає, які сторінки треба згенерувати: ```txt /blog/first-post /blog/second-post ``` --- ## SSG у Pages Router У старішому Pages Router для SSG часто використовували `getStaticProps`. Наприклад: ```tsx // pages/blog.tsx type BlogPageProps = { posts: { id: number; title: string; }[]; }; export const getStaticProps = async () => { const posts = [ { id: 1, title: 'First post' }, { id: 2, title: 'Second post' } ]; return { props: { posts } }; }; const BlogPage = ({ posts }: BlogPageProps) => (

Blog

{posts.map((post) => (

{post.title}

))}

); export default BlogPage; ``` `getStaticProps` виконується під час build, а результат зберігається як статична сторінка. У документації Next.js також зазначено, що параметр `revalidate` у `getStaticProps` дозволяє вмикати повторну генерацію сторінки через певну кількість секунд. Див. [getStaticProps](https://nextjs.org/docs/pages/api-reference/functions/get-static-props). --- ## Проблема SSG SSG дуже швидкий, але має важливу проблему. Уявімо, що в нас є інтернет-магазин. Сторінка товару: ```txt /products/iphone-15 ``` На ній є: ```txt - назва товару - опис - фото - ціна - наявність ``` Якщо ми згенерували сторінку під час build, а потім ціна змінилася, користувач все ще може бачити стару версію сторінки. Щоб оновити її, треба знову запустити build і redeploy. Для маленького сайту це нормально. Але для великого сайту з тисячами або мільйонами сторінок - це вже проблема.

SSG та ISR

SSG та ISR