Всем привет.
Необходимо реализовать подгрузку контента по скролу(динамическая пагинация)
В качестве источника данных используется сервис jsonplaceholder.
Я реализовал это на react, но пока без next.js следующим образом (в этом примере я загружаю фотографии а во втором посты, но сути это не меняет):
import { useEffect, useState } from 'react'
import axios from 'axios'
export const App = () => {
const [photos, setPhotos] = useState([])
const [currentPage, setCurrentPage] = useState(1)
const [fetching, setFetching] = useState(true)
const [totalCount, setTotalCount] = useState(0)
useEffect(() => {
if (fetching) {
console.log('fetching')
axios
.get(
`https://jsonplaceholder.typicode.com/photos?_limit=10&_page=${currentPage}`
)
.then((res) => {
setPhotos([...photos, ...res.data])
setCurrentPage((prevstate) => prevstate + 1)
setTotalCount(res.headers['x-total-count'])
})
.finally(() => {
setFetching(false)
})
}
}, [fetching])
useEffect(() => {
document.addEventListener('scroll', scrollHandler)
return function () {
document.removeEventListener('scroll', scrollHandler)
}
}, [])
const scrollHandler = (e) => {
console.log(photos.length)
if (
e.target.documentElement.scrollHeight -
(e.target.documentElement.scrollTop + window.innerHeight) <
100
) {
setFetching(true)
}
// console.log('scrollHeight', e.target.documentElement.scrollHeight)
// console.log('scrollTop', e.target.documentElement.scrollTop)
// console.log('innerHeight', window.innerHeight)
}
return (
<div>
{photos.map((p) => (
<div key={p.id}>
<div>
{p.id}. {p.title}
</div>
<img src={p.thumbnailUrl} alt="img" />
</div>
))}
</div>
)
}
Теперь надо сделать это через next.js. Нашел в гугле вот такой исходник с пагинацией (правда с кнопками, т.е. без скрола). Ссылка на исходник
код
В первом скрипте мы вешаем слушатель на событие скролл, и получаем данные порциями(страницами). Во втором все данные получаем за раз (все 100 постов), но рендерим только одну порцию/страницу (как я понял из кода).
И вот теперь как реализовать подгрузку по скролу через next.js?
Вот мои рассуждения: я полагаю, что получать все данные из базы не правильно(как это сделано в примере с next.js), ведь постов может быть и 1000, и 1000000. Нужно выполнить запрос с параметрами,
например
https://jsonplaceholder.typicode.com/posts?_limit=...; Но я не нашел как можно передать эти параметры в функцию getStaticProps в которой я делаю запрос на api.
Подскажите как это можно реализовать?
Буду благодарен за помощь. Всем мира и добра.
Средний
