# @steroidsjs/ssr > Для запуска SSR используйте команду: ```node webpack production ssr && node public/server.js```. Latest version **3.0.5** (published 2026-08-28) · MIT license · 0 weekly downloads ## Install ```sh npm install @steroidsjs/ssr pnpm add @steroidsjs/ssr yarn add @steroidsjs/ssr bun add @steroidsjs/ssr ``` ## Health **Score 60/100 (C)** — status: active. Positive: no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads; no types; no esm support. ## Facts | | | |---|---| | Version | 3.0.5 | | Published | 2026-08-28 | | First published | 2022-02-28 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 12 | | Unpacked size | 42.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 0 | | Author | Vladimir Kozhin | | Maintainers | affka, krydenk, perlexed, syomx, moondela, thesamebear, fogarea | ## Links - npm: https://www.npmjs.com/package/@steroidsjs/ssr - Repository: https://github.com/steroids/ssr - Issues: https://github.com/steroids/ssr/issues - npm.io page: https://npm.io/package/@steroidsjs/ssr ## Dependencies (12) - [react](https://npm.io/package/react.md) ^18.2.0 - [express](https://npm.io/package/express.md) ^4.17.1 - [react-dom](https://npm.io/package/react-dom.md) ^18.2.0 - [url-loader](https://npm.io/package/url-loader.md) ^4.1.1 - [compression](https://npm.io/package/compression.md) ^1.8.1 - [react-helmet](https://npm.io/package/react-helmet.md) ^6.1.0 - [react-router](https://npm.io/package/react-router.md) ^5.2.0 - [cookie-parser](https://npm.io/package/cookie-parser.md) ^1.4.5 - [@types/express](https://npm.io/package/@types/express.md) ^4.17.12 - [@steroidsjs/core](https://npm.io/package/@steroidsjs/core.md) 3.1.10 - [express-http-proxy](https://npm.io/package/express-http-proxy.md) ^1.6.3 - [@types/react-helmet](https://npm.io/package/@types/react-helmet.md) ^6.1.1 ## Recent versions - 3.0.5 (latest) — 2026-08-28 - 3.0.4 — 2026-03-21 - 3.0.3 — 2026-02-09 - 3.0.2 — 2026-02-09 - 3.0.1 — 2024-06-06 - 3.0.0 — 2024-03-15 - 2.0.3 — 2023-08-15 - 2.0.2 — 2023-06-29 - 2.0.1 — 2023-06-29 - 2.0.0 — 2023-06-28 - 1.2.0 — 2022-09-01 - 1.1.0 — 2022-06-09 - 1.0.0 — 2022-02-28 ## README # SSR ### Запуск SSR Для запуска SSR используйте команду: ```node webpack production ssr && node public/server.js```. ### Настройка webpack Для настройки SSR в конфигурацию ```@steroidsjs/webpack``` можно передать несколько параметров: Параметр | Значение по умолчанию | Описание ------------ | ------------- | ------------- ```serverPath``` | ```node_modules/@steroidsjs/ssr/index.js``` | Путь до файла, в котором запускается SSR. ```applicationPath``` | ```src/Application.tsx``` | Файл, который экспортирует компонент ```Application``` (по умолчанию) и переменную ```config```. В переменной ```config``` содержится конфигурация с типом ```IApplicationHookConfig``` для хука ```useApplication```. Без этих данных SSR работать не будет. ```initActionPath``` | ```src/shared/Layout/Layout.tsx``` | Файл, который экспортирует функцию ```initAction```. Эта функция передаётся в хук ```useLayout``` и нужна для первоначальной подгрузки данных с бэкенда и инициализации приложения. ```ssr``` | ```{}``` | Дополнительная webpack-конфигурация для серверной сборки. ```languages``` | ```['en']``` | Языки приложения в порядке приоритета. Нужны, чтобы SSR в зависимости от ```accept-language``` понимал, какой перевод следует отдать на клиент. Пример: ``` require('@steroidsjs/webpack') .config({ port: 9991, sourcePath: __dirname + '/src', staticPath: '', baseUrl: 'frontend/', serverPath: '/node_modules/@steroidsjs/ssr/index.js', applicationPath: 'src/Application.tsx', initActionPath: 'src/shared/Layout/Layout.tsx', ssr: { module: { rules: {...} } }, languages: ['ru', 'en'], }) .base(__dirname + '/src/index.tsx'); ``` ### Предзагрузка данных На этапе серверного рендеринга можно подгрузить данные для хука ```useFetch``` и компонента ```List```. Для этого: 1. вынесите пропсы из ```useFetch``` / ```List``` в константы 2. в дереве роутов для нужной страницы укажите поле ```preloadData```, поместите в него функцию, которая принимает параметры URL и возвращает массив с пропсами. Хук ```useFetch``` и компонент ```List``` не будут повторно инициализироваться и делать запросы на клиенте, если подгруженные данные существуют. Пример: ``` 'routes/ProductPage.tsx' export const fetchConfig = match => ({url: `/api/products/${match.params.productId}`}) export const listConfig = {listId: 'favoritesList', action: '/api/favorites'} ``` ``` 'routes/intex.ts' import {fetchConfig, listConfig} from './DetailPage' export default { id: ROUTE_ROOT, exact: true, path: '/', title: 'Home', component: IndexPage, roles, items: { [ROUTE_PRODUCT_PAGE]: { path: '/catalog/:productId', component: ProductPage, roles, preloadData: match => [fetchConfig(match), listConfig] }, }, } ``` Пропсы компонента ```List``` следует передавать в ```preloadData```, даже если ```items``` не нужно подгружать с бэкенда. Иначе компонент не отрендерится на сервере. ### HTML-теги Чтобы добавить в html-разметку теги ```title```, ```meta```, ```script```, ```link```, ```styles```, ```noscript```, используйте компонент ```@steroidsjs/core/ui/layout/Meta```. Общие для всего сайта теги можно указать в компоненте ```Layout```, а теги характерные для каждой страницы - в компонентах страниц (т.е. ```title```, ```description``` и т.п.), они перезапишут общие. ``` ``` --- _Source: https://npm.io/package/@steroidsjs/ssr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._