Рубрики
Без рубрики

Угловой универсальный и серверный рендеринг Deep-ныряв

Начало работы с угловым универсальным / сервером рендеринга

Автор оригинала: Mark Pieszak.

Перейти к профилю Mark Pieszak

Марк Pieszak.

Если вы были заинтересованы или ищете информацию о угловом универсале, вы могли бы иметь трудное время Начало работы Как было много изменений за последние несколько лет, и многие оттуда или общие дезинформации там!

Давайте изменим все это и добраться до скорости, быстро!

В этой многоуровневой серии мы собираемся посмотреть:

  • Установка с угловым универсальным
  • Архитектура и позади сцен SSR.
  • Gotchas, советы и трюки Получение даже крупнейшего корпоративного приложения, работающего с угловым универсальным.

Часть 1 глубокого погружения в угловой универсальный

Примечание : Ранее угловые универсальные были известны как Angular2-Universal На НПМ и т. Д. Обязательно игнорируйте любые статьи или код на основе этого, поскольку он был давно устаревшим!

Часть 1: рендеринг на стороне сервера с угловым

Универсальный универсальный это просто прозвище Для Server-бокового рендеринга (или SSR для короткого) с угловым, технически в пакет теперь находится под 🚀 @ Угловой/платформенный сервер Отказ Это благодаря большой большой работе Патрикгис , Джефф Уиллки & Угловые члены группы Core Vikram Subramanian & Алекс Рикабо (Многие другие) 👏

Так что теперь, когда мы немного понимаем прошлое и настоящее, давайте погрузимся прямо в том, как вы можете начать работу сервера, рендеринг ваших угловых приложений прямо сейчас!

Часть 1 – Начало работы с угловой универсальной и угловой CLI

Я бы ?| очень высоко Рекомендовать начать с недавней интеграции Универсальная имеет с угловой CLI.

Во-первых, давайте создадим новый проект Angular-Cli: (Примечание. Вы можете пропустить это и пойти прямо, чтобы попытаться добавить универсальное в существующее приложение CLI, если вы хотите)

ng new some-amazing-project

Теперь давайте добавим универсальную 🍹

Насколько угловой CLI версии 6.1 был NG Добавить Схема добавлена, что позволяет быстро создавать Леса , Узел экспресс-сервер и другая проводка, необходимая для вас. ✨ kudos к @Caerusaru Для получения этой настройки!

Угловая универсальная схема установки

CD В каталог проекта CORT Angular-CLI CLI вы хотите добавить Universal In и запустить следующую схему.

Обратите внимание на --ClientProject [Имя] часть. Посмотрите на свой angular.json Файл и убедитесь, что вы поместите «имя» проекта, который вы пытаетесь добавить рендеринг на стороне сервера.

ng add @nguniversal/express-engine --clientProject [name]

