В процессе разработки Next.js приложения получение данных из API является важным аспектом отображения динамического контента. В этой статье вы узнаете, как использовать getStaticProps для получения статических данных в процессе сборки и использовать getServerSideProps для получения данных из API при каждом запросе.
Использование getStaticProps
getStaticProps — это встроенный метод, Next.js поддерживающий получение статических данных во время процесса сборки. Он позволяет создавать статические страницы с запрошенными данными, которые предварительно обрабатываются перед развертыванием приложения. Вот базовый пример использования getStaticProps:
export async function getStaticProps() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return {
props: {
data,
},
};
}
В приведенном выше примере мы используем fetch запрос данных из API и возврат данных в качестве реквизита.
Использование getServerSideProps
getServerSideProps — это еще один метод, Next.js позволяющий получать данные из API при каждом запросе. Это гарантирует, что контент всегда будет актуальным и динамичным. Вот пример использования getServerSideProps:
export async function getServerSideProps() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return {
props: {
data,
},
};
}
Метод getServerSideProps будет запрашивать данные из API каждый раз, когда делается запрос на страницу.
Заключение
В этом разделе вы узнали, как эффективно получать данные из API вашего Next.js приложения. Используя getStaticProps и getServerSideProps, вы можете гибко отображать в своем приложении как статический, так и динамический контент.