Знаете ли вы Angular Universal? Это может помочь веб-сайту обеспечить лучшую поддержку SEO!

В общем, обычный Angular Приложение находится в Браузер вбегая DOM Отрисуйте страницу и взаимодействуйте с пользователем. и Angular Universal находится в Сервер Рендеринг (Серверная сторона) Рендеринг (SSR) генерирует статические веб-страницы приложения, а затем отображает их на клиенте. Преимущество состоит в том, что они могут отображаться быстрее, а контент может отображаться пользователям до того, как будет обеспечено полное взаимодействие.

Наша домашняя страница https://www.abmcode.com это использовать Angular Разработано недавно, чтобы предоставить поисковым системам лучшую SEO, поменял на Серверрендеринг. Угловой из SSR При компиляции есть некоторые настройки, которые могут даже потребовать некоторых изменений кода. Посмотрим, как мы это сделаем!

намекать

Эта статьянаходится в Angular 14 Завершено в среде, некоторый контент действительно новый из Angular Версия может быть неприменима, см. Angular Официальная документация.

Преимущества использования SSR

Более оптимизирован для SEO

Хотя теперь оно включает в себя Google существуют из Некоторые поисковые системы и социальные сети утверждают, что смогли поддержать это с помощью Драйвер JavaScript (JS) из SPA（Single-Page Приложение) приложение для сканирования, но результаты кажутся неудовлетворительными. статический HTML Сайт из SEO Производительность по-прежнему лучше, чем у динамических веб-сайтов, поэтому Angular Просмотры официального сайта (Angular Но Google из！）。

Универсальная версия приложения JS не имеет статической версии.,вернопоиск、внешняя ссылка、Навигация из поддержки лучше.

Улучшите производительность мобильных устройств

Некоторые мобильные устройства могут не поддерживать JS или правильно JS поддержка очень ограничена,причина сайта из Очень плохой опыт доступа。В этом случае,Нам необходимо предоставить версию приложения без JS.,так чтодля Пользователи обеспечивают лучшееизопыт。

Показывать домашнюю страницу быстрее

С точки зрения пользовательского опыта, скорость отображения домашней страницы очень важна. в соответствии с eBay из данных,Результаты поиска отображаются быстрее каждые 100 миллисекунд.,“добавить в корзину» ставка изиспользовать увеличится 0.5%。

использовал Universal После этого домашняя страница приложения будет отображаться пользователю в полном виде, что является чистым HTML веб-страница, даже если она не поддерживается JS, также может отображаться. В настоящее время, хотя веб-страница не может обработать событие Браузериз, она поддерживает передачу routerLink Совершите прыжок.

Преимущество этого заключается в том, что,Сначала мы можем использовать статические веб-страницы, чтобы привлечь внимание пользователей.,существуют, когда пользователи просматривают Интернет из,загрузить весь Angular приложение. Это дает пользователям очень хороший и чрезвычайно быстрый опыт загрузки.

Добавить SSR в проект

Angular CLI Это может помочь нам очень удобно превратить обычного человека в Angular Проект трансформируется в проект с SSR из проекта. Для создания приложения Сервер требуется всего одна команда:

ng add @nguniversal/express-engine

важный Перед запуском этой команды рекомендуется сохранить все изменения.

Эта команда внесет в проект следующие изменения:

1. добавить в Сервердокумент：
   • main.server.ts - Основной программный файл Сервера
   • app/app.server.module.ts - Основной модуль приложения Сервер
   • tsconfig.server.json - TypeScript Профиль сервера
   • server.ts - Express web server из запуска файла
2. Исправлятьиздокумент：
   • package.json - добавить в SSR Необходимые зависимости для запуска скрипта
   • angular.json - добавить вразвивать、строить SSR Конфигурация, необходимая приложению

существовать package.json , некоторые будут добавлены автоматически npm 脚本：dev:ssr Используется для работы в существующей среде разработки. SSR Версия；serve:ssr для запуска напрямую build или prerender назадизвеб-страница；build:ssr строить SSR Версияизвеб-страница；prerender строитьпредварительнорендерингназадизвеб-страница,и build По-другому, здесь будет основываться на предоставленном из routes Создать эти страницы из HTML документ.

Заменить API браузера

потому что Universal 应用Нетнаходится выступал в Браузер, так какой-то Браузериз API или функция будет недоступна. Например, приложение Сервер не может использовать Браузер из глобального верного изображения. window、document、navigator、location。

Angular предоставляет два инъецируемых объекта.,используется длясуществовать Серверзаменятьвернождатьизвернослон：Location и DOCUMENT。

Например,существовать Браузерсередина,мы проходим window.location.href получить текущий адрес Браузеза и изменить его на SSR После этого код выглядит следующим образом:

import { Location } from '@angular/common';

export class AbmNavbarComponent implements OnInit{
  // ctor Ввести в Location
  constructor(private _location:Location){
    //...
  }

  ngOnInit() {
    // Распечатать текущий адрес
    console.log(this._location.path(true));
  }
}

такой же,верно Всуществовать Браузериспользовать document.getElementById() получать DOM элемент,существовать Изменить на SSR После этого код выглядит следующим образом:

import { DOCUMENT } from '@angular/common';

export class AbmFoxComponent implements OnInit{
  // ctor Ввести в DOCUMENT
  constructor(@Inject(DOCUMENT) private _document: Document) { }

  ngOnInit() {
    // получать id для fox-container из DOM
    const container = this._document.getElementById('fox-container');
  }
}

Использовать абсолютный URL-адрес

существовать Angular SSR Приложение, HTTP Запрос из URL Адрес должен быть Абсолютный адрес（Прямо сейчас,к http/https Адрес, начинающийся с из, не может быть соответствующим адресом, например /api/heros）。Angular Официальная рекомендация: Запрос. из URL Задайте полный путь к renderModule() или renderModuleFactory() из options 参数середина。нонаходится в v14 В автоматически сгенерированном коде эти два метода явно не вызываются. и прочитав Http Запрос из перехвата,也可к达到такой жеиз Эффект。

Далее сначала готовим перехватчик, предполагая, что файл находится в проекте shared/universal-relative.interceptor.ts путь:

import { HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Inject, Injectable, Optional } from '@angular/core';
import { REQUEST } from '@nguniversal/express-engine/tokens';
import { Request } from 'express';

// Игнорировать проверку регистра
const startsWithAny = (arr: string[] = []) => (value = '') => {
    return arr.some(test => value.toLowerCase().startsWith(test.toLowerCase()));
};

// http, https, Соответствующий адрес протокола
const isAbsoluteURL = startsWithAny(['http', '//']);

@Injectable()
export class UniversalRelativeInterceptor implements HttpInterceptor {
    constructor(@Optional() @Inject(REQUEST) protected request: Request) { }

    intercept(req: HttpRequest<any>, next: HttpHandler) {
        // Не совсем верный адресиз URL
        if (!isAbsoluteURL(req.url)) {
            let protocolHost: string;
            if (this.request) {
                // Если вводить из REQUEST Нетдлянулевой,Затем от инъекциииз SSR REQUEST серединаполучить адрес протокола
                protocolHost = `${this.request.protocol}://${this.request.get(
                    'host'
                )}`;
            } else {
                // Если вводить из REQUEST длянулевой,напримерсуществоватьруководить prerender build：
                // здесь нужно добавить Например, настраиваемый префикс адреса: все наши запросы поступают от abmcode.com Приходить.
                protocolHost = 'https://www.abmcode.com';
            }
            const pathSeparator = !req.url.startsWith('/') ? '/' : '';
            const url = protocolHost + pathSeparator + req.url;
            const serverRequest = req.clone({ url });
            return next.handle(serverRequest);

        } else {
            return next.handle(req);
        }
    }
}

然назадсуществовать app.server.module.ts в файле provide публично заявить:

import { UniversalRelativeInterceptor } from './shared/universal-relative.interceptor';
// ... другой imports

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    // Если вы используете @angular/flext-layout, здесь также необходимо ввести модуль Сервер
    FlexLayoutServerModule, 
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: UniversalRelativeInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule { }

любой такойверно В相верноадресиз Запросы автоматически конвертируютсядля Абсолютный запрос адреса,существовать SSR Больше не будет проблем в из сценариев.

Prerender предварительно отображает статический HTML

После прохождения вышеуказанных шагов, если мы пройдем npm run build:ssr создавайте предметы, которые вы найдете существующими dist/<your project>/browser Есть только index.html файл, откройте файл для просмотра и обнаружите, что есть <app-root></app-root> Этот элемент означает, что содержимое вашей веб-страницы не содержит существующих html генерируется в. Это потому, что Angular использовал динамическую маршрутизацию, например /product/:id При таком виде маршрутизации результаты рендеринга страницы проходят через JS Вы можете узнать это, только выполнив его. использовал Express как Web Сервер может существовать Сервер времени выполнения на основе запросов пользователя (запросов сканера), использовать механизм шаблонов для генерации статических HTML интерфейс.

и prerender（npm run prerender）встречасуществоватьстроить时生成静态 HTML Например, если мы делаем официальный корпоративный сайт и у него всего несколько страниц, то мы можем использовать технологию предварительного рендеринга для создания статических страниц. HTML документ,Избегайте динамической генерации во время выполнения,Для дальнейшего улучшения скорости доступа к веб-страницам и удобства пользователей.

Конфигурация пути пререндеринга

Путь к веб-странице можно указать несколькими способами:

1. Дополнительные параметры через командную строку:

ng run <app-name>:prerender --routes /product/1 /product/2

1. Если существует много путей, например для product/:id Этот динамический путь,则可киспользовать一个路径документroutes.txt:

/products/1
/products/23
/products/145
/products/555

Тогда аргумент командной строки существует указывает файл:

ng run <app-name>:prerender --routes-file routes.txt

1. существоватьпроектиз angular.json Требуется конфигурация файла

"prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
 "routes": [ // Настройте здесь
          "/",
          "/main/home",
          "/main/service",
          "/main/team",
          "/main/contact"
        ]
      },