// angular.json
{ ...
  "projects": {
    "some-amazing-project": {}
}

В примере Angular.json выше, мы хотели бы использовать: NG Add @ NgUniversal/Express-Engine - EclientProject Некоторое удивительное-проект

Мы просто добавили все универсальные сервер настроек и узла в наше приложение в 1 строке кода?!

Время для продвижения 🏁 🔮

Как мы запустим SSR для нашего углового приложения?

Как правило, у нас будет работать NG служить Чтобы получить нашу обычную набонную клиентскую книгу (CSR) приложение …

Когда мы хотим создать и запустить нашу версию на стороне сервера, мы должны использовать несколько сценариев, которые были добавлены к нашему Package.json Отказ

Перед тем, как мы погрузимся в те важные сценарии, я хочу покрыть 2 различных важных тема в мире рендеринга на стороне сервера (независимо от JS Framework/etc) …

Динамический SSR & Статический предварительный рендеринг

Динамический SSR Является ли концепция о том, что произойдет сервер Live Node Servan Up Thisever, когда пострадает от маршрута, он будет Динамически генерировать и сериализовать приложение – Возвращая эту строку в браузер.

Статический предварительный рендеринг когда мы хотим Предварительно визуализация Список маршрутов и создание статических файлов, (т. Е. index.html, about-us.html и т. Д.), а затем используйте сервер нашего выбора на служить вверх эти файлы позже.

Так как мы узнаем, какой из них выбрать и когда?

Предварительный рендеринг, как правило, даст вам лучшую производительность, поскольку мы не ждем сервера, чтобы ударить все необходимые API в вашем приложении, и ничего не должно быть «сериалом», у него уже есть все сериализованные HTML вашего приложения, выводимого для каждого один из файлов маршрутов.

Вот хороший список вопросов, которые мы считаем клиентами, прежде чем рассмотреть, какой маршрут нам нужно взять.

Когда использовать статический предварительный рендеринг:

  • Сама ваше приложение довольно статично. (или, по крайней мере, маршруты, которые вы пытаетесь предварительно рендерировать) Например: домашняя страница | О нас |. свяжитесь с нами
  • Очень динамические части вашего сайта (и те, которые находятся за барьером входа в систему/auth), могут быть указаны на обычную версию визуализации клиентской стороне (CSR) вашего приложения, а угловой может нормально можно загрузить.
  • Ваше приложение не часто обновляется. Всякий раз, когда некоторые изменения необходимы на статических маршрутах, вы можете просто запустить сценарий сборки и переиздачить /dist Папка, содержащая все ваши предварительно отображаемые файлы.

Когда использовать динамический SSR:

  • Ваше приложение (и маршруты, которые вам нужны для SSR), очень динамичны 🃏
  • У вас есть список «Trending Products» | «Живые данные» | и т. д., что вам нужно заполнить правильно для каждый Серверная сторона визуализации.
  • Структура ваших приложений отображается на основе файлов JSON или CMS, где все может измениться в любой момент.

Как правило, большинство приложений будут нуждаться в статическом предварительном рендеринге (поскольку любые маршруты за стеной аутентификации не получают много/любые выгоды от использования SSR, поскольку один из основных целей – это прирост SEO и улучшена воспринимаемая производительность.

Помните, что вы всегда можете иметь определенные аспекты вашего приложения, а не во время SSR, а имейте эти динамические порции, заполненные во время CSR! Мы попадаем в это в предстоящих статьях в этой серии.

Как начать угловой универсальный

Возвращаясь к нашему Package.json Мы видим, что у нас есть несколько новых сценариев, которые были добавлены. Было добавлено много новых сценариев, но если вы посмотрите ниже – это даст вам обе методы SSR сразу!

Примечание, вы также можете сократить эти скрипты в сценарий, который запускается как и для вас еще проще.

// Dynamic SSR
npm run build:ssr && npm run serve:ssr

Это будет скомпилировать ваше приложение и Сверните узел экспресс-сервер Подать ваше универсальное приложение на http://localhost: 4000

// Static Pre-Renderingnpm run build:prerender && npm run serve:prerender

Этот скрипт компилирует ваше приложение и Предварительно обозначает файлы ваших приложений закручивая Demo HTTP-сервер, чтобы вы могли просматривать его на http://localhost: 8080

Примечание. Чтобы развернуть статический сайт на статический хостинг платформы, вам придется развернуть dist/браузер папка, а не обычный распад

Так как мы узнаем, что это сработало?

В зависимости от того, какая версия (динамическая/статика) вы загорелись, если вы получаете доступ к тому, что Localhost URL, вы теперь должны увидеть, что типичный пустой Теперь будет иметь контент внутри него! ✨ ✨.

Вы можете установить свой Мое приложение - Amazingggg Отказ Вы можете установить свой Теги. Содержание вашего приложения будет сериализовано.

Мир это твоя устрица. 😎.

Отключить JavaScript или источник просмотра, чтобы увидеть выпущенный контент внутри !

Клиентская сторона представленного источника VS Server-Side представлена источником.

Угловая магия SEO.

Я надеюсь, что это помогло Demystify угловой универсальный/угловой SSR для вас, если только немного. Есть много больше, мы будем говорить о предстоящих статьях, поэтому оставайтесь настроенными!

Настройка вручную угловой универсальный:

Если вы предпочитаете добавить все сами, посмотрите на CLI Wiki, которое описывает (пошаговые) Как добавить все отдельные части в проект CLI: https://github.com/angular/angular-cli/wiki/stories-Universal-rendering

Также вы можете заглянуть на Угловой универсальный стартовый репо , который является конечным результатом шагов, показанных в Wiki. Все новые файлы, которые необходимы, настроив основной сервер узла и т. Д.

ASP.NET CORE & Универсальная интеграция Universal?

Универсальный универсальный также был интегрирован с Core ASP.NET (где он сам вызывает процесс небольшого узла для обработки рендеринга на стороне сервера, поддерживать все данные обратно в ASP.NET и рендеринг его). ASP.NET CORE & Universal Repo Отказ

Мы сделаем глубокое погружение в то, как это все настройки в другой статье в этой серии!

Смотрите более универсальные дополнения и библиотеки здесь: https://github.com/angular/ Универсальный (Схема Angular-Cli Hapi и подробнее ASP.NET Integration Integration Tools Repone …)

Оставайтесь настроиться на часть 2 и 3 пригоднее!

Мы собираемся принять гораздо более глубокий взгляд:

  • Внутренняя угловая архитектура SSR и глубокое погружение
  • SSR “GOTCHAS”
  • Советы и хитрости
  • Узел по оптимизации производительности
  • ASP.NET Core Integration и учебник.
  • Гораздо более…

DevHelp.Online

Devhelp.online Является ли программная консалтинговая фирма, направленная на помощь командам и их приложениям до скорости, работая с некоторыми из ведущих отраслевых экспертов в JavaScript & Asp.net.

Свяжитесь с нами: hello@devhelp.online

Найди меня онлайн

@Markpieszak Для более JavaScript | Типрипись |. Угловой | Статьи узла. @Markpieszak на Github