Предпросмотр статических страниц¶
28.02.2022
Angular Universal позволяет выполнять предварительный рендеринг страниц вашего приложения. Пререндеринг — это процесс, в котором динамическая страница обрабатывается во время сборки, генерируя статический HTML.
Как пререндерить страницу¶
Для пререндеринга статической страницы убедитесь, что в вашем приложении добавлены возможности Server-Side Rendering (SSR).
Для получения дополнительной информации смотрите универсальное руководство. После добавления SSR выполните следующую команду:
1 | |
Опции сборки для пререндеринга¶
Когда вы добавляете пререндеринг в свое приложение, доступны следующие параметры сборки:
| Параметры | Подробности |
|---|---|
browserTarget | Укажите цель для сборки. |
serverTarget | Укажите цель сервера, который будет использоваться для рендеринга приложения. |
routes | Определите массив дополнительных маршрутов для пререндера. |
guessRoutes | Должен ли конструктор извлекать маршруты и угадывать пути для рендеринга. По умолчанию true. |
routesFile | Укажите файл, содержащий список всех маршрутов для рендеринга, разделенных новыми строками. Эта опция полезна, если у вас большое количество маршрутов. |
numProcesses | Укажите количество CPU, которые будут использоваться при выполнении команды пререндеринга. |
Пререндеринг динамических маршрутов¶
Вы можете создавать динамические маршруты. Примером динамического маршрута является product/:id, где id задается динамически.
Для пререндеринга динамических маршрутов выберите одну из следующих опций:
- Предоставить дополнительные маршруты в командной строке
- Предоставить маршруты с помощью файла
- Предпросмотр определенных маршрутов
Предоставить дополнительные маршруты в командной строке¶
Во время выполнения команды prerender вы можете указать дополнительные маршруты. Например:
1 | |
Предоставление дополнительных маршрутов с помощью файла¶
Вы можете предоставлять маршруты с помощью файла для создания статических страниц.
Этот метод полезен, если вам нужно создать большое количество маршрутов. Например, данные о продукции для приложения электронной коммерции, которые могут поступать из внешнего источника, такого как база данных или система управления контентом (CMS).
Чтобы предоставить маршруты с помощью файла, используйте опцию --routes-file с именем файла .txt, содержащего маршруты.
Например, вы можете создать этот файл с помощью сценария, который извлечет идентификаторы из базы данных и сохранит их в файле routes.txt:
1 2 | |
Когда ваш файл .txt будет готов, выполните следующую команду для рендеринга статических файлов с динамическими значениями:
1 | |
Пререндеринг определенных маршрутов¶
Вы также можете передать определенные маршруты команде prerender. Если вы выбрали этот вариант, убедитесь, что вы отключили опцию guessRoutes.
1 | |