#NextJS
🚩 Почему обычный <noscript> тег не работает для критичных скриптов?

В Next.js для добавления скриптов, которые должны выполняться до рендера, используется компонент Script с атрибутом strategy. Обычные noscript теги в React не гарантируют порядок выполнения и могут блокировать рендеринг. Next.js Script оптимизирует загрузку скриптов и даёт контроль над их выполнением.

// Плохо - обычный noscript тег
export default function Page() {
    return (
        <div>
            <noscript src="/analytics.js"></noscript>
            {/* React игнорирует это, нет контроля над загрузкой */}
        </div>
    );
}

// Хорошо - Next.js Script компонент
import Script from 'next/noscript';

export default function Page() {
    return (
        <>
            {/* beforeInteractive - выполняется ДО гидратации */}
            <Script
                src="/critical-noscript.js"
                strategy="beforeInteractive"
            />
            
            {/* afterInteractive - после гидратации (по умолчанию) */}
            <Script
                src="/analytics.js"
                strategy="afterInteractive"
            />
            
            {/* lazyOnload - когда браузер свободен */}
            <Script
                src="/chat-widget.js"
                strategy="lazyOnload"
            />
        </>
    );
}

📎 Стратегии загрузки Script:

🟣 beforeInteractive — скрипт загружается и выполняется ДО гидратации React
🟣 afterInteractive — выполняется после гидратации (по умолчанию)
🟣 lazyOnload — загружается когда браузер простаивает
🟣 worker — выполняется в Web Worker (экспериментально)

beforeInteractive используется только в _document.js для критичных скриптов, которые нужны до интерактивности страницы. Это полифиллы, A/B тестирование, определение темы. Скрипт внедряется в HTML до любого Next.js кода и гарантированно выполняется первым.

afterInteractive (по умолчанию) подходит для большинства скриптов: аналитика, реклама, пиксели отслеживания. Они загружаются после того как страница стала интерактивной, не блокируя первоначальный рендеринг.

✅ Правильный подход:
- Используйте beforeInteractive только в _document.js для критичных скриптов
- afterInteractive для аналитики и сторонних сервисов
- lazyOnload для некритичных виджетов (чаты, соцсети)
- Inline скрипты через dangerouslySetInnerHTML внутри Script

❌ Избегайте:
- Обычных <noscript> тегов в компонентах React
- beforeInteractive в обычных страницах (только _document.js)
- Блокирующих скриптов без strategy
- Загрузки тяжёлых скриптов синхронно

Next.js Script оптимизирует производительность автоматически!


🔎🔎🔎🔎🔄

#⃣Вопрос

#⃣Новости

#⃣База вопросов

😎 Platform — реальный проект для прокачки фронтенда!

Это не демо и не учебный «туду-лист», а полноценная платформа с продуманной архитектурой и современным стеком: React, TypeScript, Redux Toolkit, React Hook Form, FSD.

Можно изучить каждую страницу, каждый компонент, посмотреть, как устроен код в боевом проекте, и забрать себе лучшие практики!

Оставляю ссылочку: GitHub 📱

➡️ Books Ready | #ресурс

#React
🚩 Почему в JavaScript файлах можно писать HTML-подобный код?

JSX (JavaScript XML) — это синтаксическое расширение JavaScript, которое позволяет писать HTML-подобную разметку внутри JavaScript кода. JSX не является валидным JavaScript и компилируется в обычные вызовы функций React.createElement(). Это делает код компонентов более читаемым и интуитивным.

// Плохо - React.createElement (так работает под капотом)
function Button() {
    return React.createElement(
        'button',
        { className: 'btn', onClick: handleClick },
        React.createElement('span', null, 'Click me'),
        React.createElement('span', null, '👆')
    );
}

// Хорошо - JSX (компилируется в код выше)
function Button() {
    return (
        <button className="btn" onClick={handleClick}>
            <span>Click me</span>
            <span>👆</span>
        </button>
    );
}

📎 Ключевые особенности JSX:

🟣 JSX компилируется в React.createElement() вызовы
🟣 Можно использовать JavaScript выражения в фигурных скобках {}
🟣 HTML атрибуты пишутся в camelCase (className, onClick)
🟣 JSX элементы могут быть присвоены переменным и возвращены из функций

JSX не является обязательным для React, но делает код значительно читаемее. Вместо вложенных вызовов функций вы видите привычную HTML-подобную структуру. Babel или другой транспайлер преобразует JSX в JavaScript до запуска кода.

В JSX можно вставлять любые JavaScript выражения внутри фигурных скобок: переменные, вызовы функций, тернарные операторы, map для списков. Это позволяет создавать динамические компоненты с условной логикой прямо в разметке.

✅ Правильный подход:
- Используйте JSX для всех React компонентов
- Оборачивайте многострочный JSX в круглые скобки ()
- Используйте {} для JavaScript выражений внутри JSX
- Помните что JSX возвращает один корневой элемент (или Fragment)

