getStaticProps vs getServerSideProps

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

import { getStaticProps } from 'next'
import fetch from 'isomorphic-unfetch'

export const getStaticProps = async () => {
  // Извлекаем данные из внешнего API
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()

  // Передаем данные в объект props
  return { props: { data } }
}

export default function Page({ data }) {
  // Рендерим данные на странице
  return <div>{data.title}</div>
}

import { getStaticProps } from 'next'
import axios from 'axios'

export const getStaticProps = async () => {
  // Извлекаем данные из внешнего API
  const res = await axios.get('https://api.example.com/data')
  const data = res.data

  // Передаем данные через объект props
  return { props: { data } }
}

export default function Page({ data }) {
  // Рендерим данные на странице
  return <div>{data.title}</div>
}

В этих примерах мы используем функцию getStaticProps для получения данных из внешнего API и передачи их в качестве props на страницу. В первом примере мы используем fetch, а во втором - axios.

Это общий принцип использования getStaticProps, но в зависимости от конкретной задачи, синтаксис может меняться.

Чем отличается от getServerSideProps?

getStaticProps и getServerSideProps - это две функции в Next.js, которые используются для получения данных для страниц. Однако они отличаются по способу их использования и времени, когда данные получаются:

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

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

В общем случае, getStaticProps используется для страниц, данные которых не меняются или меняются редко, и для которых необходимо максимальное количество производительности и SEO. Например, статические страницы блога или каталог продуктов.

getServerSideProps же используется для страниц, данные которых меняются в реальном времени, и для которых необходимо иметь доступ к данным на стороне сервера. Например, профиль пользователя или страница заказа.

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

import { getServerSideProps } from 'next'
import axios from 'axios'

export const getServerSideProps = async (context) => {
  // Получаем данные из строки запроса
  const { id } = context.query

  // Получаем данные с внешнего API
  const res = await axios.get(`https://api.example.com/data/${id}`)
  const data = res.data

  // Передаем данные на страницу через объект props
  return { props: { data } }
}

export default function Page({ data }) {
  // Рендерим данные на странице
  return <div>{data.title}</div>
}

В этом примере мы используем функцию getServerSideProps для получения данных из внешнего API и передачи их в качестве props на страницу. В этом случае, мы используем axios для запроса данных и получаем их из query string, который передается в функцию как аргумент.

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

Итак какую же функцию выбрать для извлечения данных?

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

Если данные для страницы не меняются или меняются редко, и важно иметь максимальное количество производительности и SEO, используйте getStaticProps.

Если данные для страницы меняются в реальном времени и важно иметь доступ к ним на стороне сервера, используйте getServerSideProps.

Еще одной особенностью является, что getStaticProps не работает в режиме development, только на production.

В любом случае, нужно протестировать и оценить производительность и SEO для каждого варианта использования данных, и выбрать способ, который наилучшим образом соответствует вашим потребностям.