~ 4 мин
getStaticProps vs getServerSideProps
1363
1/14/2023
getStaticProps и getServerSideProps - это две функции в Next.js, которые используются для получения данных для страниц. getStaticProps вызывается на этапе сборки, что позволяет сделать динамические страницы статическими и увеличить производительность и SEO. getServerSideProps же вызывается на стороне сервера при каждом запросе страницы, позволяя использовать данные, которые могут меняться в реальном времени, но может приводить к низкой производительности и низкому SEO. Выбор между этими функциями зависит от конкретных требований вашего проекта и способа использования данных.
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 для каждого варианта использования данных, и выбрать способ, который наилучшим образом соответствует вашим потребностям.
Взгляните на наш стартап:
Выбирай экскурсии и активности по всему миру
Уже зарегистрировано 0 стран, 0 направлений, 0 экскурсий
Есть интересная идея?
И вы очень хотите ее реализовать, пишите нам и получите подробное коммерческое предложение и быструю реализацию