Product 42

{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧭 Общий сценарий SSR-запроса"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда пользователь открывает страницу (например, "},{"type":"text","marks":[{"type":"code"}],"text":"/products/42"},{"type":"text","text":"), сервер выполняет "},{"type":"text","marks":[{"type":"bold"}],"text":"несколько стадий"},{"type":"text","text":" до того, как вернёт готовый HTML."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ 1. Принимает HTTP-запрос"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Браузер отправляет:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"GET /products/42 HTTP/1.1\nHost: example.com\nAccept: text/html\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Сервер получает этот запрос (через Node.js, Express, NestJS, Next.js и т. д.)"},{"type":"hardBreak"},{"type":"text","text":"и начинает определять:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"какой роут (страница) нужен,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"какие данные требуются для неё,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"какие заголовки и куки переданы (например, токен сессии, язык, тема)."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧩 2. Определяет маршрут и загружает страницу приложения"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Фреймворк (например, "},{"type":"text","marks":[{"type":"bold"}],"text":"Next.js"},{"type":"text","text":") определяет:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"какой "},{"type":"text","marks":[{"type":"bold"}],"text":"React-компонент"},{"type":"text","text":" отвечает за этот путь,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"какие функции нужно вызвать до рендеринга ("},{"type":"text","marks":[{"type":"code"}],"text":"getServerSideProps"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"loadData"},{"type":"text","text":", и т. д.)."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это стадия маршрутизации и подготовки."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔍 3. Выполняет загрузку данных (data fetching)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Перед рендерингом сервер делает всё, что нужно для заполнения страницы актуальным контентом:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Обращается к "},{"type":"text","marks":[{"type":"bold"}],"text":"базе данных"},{"type":"text","text":" (через Prisma, Sequelize и т. д.),"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Делает "},{"type":"text","marks":[{"type":"bold"}],"text":"HTTP-запросы"},{"type":"text","text":" к API,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Читает "},{"type":"text","marks":[{"type":"bold"}],"text":"cookie / JWT"},{"type":"text","text":", чтобы определить пользователя,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Может подтянуть "},{"type":"text","marks":[{"type":"bold"}],"text":"персонализированные данные"},{"type":"text","text":" (корзину, язык, профиль)."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Результаты этих операций превращаются в props для React-компонентов."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🕓 Это обычно самая “дорогая” стадия по времени — каждая внешняя API-операция задерживает рендеринг HTML."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧱 4. Рендерит React-компоненты на сервере"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда данные готовы, сервер вызывает "},{"type":"text","marks":[{"type":"bold"}],"text":"React-рендерер"},{"type":"text","text":", например:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import { renderToString } from \"react-dom/server\";\nconst html = renderToString();\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"На этом шаге:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React создаёт виртуальное DOM-дерево,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"“рисует” соответствующий HTML-код,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"формирует строку с готовой разметкой."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Результат — "},{"type":"text","marks":[{"type":"bold"}],"text":"HTML-фрагмент"},{"type":"text","text":", который можно сразу вставить в шаблон страницы."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧾 5. Собирает HTML-документ"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Сервер вставляет полученную разметку в общий layout:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n\n \n Product 42\n \n \n \n \n \n \n

\n \n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Также сервер:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"добавляет "},{"type":"text","marks":[{"type":"bold"}],"text":"SEO-теги и метаданные"},{"type":"text","text":","}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"внедряет "},{"type":"text","marks":[{"type":"bold"}],"text":"начальные данные (initial state)"},{"type":"text","text":","}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"подключает "},{"type":"text","marks":[{"type":"bold"}],"text":"CSS / JS-бандлы"},{"type":"text","text":", чтобы клиент смог гидрировать страницу."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 6. (Опционально) Сжимает и кэширует ответ"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Перед отправкой сервер может:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"сжать HTML через "},{"type":"text","marks":[{"type":"bold"}],"text":"Gzip или Brotli"},{"type":"text","text":","}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"положить его в "},{"type":"text","marks":[{"type":"bold"}],"text":"кэш (Redis, CDN, edge-cache)"},{"type":"text","text":" для ускорения следующих запросов,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"добавить заголовки вроде "},{"type":"text","marks":[{"type":"code"}],"text":"Cache-Control"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"ETag"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"Set-Cookie"},{"type":"text","text":"."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"📤 7. Отправляет готовый HTML клиенту"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда всё готово — сервер отправляет ответ:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"HTTP/1.1 200 OK\nContent-Type: text/html; charset=utf-8\nContent-Encoding: br\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"И тело ответа — полностью сгенерированный HTML."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🖥️ 8. Что происходит на клиенте после"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Браузер "},{"type":"text","marks":[{"type":"bold"}],"text":"отрисовывает HTML"},{"type":"text","text":" → пользователь видит контент."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Затем загружаются JS-бандлы."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Запускается "},{"type":"text","marks":[{"type":"bold"}],"text":"hydration"},{"type":"text","text":" — клиентский React связывает логику и делает страницу интерактивной."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"📊 Визуальное представление пайплайна SSR"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"[Запрос] → [Определение маршрута] \n → [Загрузка данных]\n → [Рендер React на сервере]\n → [Сборка HTML + данные]\n → [Сжатие и кэширование]\n → [Ответ с HTML → Браузер]\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚡ Вывод"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Перед тем как отправить HTML клиенту, "},{"type":"text","marks":[{"type":"bold"}],"text":"сервер в SSR делает большую работу"},{"type":"text","text":":"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Определяет нужную страницу и маршрут,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Загружает все данные,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Рендерит React-компоненты в HTML,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Встраивает данные и подключает JS/CSS,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Сжимает и отправляет результат."}]}]}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"💡 Поэтому SSR-страницы отображают контент сразу,"},{"type":"hardBreak"},{"type":"text","text":"но требуют больше ресурсов и времени на стороне сервера."}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Что делает сервер до отправки HTML клиенту?

Комментарии