Как реализовать подгрузку по скролу в next.js?

Question

[Arche46]

Всем привет.
Необходимо реализовать подгрузку контента по скролу(динамическая пагинация)
В качестве источника данных используется сервис 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.
Подскажите как это можно реализовать?
Буду благодарен за помощь. Всем мира и добра.

Comments

[godsplane]

тебе не нужно получать эти данные в getStaticProps.
Просто получай так же через useEffect, так как это будет уже клиентская подгрузка.

И используй не onScroll, а intersectionObserver

[Arche46]

godsplane, При подгрузке в useEffect отрисовка будет уже не серверная, правильно?

[godsplane]

Arche46, Да, это будет client-side fetching

[godsplane]

https://nextjs.org/docs/pages/building-your-applic...