Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Server-side Rendering with JavaScript Frameworks | OdessaFrontend Meetup #6

136 views

Published on

Есть ситуации, когда все файлы и картинки минимизированы, Tree Shaking убирает неиспользуемый код и всё это на хостинге с HTTP/2 загружается недостаточно быстро. Ведь время — деньги, с каждой лишней секундой при открытии страницы уменьшается число клиентов. Андрей Михайлов рассказывает как уменьшить время ожидания путем отрисовки контента на сервере, сохраняя все преимущества работы с js фреймворками, а так же про подводные камни и тонкости, которые следует учитывать.

Published in: Travel
  • Be the first to comment

  • Be the first to like this

Server-side Rendering with JavaScript Frameworks | OdessaFrontend Meetup #6

  1. 1. Server-side Rendering with JavaScript Frameworks
  2. 2. Single page application VS Загружается единожды, контент подгружается по требованию Страница каждый раз с нуля перезагружается
  3. 3. Client side rendering
  4. 4. Проблема №1 - пустая страница
  5. 5. Оптимизировали-оптимизировали, да не выоптимизировали
  6. 6. Решение ?
  7. 7. Проблема №2 - SEO
  8. 8. Ответ - Server side rendering
  9. 9. Server что-там...
  10. 10. По старинке - PhantomJS + Любой фреймворк - Медленно - Сложно - Дорого
  11. 11. Angular Universal @angular/platform-browser -> @angular/platform-server Server-Side Rendering npm run build:ssr && npm run serve:ssr ! В рантайме ! Использует ngExpressEngine чтобы на лету отрисовывать приложение по запрошенной ссылке Prerender npm run build:prerender && npm run serve:prerender ! Во время сборки ! Отрисовывает приложение и сохраняет html файлы в /dist 

  12. 12. 1. npm install --save @angular/platform-server ts-loader @nguniversal/express-engine 2. Добавить серверное приложение в .Angular-cli.json, c отдельной точкой входа main-server.ts и отдельным конфигом ... Стартер https://github.com/angular/universal-starter Инструкция https://angular.io/guide/universal Установка Angular Universal
  13. 13. ! Нет browser API window, document, localStorage, есть Document ○ import { isPlatformBrowser } from '@angular/common'; ○ Не трогать element.nativeElement: ElementRef а Renderer2 ! Избегать setTimeout() ! Http запросы кешировать через TransferStateModule ! Для быстрого Lazy Loading на сервере ModuleMapLoaderModule ! Новый запрос - новое приложение Что учесть Angular Universal
  14. 14. ! react-dom -> react-dom/server ! Синхронный renderToString() ! Быстрый, но опасный renderToStream() ! Синхронизация состояния между клиентом и сервером с использованием Redux https://github.com/zeit/next.js/ React SSR
  15. 15. React SSR React 16 не нужно компилировать для улучшения производительности
 
 if (process.env.NODE_ENV !== "production"){
 // что-то проверить и предупредить
 }
  16. 16. NUXT - Universal Vue.js Applications ! Рендер nuxt build && nuxt start и пререндер nuxt generate ! Продвинутая генерация routes:() => Promise ! Поддержка renderToString() так и renderToStream() ! Встроенное кэширование на уровне компонентов
 serverCacheKey: props => props.item.id + '::' + props.item.last_updated ! С 2.5+ можно использовать PHP V8Js или Oracle Nashorn
 https://starter.nuxtjs.org/
  17. 17. Плюсы и минусы SSR Плюсы: 1. Страница отображается раньше 2. SEO и Social Sharing лучше 3. Работает в браузерах с выключенным JS Минусы: 1. Сложно 2. Дорого 3. Нагрузка на сервер больше
  18. 18. Продолжение https://youtu.be/nbTn1czE2L8

×