MENU

Fun & Interesting

SSR (Server Side Rendering) angular. Angular universal. Основы настройки SSR

Максим Гром 5,978 5 years ago
Video Not Working? Fix It Now

SSR позволяет получать верстку сайта без включенного JS в браузере. Это позволяет поисковикам лучше индексировать Ваш сайт. 99% случаев, когда используется этот подход, это тогда, когда клиент желает сделать продающую страницу на базе существующего SPA с авторизацией. В этом видео я показал как сделать SSR на angular проекте. Исходники можно скачать тут https://github.com/MaksymGrom/angular-ssr-lesson Все это я настроил по официальной документации https://angular.io/guide/universal Где есть ссылка на рекомендуемую статью для изучения вариантов рендеринга (их больше чем 2 ;) ) https://developers.google.com/web/updates/2019/02/rendering-on-the-web Вступайте в телеграм канал :) В видео я показал как решить проблему с использованием localStorage для SSR. Так как Node JS Express не имеет WEB API, то это является ошибкой, которую сброщик не может победить. Для обхода проблемы использования localStorage я доказал, что использование Proxy - это важно. И показал как через DI подменить реализацию Proxy сервиса именно для backend части Более полная информация по DI в Angular может быть найдена в это плейлисте https://www.youtube.com/watch?v=2XzVwsV3HtQ&list=PL4rYLeYunVf0vy-ErM7uj9tuA-IWv5fjy Спасибо за просмотр, подписывайтесь на канал и пишите свои коментарии :) 00:00 Что такое SRR и где почитать 2:52 Angular без SSR, SEO проблемы 6:06 Добавляем express-engine 8:37 Жизненный цикл на фронте и бэкенде 11:18 localStorage при SSR. Proxy Service 20:36 Выборочно по роутам включаем SSR 25:40 Делайте верстку рабочей и бех JS

Comment