Розуміння рендерингу в Next.js: Повний посібник для початківців 🚀 - javascript.org.ua

Привіт! Ти тільки починаєш працювати з Next.js? Давай розберемо різні способи, якими Next.js може відображати твої веб-сторінки простими словами. Не хвилюйся, якщо ти новачок — ми все розберемо крок за кроком!

Що таке рендеринг? 🤔

Перш ніж почати, давай розберемося, що таке рендеринг простими словами:

Рендеринг — це спосіб перетворення твого коду в реальні веб-сторінки, які можуть бачити користувачі.
Це як випічка торта — ти можеш або готувати його, коли хтось робить замовлення (Server-Side Rendering), або мати його готовим заздалегідь (Static Site Generation).

Server-Side Rendering (SSR): Оновлений контент щоразу 🔄

Що таке SSR?

Уяви, що ти ведеш новинний сайт. Коли хтось відвідує твій сайт, йому потрібні останні новини, правда? Ось тут і проявляється SSR! Він створює сторінку в той момент, коли користувач її запитує, забезпечуючи актуальний контент кожного разу.

Давай подивимося на простий приклад:

// pages/news.js  
export async function getServerSideProps() {  
 // Цей код виконується на сервері щоразу, коли хтось відвідує сторінку  
 const response = await fetch('https://api.example.com/latest-news');  
 const news = await response.json();  

 return {  
 props: {  
 news, // Ці дані будуть передані на твою сторінку  
 fetchTime: new Date().toLocaleString() // Поточний час  
 }  
 };  
}  

// Компонент твоєї сторінки  
function NewsPage({ news, fetchTime }) {  
 return (  
   <div>  
     <h1>Останні новини</h1>  
     <p>Останнє оновлення: {fetchTime}</p>  
     {news.map(article => (    
       <div key={article.title}>  
         <h2>{article.title}</h2>  
         <p>{article.summary}</p>  
       </div>  
     ))}    
   </div>  
 );  
}  
export default NewsPage;

Коли слід використовувати SSR?

Думай про SSR як про ідеальний варіант для:

Соціальних медіа (які постійно змінюються)
Панелей інструментів (які потребують останніх даних)
Персональних сторінок (наприклад, профілів)

Static Site Generation (SSG): Створюй один раз, використовуйте багато разів 📚

Що таке SSG?

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

Ось простий приклад блогу:

// pages/blog/[post].js  
export async function getStaticPaths() {  
  // Це каже Next.js, які сторінки потрібно створювати під час побудови сайту  
  const posts = [  
    { id: 1, title: 'Перша публікація' },  
    { id: 2, title: 'Друга публікація' }  
  ];  

  return {  
    paths: posts.map(post => ({  
      params: { post: post.id.toString() }  
    })),  
    fallback: false // Показати 404 для невідомих постів  
  };  
}  

export async function getStaticProps({ params }) {  
  // Це виконується під час побудови сайту  
  const post = await getBlogPost(params.post); // Твоя функція для отримання даних поста  

  return {  
    props: {  
      post  
    }  
  };  
}  

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

Коли слід використовувати SSG?

Ідеально для:

Блогів (контент рідко змінюється)
Сторінок документації
Сторінок товарів на e-commerce сайтах

Найкраще з обох світів: Інкрементальна статична регенерація (ISR) 🌟

Іноді тобі потрібні статичні сторінки, які оновлюються час від часу.
Ось де ISR (Інкрементальна статична регенерація) стає в нагоді! Це як робот-кухар, який переприготує страву кожні кілька годин.

// pages/products/[id].js  
export async function getStaticProps({ params }) {  
 const product = await getProduct(params.id);  

 return {  
 props: {  
 product  
 },  
 revalidate: 3600 // Оновлювати цю сторінку кожну годину (3600 секунд)  
 };  
}

Простий приклад проекту: Створюймо! 🛠️

Ось маленький проект, який поєднує обидва підходи:

// pages/index.js - Статична головна сторінка  
export async function getStaticProps() {  
 return {  
 props: {  
 welcomeMessage: "Ласкаво просимо на наш сайт!",  
 buildTime: new Date().toISOString()  
 }  
 };  
}  

// pages/profile/[username].js - Динамічний профіль користувача  
export async function getServerSideProps({ params }) {  
 const { username } = params;  

 const userData = await fetch(`/api/users/${username}`);  
 const user = await userData.json();  

 return {  
 props: {  
 user,  
 visitTime: new Date().toISOString()  
 }  
 };  
}

Як зробити правильний вибір 🎯

Ось простий спосіб вирішити:

Твоя сторінка потребує даних в реальному часі? → Використовуй SSR
Твій контент однаковий для всіх і рідко змінюється? → Використовуй SSG
Потрібні періодичні оновлення? → Використовуй ISR

Типові помилки початківців, яких слід уникати ⚠️

Не отримуй дані всередині компонентів, якщо можна використати getStaticProps або getServerSideProps

// ❌ Не роби так  
function BadExample() {  
 const [data, setData] = useState(null);  
 useEffect(() => {  
 fetch('/api/data').then(res => res.json()).then(setData);  
 }, []);  
}  

// ✅ Замість цього роби так  
export async function getStaticProps() {  
 const res = await fetch('https://api.example.com/data');  
 const data = await res.json();  

 return {  
 props: { data }  
 };  
}

Пам’ятай: getServerSideProps виконується при кожному запиті, тому використовуй його лише коли це необхідно.

Підсумки 🎉

Тепер ти знаєш:

SSR створює сторінки за запитом (ідеально для даних в реальному часі)
SSG створює сторінки під час побудови сайту (надзвичайно швидко!)
ISR дозволяє автоматично оновлювати статичні сторінки

Розпочни з SSG для більшості сторінок, а SSR використовуй тільки коли потрібно отримувати дані в реальному часі. Це так просто!

Продовжуй кодити та експериментувати! Найкращий спосіб навчитися — створити щось своє. 🚀

Перекладено з: Understanding Next.js Rendering: A Complete Beginner’s Guide 🚀