Встречается на собеседованиях • сегодня
Как сделать чтобы useFetch отрабатывал только на клиенте
В Next.js можно использовать useEffect для выполнения запроса только на клиенте. Также можно проверить, выполняется ли код на клиенте через typeof window !== 'undefined'.
Пример с хуком useFetch:
jsx
import { useEffect, useState } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
if (typeof window !== 'undefined') { // Проверка на клиент
fetch(url)
.then(res => res.json())
.then(data => {
setData(data);
setLoading(false);
});
}
}, [url]);
return { data, loading };
}
text
Альтернативный вариант - использовать `useState` с условием:
```jsx
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
// Затем использовать mounted в условиях запросаЭто предотвратит выполнение запроса во время SSR.

Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!
офферы быстрее!
Попробовать бесплатно
Следующий вопрос
Это единственный вопрос по вашему фильтру
как отвечать на вопрос
пример собеседования
фреймворки на собеседовании
типичные вопросы junior
интервью вопросы и ответы