Комментарии пользователя Arche46

Как сделать чтобы страница рендерилась на сервере?

Arche46 @Arche46 Автор вопроса

godsplane, Спасибо за ответ. Я доработал код, добавил состояние fetching( при true отрабатывает функция fetchPosts. Теперь файл Index.js выглядит следующим образом:

import Head from 'next/head'
import { useEffect, useState } from 'react'
import MainComponent from '../components/MainComponent'
import Post from '../components/Post'

export default function Home(props) {
  const [posts, setPosts] = useState([])
  const [page, setPage] = useState(1)
  // получаем данные или нет
  const [fetching, setFetching] = useState(false)

  if (posts.length == 0) setPosts(props.posts)

  const fetchPosts = async () => {
    if (fetching) {
      const response = await fetch(
        `https://jsonplaceholder.typicode.com/posts?_limit=10&_page=${page}`
      )

      setFetching(false)
      const data = await response.json()
      setPosts((prev) => [...prev, ...data])
    }
  }

  useEffect(() => {
    setFetching(true)

    fetchPosts()
  }, [page])

  return (
    <>
      <Head>
        <title>Main page</title>
      </Head>
      <h1>Posts list</h1>
      <MainComponent>
        {posts.map((post, index) => (
          <Post
            key={post.id}
            id={post.id}
            title={post.title}
            isLast={index === posts.length - 1}
            newLimit={() => setPage(page + 1)}
          />
        ))}
      </MainComponent>
    </>
  )
}

export async function getStaticProps(context) {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts?_limit=10&_page=1`
  )
  const posts = await response.json()

  return {
    props: { posts },
  }
}

При загрузке функция getStaticProps отрабатывается как надо, и первая порция данных рендерится на сервере.
После первого скрола срабатывает IntersectionObserver и в useEffect подгружаю следующую порцию данных, все по плану. (на этом этапе state содержит 20 постов). Но при втором скроле useEffect не срабатывает. Точнее в нем не устанавливается состояние fetching на true. Я предполагаю, что тут дело в замыкании, но не знаю как это исправить. Подскажи, пожалуйста, куда надо копать. И еще такой вопрос: сейчас в коде для наблюдения IntersectionObserver устанавливается последний элемент state posts. Но ведь можно создать просто пустой див в конце страницы, и следить IntersectionObserver за ним. Какой из этих вариантов предпочтительней? Если использовать див, то код на мой взгляд будет проще.
P.S. Исходный код я взял отсюда код
изменив api

Написано 20 авг. 2023