Soy nuevo en reactjs. Encontré algunas preguntas sobre estos temas en stackoverflow y también busqué en Google, pero aún no puedo implementar el desplazamiento infinito. Estoy luchando desde casi ayer por implementar el desplazamiento infinito.

Usé Django Rest para construir mi API. Aquí está el aspecto de mi llamada api: mi url de api: http://127.0.0.1:8000/blog-api/?limit=2

 { "count": 6, "next": "http://127.0.0.1:8000/blog-api/?limit=2&offset=2", "previous": null, "results": [ { "id": 4, "blog_title": "Blog1", "blog_body": "hello", "blog_header_image": "https://d2ofoaxmq8b811.cloudfront.net/media/Capture_46syzro.PNG", "author": 1 }, { "id": 5, "blog_title": "blog2", "blog_body": "hello2", "blog_header_image": "https://d2ofoaxmq8b811.cloudfront.net/media/Capture1.PNG", "author": 4 } ] }

aquí está mi código nextjs que actualmente muestra 2 elementos en mi página, pero también quiero cargar más datos sobre el desplazamiento:

 const Blog = ({ content }) => { return ( {content.results.map((data) => ( <h1>{data.blog_title}</h1> ))} )}

Aquí estoy usando la función getServerSideProps.

 export async function getServerSideProps() { // Fetch data from external API const url = "http://127.0.0.1:8000/blog-api?limit=2"; const headers = { method: "GET", "Content-Type": "application/json", Accept: "application/json", "User-Agent": "*", Authorization: "Token <>", }; const res = await fetch(url, { headers: headers }); const data = await res.json(); console.log(data); // Pass data to the page via props return { props: { content: data, }, }; }

También probé react-infinite-scroll-component y también leí su documentación pero no puedo aplicar el desplazamiento infinito.