원래 게시됨here

Next.js에서 때때로 페이지를 사전 렌더링하는 것이 의미가 없으며 클라이언트 측에서 데이터를 가져오는 데 시간이 필요합니다. 예를 들어 주식 데이터, 환전 가격 또는 상품 가격과 같이 자주 업데이트되는 데이터입니다.

예제를 통해 클라이언트 측 데이터 가져오기를 이해할 것입니다.

코드로 이동하기 전에 먼저 여기에서 해결하려는 문제를 이해하십시오.

문제 설명

웹 페이지에서 할 일 목록의 JSONAPI을 표시합니다.

API 위치 - https://jsonplaceholder.typicode.com/todos/

참고: 이 API는 인터넷에서 가져온 것이며 테스트 전용입니다. 그것을 존중하고 요청으로 공격하지 마십시오.

솔루션-1

페이지 폴더 아래에 새 파일 "todo.js"를 만들고 시작을 위해 다음 코드를 추가합니다.

import { useEffect, useState } from "react";
function ToDoPage() {
    return (
        <div>
            <h1>ToDO LIST</h1>
        </div>
    )
}
export default ToDoPage

위의 코드에서 특별한 것은 없습니다. useEffect() 및 useState()를 반응에서 직접 가져옵니다.
위의 문제를 해결하기 위해 가져온 함수 useEffect()를 fetch API와 함께 사용하여 ToDo 목록을 가져옵니다.

우리는 무엇을 해야 합니까?

ToDoPage() 함수 아래에서 먼저 상수를 초기화합시다.

const [ toDos, setToDos ] = useState()
const [isLoading, setIsLoading] = useState(false)

isLoading 및 setIsLoading() 변수는 API에서 가져오는 데이터가 아직 보류 중인 경우 "로드 중..."을 표시하는 데 필요합니다.

다음은 useEffect()에서 fetch API를 사용하는 것입니다.

useEffect(() => {
        setIsLoading(true)
        fetch('https://jsonplaceholder.typicode.com/todos/')
            .then(response => response.json())
            .then(data => {
                setToDos(data) // Set the toDo variable
                setIsLoading(false)
            })
    }, [])

API가 여전히 결과를 가져오는 경우 코드에 여전히 문제가 있고 앱이 충돌합니다.
이를 방지하려면 다음을 추가하십시오.

if (isLoading) {
        return <p>Loading....</p>
    }
    if (!toDos) {
        return <p>No List to show</p>
    }

마지막으로 결과를 매핑하고 결과를 앱에 반환해야 합니다.

return (
        <div>
            <h1>TODO List</h1>
            <ul>
                {toDos.map( toDo =>
                    <li key={toDo.id}>
                        {toDo.title} - <span>( {toDo.completed ? 'Completed' : 'Not Completed'} )</span>
                    </li>
                )}
            </ul>
        </div>
    )

기능은 다음과 같습니다.

function ToDoPage() {
    const [ toDos, setToDos ] = useState()
    const [isLoading, setIsLoading] = useState(false)
    useEffect(() => {
        setIsLoading(true)
        fetch('https://jsonplaceholder.typicode.com/todos/')
            .then(response => response.json())
            .then(data => {
                setToDos(data)
                setIsLoading(false)
            })
    }, [])
    if (isLoading) {
        return <p>Loading....</p>
    }
    if (!toDos) {
        return <p>No List to show</p>
    }
    return (
        <div>
            <h1>TODO List</h1>
            <ul>
                {toDos.map( toDo =>
                    <li key={toDo.id}>
                        {toDo.title} - <span>( {toDo.completed ? 'Completed' : 'Not Completed'} )</span>
                    </li>
                )}
            </ul>
        </div>
    )
}

URLhttp://localhost:3000/todo을 방문하면 아래 그림과 같은 결과가 나타납니다.

솔루션-2

이전 솔루션은 문제를 해결하기에 충분합니다. 그러나 이는 API에서 데이터를 가져오는 React 방식입니다.
이 솔루션에서는 API에서 데이터를 가져오는 Next.js 방식에 대해 설명합니다.

"SWR"패키지를 사용하여 API에서 데이터를 가져옵니다.

사용하기 전에 npm을 사용하여 설치해야 합니다.

npm install swr

그리고 설치가 완료될 때까지 기다립니다.

페이지 폴더 아래에 다른 파일 todo-alt.js를 추가하고 다음 코드를 추가합니다.

import useSWR from 'swr'


function TodoAltPage() {
    const{ data, error } = useSWR('https://jsonplaceholder.typicode.com/todos/')
    if (error) {
        return <p>Failed to load Data</p>
    }
    if (!data) {
        return <p>Loading....</p>
    }
    return (
        <div>
            <h1>TODO List</h1>
            <ul>
                {data.map( toDo =>
                    <li key={toDo.id}>
                        {toDo.title} - <span>( {toDo.completed ? 'Completed' : 'Not Completed'} )</span>
                    </li>
                )}
            </ul>
        </div>
    )
}
export default TodoAltPage

처음에는 "swr"패키지에서 useSWR()을 가져옵니다. 그리고 우리 기능에서 사용하십시오.

const{ data, error } = useSWR('https://jsonplaceholder.typicode.com/todos/')

이것이 데이터를 얻기 위해 우리가 해야 할 전부입니다. 그리고

if (error) {
    return <p>Failed to load Data</p>
}

오류가 있는지 확인하고 페이지에 표시합니다.

if (!data) {
    return <p>Loading....</p>
}

데이터가 로드되지 않으면 웹 페이지에 "로드 중"이라고 표시하십시오.

그런 다음 첫 번째 솔루션에서 했던 것처럼 데이터를 매핑합니다.

URLhttp://localhost:3000/todo-alt을 방문하면 이전 솔루션과 동일한 결과가 표시됩니다.

이 솔루션은 더 깨끗하고 Next.js 애플리케이션에 더 적합합니다. 반응 및 기타 응용 프로그램에서 사용할 수 있지만 경계가 없습니다.

Visit 다른 Next.js 문서.