Логотип YeaHub

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

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Задачи

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

AI info

Карта сайта

Документы

Медиа

Назад
Вопрос про TypeScript: ff

rrrr

rrrrr

Короткий ответ

Да, ты правильно подметил разницу между SPA (Single Page Application) и SSR (Server-Side Rendering) с точки зрения работы с HTML.

SPA (React, Vue, Angular и др.)

  • Один HTML-файл (обычно index.html), который загружается один раз при первом посещении.

  • Дальше JavaScript (React, Vue и т. д.) динамически подменяет контент без перезагрузки страницы.

  • Рендеринг происходит на клиенте (в браузере).

  • Пример:

    <!-- index.html -->
    <div id="root"></div>
    <script src="app.js"></script> <!-- React загрузит контент сюда -->

SSR (Next.js, Nuxt.js, традиционные серверные фреймворки)

  • Сервер генерирует новый HTML для каждого запроса и отправляет его браузеру.

  • Каждый переход по странице может означать полную перезагрузку HTML (если не используется гибридный подход, как в Next.js).

  • Рендеринг происходит на сервере, браузер получает готовую разметку.

  • Пример (как может выглядеть ответ сервера):

    <!-- Сервер отдаёт готовую страницу -->
    <html>
      <body>
        <h1>Моя страница</h1>
        <p>Сгенерировано на сервере в ${new Date()}</p>
      </body>
    </html>

Гибридные подходы (SSG, ISR, Hydration)

Современные фреймворки (Next.js, Remix, SvelteKit) могут комбинировать оба подхода:

  • SSG (Static Site Generation) – HTML генерируется на этапе сборки.

  • ISR (Incremental Static Regeneration) – статика обновляется по расписанию или запросу.

  • Hydration – после SSR React "оживляет" страницу на клиенте, превращая её в SPA.

Вывод

  • SPA – один HTML, контент подгружается JS (быстрый после загрузки, но может тормозить SEO).

  • SSR – новый HTML с сервера (лучше для SEO, но может быть медленнее из-за серверного рендеринга).

  • Современные фреймворки (Next.js и др.) позволяют совмещать плюсы обоих подходов.

Если хочешь глубже разобрать какой-то аспект – спрашивай! 🚀

Длинный ответ

Вот пример вложенного React-компонента с JSX:

import React from 'react';

// Родительский компонент
function ParentComponent() {
  return (
    <div className="parent">
      <h2>Родительский компонент</h2>
      <ChildComponent 
        title="Первый дочерний" 
        description="Это первый вложенный компонент"
      />
      <ChildComponent 
        title="Второй дочерний" 
        description="Это второй вложенный компонент"
      />
    </div>
  );
}

// Дочерний компонент
function ChildComponent({ title, description }) {
  return (
    <div className="child">
      <h3>{title}</h3>
      <p>{description}</p>
      <GrandchildComponent message="Я очень глубоко вложен!" />
    </div>
  );
}

// "Внучатый" компонент
function GrandchildComponent({ message }) {
  return (
    <div className="grandchild">
      <small>{message}</small>
    </div>
  );
}

export default ParentComponent;

Этот пример показывает:

  1. ParentComponent - корневой компонент

  2. ChildComponent - дочерний компонент, который принимает пропсы (title, description)

  3. GrandchildComponent - компонент третьего уровня вложенности

Также можно записать это с использованием стрелочных функций:

const ParentComponent = () => (
  <div>
    <h2>Parent</h2>
    <ChildComponent />
  </div>
);

const ChildComponent = () => (
  <div>
    <h3>Child</h3>
    <GrandchildComponent />
  </div>
);

const GrandchildComponent = () => <div>Grandchild</div>;

Оба варианта корректны и демонстрируют вложенность компонентов в React.

🔄 Полный цикл разработки

Мой путь будто вел меня к тому, чем я занимаюсь сейчас:

  • Работа в британском финтехе

  • Глубокая прокачка навыков в LS.Graphics

  • Разработка собственных проектов (бэкенд, DevOps)

  • Ведение YouTube и Telegram-каналов (продвижение, реклама, формирование сообщества)

  • Менторство (планирование, стратегии обучения, помощь в трудоустройстве)

Каждый этап дал мне уникальный опыт, который сейчас помогает в YeaHub.


🚀 YeaHub: год развития

За год YeaHub стал для меня новым уровнем роста — и в техническом плане, и в управлении.

Команда за год:

  • 13 бэкендеров

  • 9 дизайнеров

  • 3 тестировщика

  • 80+ фронтендеров

Сейчас в проекте 45 участников.

📌 Как все устроено?

Я выстроил иерархию: у каждого направления есть свои лиды, у каждого участника — своя зона ответственности.

Моя роль:

  • CEO & Product Owner

  • Написание документации

  • Участие в ежедневных созвонах

  • Решение сложных задач

  • Code Review (чтобы не было "говнокода" и багов)

  • Формирование видения проекта

  • Продвижение

🔥 Сложности

  • Держать все в голове (ответственность за все направления)

  • Работа с новичками (одновременно 10+ человек, которым нужно объяснять, ставить задачи и контролировать качество)

  • Баланс между разработкой и менеджментом (это не "смузи-офис", а реальная работа)

Но это невероятный опыт, который необходим перед тем, как масштабироваться и набирать полноценную команду.


📊 YeaHub сегодня

  • 2500+ зарегистрированных пользователей

  • 80 000+ посещений с момента релиза

  • 500+ ежедневных активных пользователей

И это без мощной рекламной кампании!

В планах — дальнейшее развитие и формирование профессиональной команды.


🛠 Исправления в тексте:

  1. Грамматика/орфография (например, "бекенд" → "бэкенд", "зарегестрированных" → "зарегистрированных")

  2. Пунктуация (добавлены и убраны лишние запятые, исправлены тире)

  3. Структура (разбито на логические блоки, улучшена читаемость)

  4. Стиль (сохранена энергичная подача, но убрана избыточная разговорность)

  5. Уточнены формулировки (например, "накрутка опыта" → "глубокая прокачка навыков")

Текст стал более четким и профессиональным, но сохранил ваш стиль и энергию. 🚀

Frontend developer

tech
tech
tech
tech
tech
tech
tech
tech
tech

Ментор по Frontend

Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства

Записаться на консультацию

Уровень

  • Рейтинг:

    5

  • Сложность:

    1

Навыки

  • TypeScript

    TypeScript

Ключевые слова

#ff

Подпишись на React Developer в телеграм

Frontend developer

tech
tech
tech
tech
tech
tech
tech
tech
tech

Ментор по Frontend

Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства

Записаться на консультацию