В чём разница между getServerSideProps, getStaticProps и getInitialProps в pages-router

1️⃣ Как кратко ответить

getServerSideProps используется для получения данных на сервере при каждом запросе, getStaticProps — для получения данных на этапе сборки, создавая статические страницы, а getInitialProps — для получения данных как на сервере, так и на клиенте, но устарел и не рекомендуется к использованию в новых проектах.

2️⃣ Подробное объяснение темы

В Next.js, фреймворке для React, существуют различные методы для получения данных, которые определяют, как и когда данные будут загружены и отрендерены. Эти методы используются в файлах страниц (pages) и влияют на производительность и поведение приложения.

getServerSideProps

getServerSideProps — это функция, которая позволяет получать данные на сервере при каждом запросе к странице. Это полезно, когда данные должны быть актуальными и обновляться при каждом запросе.

Пример использования:

export async function getServerSideProps(context) {
  // Получение данных с API или базы данных
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
​
  // Возвращаем данные в виде props
  return { props: { data } };
}
​
function Page({ data }) {
  // Используем полученные данные для рендеринга
  return <div>{data.title}</div>;
}
​
export default Page;

• getServerSideProps выполняется на сервере при каждом запросе.
• context содержит информацию о запросе, такую как параметры URL.
• Данные возвращаются в виде объекта props, который передается компоненту страницы.

getStaticProps

getStaticProps используется для получения данных на этапе сборки приложения. Это позволяет создавать статические страницы, которые загружаются быстрее, так как они уже сгенерированы и не требуют дополнительных запросов к серверу.

Пример использования:

export async function getStaticProps() {
  // Получение данных с API или базы данных
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
​
  // Возвращаем данные в виде props
  return { props: { data } };
}
​
function Page({ data }) {
  // Используем полученные данные для рендеринга
  return <div>{data.title}</div>;
}
​
export default Page;

• getStaticProps выполняется на этапе сборки, а не при каждом запросе.
• Подходит для страниц, данные которых редко меняются.
• Страницы с getStaticProps могут быть обновлены с помощью функции revalidate, чтобы периодически обновлять данные.

getInitialProps

getInitialProps — это устаревший метод, который позволяет получать данные как на сервере, так и на клиенте. Он был основным способом получения данных до появления getServerSideProps и getStaticProps.

Пример использования:

import React from 'react';
​
class Page extends React.Component {
  static async getInitialProps(context) {
    // Получение данных с API или базы данных
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();
​
    // Возвращаем данные в виде props
    return { data };
  }
​
  render() {
    const { data } = this.props;
    // Используем полученные данные для рендеринга
    return <div>{data.title}</div>;
  }
}
​
export default Page;

• getInitialProps может выполняться как на сервере, так и на клиенте.
• Устарел и не рекомендуется к использованию в новых проектах.
• Может усложнять логику приложения и увеличивать время загрузки страниц.

Заключение

Выбор между этими методами зависит от требований к данным и производительности приложения. getServerSideProps подходит для динамических данных, getStaticProps — для статических страниц, а getInitialProps следует избегать в новых проектах в пользу более современных подходов.