После завершения настройки,重新执行предварительнорендеринг Заказ（npm run prerender или ВОЗиспользовать Заказ行参数则按照начальство面<1><2>серединаиз Заказ执行）,После завершения компиляции,Открыть снова dist/<your project>/browser 下из index.html Вы обнаружите, что нет <app-root></app-root> , вместо этого это фактическое содержимое домашней страницы. В то же время также генерируются соответствующий каталог пути и файлы в каждом каталоге. index.html подстраницадокумент.

SEO-оптимизация

SEO изключсуществовать Вверновеб-страница title,keywords и description извключено,поэтомуверно В我们想要让поиск引擎включеноизвеб-страница,Код можно изменить, чтобы обеспечить их.

существовать Angular 14 , если интерфейс маршрутизации проходит Routes Конфигурация: вы можете сделать веб-страницу статической. title Непосредственно напишите существующую маршрутизацию из конфигурации:

{ path: 'home', component: AbmHomeComponent, title: '<ты хочешь показатьсуществовать Браузер tab начальствоиззаголовок>' },

Кроме того, Угловой Также предусмотрены инъекции Title и Meta Используется для изменения заголовка веб-страницы. meta информация:

import { Meta, Title } from '@angular/platform-browser';

export class AbmHomeComponent implements OnInit {

  constructor(
    private _title: Title,
    private _meta: Meta,
  ) { }

  ngOnInit() {
    this._title.setTitle('<эта страницаиззаголовок>');
    this._meta.addTags([
      { name: 'keywords', content: '<эта страницаиз keywords,к英文逗号隔开>' },
      { name: 'description', content: '<эта страницаизописывать>' }
    ]);
  }
}

Заключение

Angular как SPA Существующая структура развития на уровне предприятия имеет свои уникальные преимущества в модульности и развитии командного сотрудничества. существование развивается в v14 Эта версия не содержит зависимостей NgModule независимость Component функциональность, еще больше упрощающая модульную архитектуру.

Angular Universal Основное внимание будет уделено Angular App Как Серверрендеринги генерировать статические HTML, конечно, сложен для взаимодействия с пользователем из-за SPA Не рекомендуется ССР. Для страниц с небольшим количеством страниц и SEO Если вам нужен веб-сайт или система, вы можете рассмотреть возможность использования Universal и SSR технология.