❌ Избегайте:
- Использования class вместо className
- Забывать закрывать теги (все теги должны быть закрыты)
- Вставлять JavaScript statements (if, for) напрямую в JSX
- Возвращать несколько корневых элементов без обёртки

JSX делает React код похожим на HTML, но это JavaScript!


🔎🔎🔎🔎🔄

#⃣Вопрос

#⃣Новости

#⃣База вопросов

#React

🚩 Почему ваш компонент не видит обновления Props?

Props — это read-only канал от родителя к ребёнку. Главное: вы не можете их менять. Попытка мутировать Props приведёт к тому, что обновления не произойдут.

// Плохо - Props read-only
function UserCard(props) {
  props.name = "Bob"; // ❌ Не сработает!
  return <h1>{props.name}</h1>;
}

// Хорошо - Используйте callback
function UserCard({ name, onNameChange }) {
  return (
    <>
      <h1>{name}</h1>
      <button onClick={() => onNameChange("Bob")}>Change</button>
    </>
  );
}

📎 Основные проблемы:

🟣 Props read-only, но разработчики их мутируют
🟣 Передача всего объекта вместо деструктуризации
🟣 Забывают про dependency в useEffect при изменении props

Props — это контракт: родитель передаёт данные, ребёнок их использует, но не меняет. Если нужно обновить — вызови callback.

Пример:

function Button({ label = "Click", onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

function Shop() {
  const [cart, setCart] = React.useState([]);
  const products = [{ id: 1, name: "Laptop", price: 1000 }];

  return (
    <div>
      {products.map(p => (
        <Button key={p.id} label="Add" onClick={() => setCart([...cart, p.name])} />
      ))}
      <p>Cart: {cart.length}</p>
    </div>
  );
}

✅ Props для:
- Передачи данных сверху вниз
- Callback функций для событий
- Конфигурации компонента
- Переиспользуемых компонентов

❌ Не делайте:
- Мутацию Props
- Props drilling (5+ уровней)
- Передачу целого объекта

Props — основа React!


🔎🔎🔎🔎🔄

#⃣Вопрос

#⃣Новости

#⃣База вопросов

#React #JavaScript
🚩 Почему props drilling разрушает вашу архитектуру React?

Redux — это предсказуемый контейнер состояния для JavaScript-приложений. Вместо передачи данных через множество слоёв компонентов (prop drilling), Redux хранит всё состояние в одном центральном месте, и любой компонент может получить нужные данные напрямую.

Блок "Проблема/Решение":

// Плохо: props drilling - передача через 5+ компонентов
<App user={user}>
  <Header user={user}>
    <Nav user={user}>
      <Profile user={user} />
    </Nav>
  </Header>
</App>

// Хорошо: Redux - компонент берёт данные напрямую из store
import { useSelector } from 'react-redux';

function Profile() {
  const user = useSelector(state => state.user);
  return <div>{user.name}</div>;
}

📎 Основные проблемы без Redux:

🟣 Props drilling — данные передаются через десятки компонентов
🟣 Состояние разбросано по всем компонентам — сложно отследить изменения
🟣 Один компонент обновляется — перерисовывается всё дерево
🟣 Сложная отладка — откуда пришли данные в компонент?


🔴Как работает Redux?

Store — одно центральное хранилище состояния всего приложения. Это единственный источник правды.

Action — простой объект, описывающий, что произошло: { type: 'ADD_TODO', payload: 'Купить молоко' }.

Reducer — чистая функция, принимающая старое состояние и action, возвращающая новое состояние: (state, action) => newState.

Dispatch — отправляет action в reducer: dispatch({ type: 'ADD_TODO' }).

Поток данных: User Action → Dispatch → Reducer → New State → UI Update.

// Пример: счётчик
const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch(action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// В компоненте
function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
    </div>
  );
}

✅Правильное решение:
- Используйте Redux для сложных приложений с множеством общего состояния
- Применяйте Redux Toolkit для упрощения кода (createSlice вместо reducers)
- Разделяйте состояние на логические слайсы (auth, products, cart)
- Используйте useSelector для получения данных и useDispatch для отправки actions
- Оборачивайте приложение в <Provider store={store}>


❌ Чего избегать:
- Не используйте Redux для простых приложений (используйте useState)
- Не мутируйте состояние напрямую — reducers должны быть чистыми функциями
- Не складывайте в Redux всё подряд — только глобальное состояние
- Не забывайте про мемоизацию селекторов для оптимизации

Когда использовать Redux: большое приложение (100+ компонентов), часто меняющееся состояние, несколько разработчиков, нужна хорошая отладка. 60% React-приложений используют Redux!


🔎🔎🔎🔎🔄

#⃣Вопрос

#⃣Новости

#⃣База вопросов