Nuanced Pumpkin Mavens

    @steroidsjs/ssr

    1.2.0 • Public • Published

    SSR

    Запуск SSR

    Для запуска SSR используйте команду: node webpack production ssr && node public/server.js.

    Настройка webpack

    Для настройки SSR в конфигурацию @steroidsjs/webpack можно передать несколько параметров:

    Параметр Значение по умолчанию Описание
    serverPath node_modules/@steroidsjs/ssr/index.ts Путь до файла, в котором запускается 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.ts',
        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 и т.п.), они перезапишут общие.

    <Meta
      title={__('Заголовок страницы')}
      description={__('Описание страницы')}
      meta={[
          {
              name: 'yandex-verification',
              content: 'ce38...39e6'
          },
          {
              name: 'google-site-verification',
              content: 'sdf8...39e6'
          }
      ]}
      scripts={[
          {src: 'https://some-script.min.js'},
      ]}
    />
    

    Keywords

    none

    Install

    npm i @steroidsjs/ssr

    DownloadsWeekly Downloads

    1

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    24.5 kB

    Total Files

    14

    Last publish

    Collaborators

    • thesamebear
    • syomx
    • stiivenson
    • affka
    • krydenk
    • perlexed
    • dmartynov