Найкраща стратегія рендерингу

Next.js пропонує універсальний підхід до рендерингу та маршрутизації, що дозволяє розробникам обирати найбільш підходящий метод для потреб їхнього застосунку. Основні стратегії рендерингу включають:

• Рендеринг на стороні клієнта (CSR)
• Рендеринг на стороні сервера (SSR)
• Генерація статичних сайтів (SSG)
• Інкрементальна статична регенерація (ISR)

Кожен метод має свої переваги та варіанти використання.

Рендеринг на стороні клієнта (CSR)

У CSR початковий HTML, що надсилається клієнту, мінімальний, а JavaScript рендерить вміст у браузері.
Цей підхід підходить для застосунків, де SEO менш критичне, таких як інформаційні панелі або сторінки, специфічні для користувачів.

Варіанти використання:

• Односторінкові застосунки (SPA)
• Високодинамічні інтерфейси користувача
• Сторінки з частими оновленнями даних

Переваги:

• Багатий інтерфейс
• Зменшене навантаження на сервер
• Ефективно для даних, специфічних для користувача

Недоліки:

• Повільніший початковий час завантаження
• Менш дружелюбний для SEO
• Залежить від виконання JavaScript

Приклад:

// Директива 'use client' вказує, що це компонент клієнта
'use client';
import { useEffect, useState } from 'react';
export default function UserDashboard() {
 const [data, setData] = useState(null);
 useEffect(() => {
   // Отримання даних на стороні клієнта
   fetch('/api/user')
     .then((res) => res.json())
     .then((data) => setData(data));
 }, []);
 if (!data) return 'Завантаження...';
 return (
   <div>
     <h1>Ласкаво просимо, {data.name}</h1>
     {/* Рендеринг вмісту, специфічного для користувача */}
   </div>
 );
}

Рендеринг на стороні сервера (SSR)

SSR генерує HTML для сторінки на кожен запит, забезпечуючи актуальність контенту та дружелюбність для SEO.
Цей метод ідеально підходить для сторінок, які потребують динамічного отримання даних на кожен запит.

Варіанти використання:

• Сторінки товарів для електронної комерції
• Новинні статті
• Динамічні інформаційні панелі

Переваги:

• Покращене SEO
• Актуальні дані на кожен запит
• Не потрібно отримувати дані на стороні клієнта

Недоліки:

• Збільшене навантаження на сервер
• Повільніший час відгуку порівняно зі статичними сторінками
• Потенційно вищі витрати на хостинг

Приклад:

// app/page.js  

export default async function HomePage() {
 const data = await fetch('https://api.example.com/data').then((res) => res.json());

 return (
   <div>
     <h1>Дані отримано на сервері</h1>
     <pre>{JSON.stringify(data, null, 2)}</pre>
   </div>
 );
}

Генерація статичних сайтів (SSG)

SSG передрендерить сторінки під час збірки, що призводить до швидкого завантаження статичних сторінок.
Цей підхід підходить для контенту, який не змінюється часто, наприклад, для блогів чи документацій.

Варіанти використання:

• Блоги
• Маркетингові вебсайти
• Сайти документацій

Переваги:

• Чудова продуктивність
• Зниження навантаження на сервер
• Покращена безпека

Недоліки:

• Контент стає застарілим, якщо його не перезібрати
• Не підходить для часто змінюваних даних
• Необхідно перезбирати для оновлення контенту

Приклад:

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

export async function generateStaticParams() {
 const posts = await fetch('https://api.example.com/posts').then((res) => res.json());

 return posts.map((post) => ({
   slug: post.slug,
 }));
}  

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

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

Інкрементальна статична регенерація (ISR)

ISR дозволяє оновлювати статичний контент після того, як сайт був побудований, даючи можливість сторінкам перегенеруватися у фоновому режимі, коли трафік йде до них.
Цей підхід є корисним для контенту, який змінюється час від часу, але не потребує оновлень в реальному часі.

Варіанти використання:

• Списки товарів на електронних торгових майданчиках
• Новинні сайти з періодичними оновленнями
• Блоги з частими новими публікаціями

Переваги:

• Поєднує переваги SSG та SSR
• Автоматичні фонові оновлення
• Покращена продуктивність з актуальним контентом

Недоліки:

• Можливість незначно застарілого контенту між регенераціями
• Збільшена складність
• Потрібна відповідна хостингова інфраструктура

Приклад:

// app/products/[id]/page.js  

export async function generateStaticParams() {
 const products = await fetch('https://api.example.com/products').then((res) => res.json());

 return products.map((product) => ({
   id: product.id,
 }));
}  

export default function ProductPage({ params }) {
 const { id } = params;
 const product = fetch(`https://api.example.com/products/${id}`).then((res) => res.json());

 return (
   <div>
     <h1>{product.name}</h1>
     <p>{product.description}</p>
     <p>Price: ${product.price}</p>
   </div>
 );
}

У цьому прикладі ISR можна встановити властивість revalidate, щоб вказати інтервал часу (у секундах), після якого сторінка повинна бути перегенерована.
Це гарантує, що інформація про продукт залишається актуальною, не вимагаючи повного перебудування сайту.

Обертаючи відповідну стратегію рендерингу, ви можете оптимізувати продуктивність вашої Next.js програми, SEO та досвід користувачів.

Для детальнішої інформації зверніться до цього посилання

Перекладено з: Best Rendering Strategy