Как правильно выводить данные в Next.js по кнопке?

Question

[icefrozenekb]

Всем привет. Речь пойдет про Next.js 14. Допустим у меня есть такой код.

async function getData() {
    const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    if (!res.ok) {
        throw new Error('Failed to fetch data');
    }
    return await res.json();
}
export default async function Test() {
    const res = await getData();
    return (
        <div>
            {res && (
                <>
                    {res.id && <div>{res.id}</div>}
                    {res.userId && <div>{res.userId}</div>}
                    {res.title && <div>{res.title}</div>}
                    {res.completed !== undefined && <div>{res.completed.toString()}</div>}
                </>
            )}
        </div>
    );
}

Но я хочу выводить данные только по кнопке. ChatGPT мне предлагает использовать useState, но насколько я знаю это неверный подход, или я чего-то не понимаю.

Т.е. ChatGPT предлагает сделать так:

import { useState } from 'react';

const Test = () => {
    const [data, setData] = useState(null);

    const getData = async () => {
        const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
        if (!res.ok) {
            throw new Error('Failed to fetch data');
        }
        const jsonData = await res.json();
        setData(jsonData);
    }

    return (
        <div>
            <button onClick={getData}>Get Data</button>
            {data && (
                <>
                    {data.id && <div>{data.id}</div>}
                    {data.userId && <div>{data.userId}</div>}
                    {data.title && <div>{data.title}</div>}
                    {data.completed !== undefined && <div>{data.completed.toString()}</div>}
                </>
            )}
        </div>
    );
}

export default Test;

Как все же правильно поступить в Next.js 14? ChatGPT верно предлагает? Мне надо 'use client' использовать и useState? Я планирую дальше сделать инпут и кнопку. В инпуте будут данные для POST запроса, который через fetch будет улетать на сервер (чужой) и возвращать данные пользователю

Answer 1

[Алексей Уколов]

Если по действию пользователя, то это на клиенте и да, нужно использовать useState (в самом простом варианте реализации без внешних библиотек и стейт менеджмента).

Answer 2

[reivunxx]

Практически любой элемент, который содержит в себе логику, завязанную на действиях пользователя, в нексте реализуется в клиентских компонентах
если что-то из него можно вынести как статичную часть, то можно сделать серверный компонент со статичной частью и в него уже засунуть клиентский.
В целом на такой композиции 14 некст и построен