rrrrr
Да, ты правильно подметил разницу между SPA (Single Page Application) и SSR (Server-Side Rendering) с точки зрения работы с HTML.
Один HTML-файл (обычно index.html), который загружается один раз при первом посещении.
Дальше JavaScript (React, Vue и т. д.) динамически подменяет контент без перезагрузки страницы.
Рендеринг происходит на клиенте (в браузере).
Пример:
<!-- index.html -->
<div id="root"></div>
<script src="app.js"></script> <!-- React загрузит контент сюда -->Сервер генерирует новый HTML для каждого запроса и отправляет его браузеру.
Каждый переход по странице может означать полную перезагрузку HTML (если не используется гибридный подход, как в Next.js).
Рендеринг происходит на сервере, браузер получает готовую разметку.
Пример (как может выглядеть ответ сервера):
<!-- Сервер отдаёт готовую страницу -->
<html>
<body>
<h1>Моя страница</h1>
<p>Сгенерировано на сервере в ${new Date()}</p>
</body>
</html>Современные фреймворки (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;Этот пример показывает:
ParentComponent - корневой компонент
ChildComponent - дочерний компонент, который принимает пропсы (title, description)
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 стал для меня новым уровнем роста — и в техническом плане, и в управлении.
Команда за год:
13 бэкендеров
9 дизайнеров
3 тестировщика
80+ фронтендеров
Сейчас в проекте 45 участников.
Я выстроил иерархию: у каждого направления есть свои лиды, у каждого участника — своя зона ответственности.
Моя роль:
CEO & Product Owner
Написание документации
Участие в ежедневных созвонах
Решение сложных задач
Code Review (чтобы не было "говнокода" и багов)
Формирование видения проекта
Продвижение
Держать все в голове (ответственность за все направления)
Работа с новичками (одновременно 10+ человек, которым нужно объяснять, ставить задачи и контролировать качество)
Баланс между разработкой и менеджментом (это не "смузи-офис", а реальная работа)
Но это невероятный опыт, который необходим перед тем, как масштабироваться и набирать полноценную команду.
2500+ зарегистрированных пользователей
80 000+ посещений с момента релиза
500+ ежедневных активных пользователей
И это без мощной рекламной кампании!
В планах — дальнейшее развитие и формирование профессиональной команды.
Грамматика/орфография (например, "бекенд" → "бэкенд", "зарегестрированных" → "зарегистрированных")
Пунктуация (добавлены и убраны лишние запятые, исправлены тире)
Структура (разбито на логические блоки, улучшена читаемость)
Стиль (сохранена энергичная подача, но убрана избыточная разговорность)
Уточнены формулировки (например, "накрутка опыта" → "глубокая прокачка навыков")
Текст стал более четким и профессиональным, но сохранил ваш стиль и энергию. 🚀
Frontend developer
Ментор по Frontend
Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства
Записаться на консультацию