Поширення даних між клієнтом та сервером в Next.js 14

8 Березня 2024 в 16:26 25

У сучасному світі веб-розробки, коли користувачі мають високі вимоги до швидкості та функціональності, передача даних між клієнтом та сервером є ключовим аспектом будь-якого веб-додатка. Особливо важливо забезпечити правильну передачу даних, таких як дати та часи, щоб гарантувати їхню точність та надійність. У цій статті ми розглянемо, як розв’язати проблему передачі дати в Next.js 14, використовуючи серверні дії та клієнтські дані.

В Next.js 14 ми можемо використовувати серверні дії для обробки форм та інших подій, які відбуваються на клієнтській стороні. Однак, коли ми намагаємося передати додаткові дані, такі як дата, з клієнта на сервер, можуть виникати складнощі через асинхронну природу веб-розробки.

Один зі способів вирішення цієї проблеми полягає в тому, щоб зберігати дані, які ми хочемо передати, у стані компонента React на клієнтській стороні та оновлювати їх при подіях, таких як подача форми. Для цього ми можемо використовувати хук useState() з React.

export default function Form() {
    const [date, setDate] = useState("");
    const [_, action] = useFormState(addUser, {});
    const handleSubmit = (e) => {
        e.preventDefault();
        setDate(new Date().toLocaleString());
        e.currentTarget.form.requestSubmit();
    }
    return (
        <form action={action}>
            <input type="text" name="username" placeholder="Ім'я користувача" />
            <input type="hidden" name="date" value={date} />
            <button onClick={handleSubmit}>Додати</button>
        </form>
    );
}

export default function Form() {

const [date, setDate] = useState("");

const [_, action] = useFormState(addUser, {});

const handleSubmit = (e) => {

e.preventDefault();

setDate(new Date().toLocaleString());

e.currentTarget.form.requestSubmit();

}

return (

<button onClick={handleSubmit}>Додати</button>

</form>

);

}

У цьому прикладі ми використовуємо useState() для зберігання дати подачі форми. При кожному відправленні форми ми оновлюємо цю дату за допомогою методу setDate(). Потім ми передаємо цю дату як значення в приховане поле форми.

Проте, є одна проблема з цим підходом. Коли користувач відправляє форму, компонент знову рендериться, але дані ще не оновлені. Це призводить до того, що значення поля дати залишається пустим, коли форма відправляється.

Щоб вирішити цю проблему, ми можемо скористатися іншим хуком React – useEffect(). Використовуючи useEffect(), ми можемо виконати певні дії при кожному рендерингу компонента, включаючи оновлення значення дати перед відправленням форми.

export default function Form() {
    const [date, setDate] = useState("");
    const [_, action] = useFormState(addUser, {});
    useEffect(() => {
        setDate(new Date().toLocaleString());
    }, []);
    const handleSubmit = (e) => {
        e.preventDefault();
        e.currentTarget.form.requestSubmit();
    }
    return (
        <form action={action}>
            <input type="text" name="username" placeholder="Ім'я користувача" />
            <input type="hidden" name="date" value={date} />
            <button onClick={handleSubmit}>Додати</button>
        </form>
    );
}