Доброго времени суток. Изучаю next.js, написал простое приложение.
С помощью IntersectionObserver определяю момент скрола, в useEffect делаю запрос, и подгружаю данные по порциям.
Файл index.jsx
import Head from 'next/head'
import { useEffect, useState } from 'react'
import MainComponent from '../components/MainComponent'
import Post from '../components/Post'
export default function Home() {
const [posts, setPosts] = useState([])
const [page, setPage] = useState(1)
const fetchPosts = async () => {
const response = await fetch(
`https://jsonplaceholder.typicode.com/posts?_limit=10&_page=${page}`
)
const data = await response.json()
setPosts((prev) => [...prev, ...data])
}
useEffect(() => {
fetchPosts()
}, [page])
return (
<>
<Head>
<title>Main page</title>
</Head>
{/* Home */}
<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>
</>
)
}
Файл Post.jsx
import { useEffect, useRef } from 'react'
export default function Post({ id, title, newLimit, isLast }) {
const cardRef = useRef()
useEffect(() => {
if (!cardRef?.current) return
const observer = new IntersectionObserver(([entry]) => {
if (isLast && entry.isIntersecting) {
newLimit()
observer.unobserve(entry.target)
}
})
observer.observe(cardRef.current)
}, [isLast])
return (
<div ref={cardRef}>
<div
style={{
border: '1px solid black',
padding: '15px',
marginBottom: '10px',
}}
>
<h2>
{id}. {title}
</h2>
</div>
</div>
)
}
В одном из предыдущих гайдов по next.js, которорый я читал, так-же получались данные, но без подгрузки по скролу. Просто получаем все данные(посты) и отрисовываем их на странице.
У меня такой вопрос: в том гайде, чел показывал как определить, что страница рендерится на сервере - правый клик мыши, второй пункт снизу контекстного меню - просмотр кода страницы. Если в коде есть данные с сервера (посты), значит отрисовка была на сервере. Но в его примере для получения данных использовалась функция getStaticProps().
В моем примере я делаю запрос в useEffect, и при просмотре кода как было указано выше, в коде нет постов. То есть, как я понимаю, отрисовка была на клиенте.
Как сделать чтобы, страница рендерилась на сервере?
Средний
Простой
Средний
