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
Single page application
VS
Загружается единожды, контент подгружается
по требованию
Страница каждый раз с нуля перезагружа...
Client side rendering
Проблема №1 - пустая страница
Оптимизировали-оптимизировали, да не
выоптимизировали
Решение ?
Проблема №2 - SEO
Ответ - Server side rendering
Server что-там...
По старинке - PhantomJS
+ Любой фреймворк
- Медленно
- Сложно
- Дорого
Angular Universal
@angular/platform-browser -> @angular/platform-server
Server-Side Rendering npm run build:ssr && npm run...
1. npm install --save @angular/platform-server ts-loader @nguniversal/express-engine
2. Добавить серверное приложение в .A...
! Нет browser API window, document, localStorage, есть Document
○ import { isPlatformBrowser } from '@angular/common';
○ Н...
! react-dom -> react-dom/server
! Синхронный renderToString()
! Быстрый, но опасный renderToStream()
! Синхронизация состо...
React SSR
React 16 не нужно
компилировать для
улучшения
производительности



if (process.env.NODE_ENV !== "production"){
...
NUXT - Universal Vue.js Applications
! Рендер nuxt build && nuxt start и пререндер nuxt generate
! Продвинутая генерация r...
Плюсы и минусы SSR
Плюсы:
1. Страница отображается
раньше
2. SEO и Social Sharing лучше
3. Работает в браузерах с
выключен...
Продолжение
https://youtu.be/nbTn1czE2L8
Upcoming SlideShare
Loading in …5
×

of

Server-side Rendering with JavaScript Frameworks | Odessa Frontend Meetup #6 Slide 1 Server-side Rendering with JavaScript Frameworks | Odessa Frontend Meetup #6 Slide 2 Server-side Rendering with JavaScript Frameworks | Odessa Frontend Meetup #6 Slide 3 Server-side Rendering with JavaScript Frameworks | Odessa Frontend Meetup #6 Slide 4 Server-side Rendering with JavaScript Frameworks | Odessa Frontend Meetup #6 Slide 5 Server-side Rendering with JavaScript Frameworks | Odessa Frontend Meetup #6 Slide 6 Server-side Rendering with JavaScript Frameworks | Odessa Frontend Meetup #6 Slide 7 Server-side Rendering with JavaScript Frameworks | Odessa Frontend Meetup #6 Slide 8 Server-side Rendering with JavaScript Frameworks | Odessa Frontend Meetup #6 Slide 9 Server-side Rendering with JavaScript Frameworks | Odessa Frontend Meetup #6 Slide 10 Server-side Rendering with JavaScript Frameworks | Odessa Frontend Meetup #6 Slide 11 Server-side Rendering with JavaScript Frameworks | Odessa Frontend Meetup #6 Slide 12 Server-side Rendering with JavaScript Frameworks | Odessa Frontend Meetup #6 Slide 13 Server-side Rendering with JavaScript Frameworks | Odessa Frontend Meetup #6 Slide 14 Server-side Rendering with JavaScript Frameworks | Odessa Frontend Meetup #6 Slide 15 Server-side Rendering with JavaScript Frameworks | Odessa Frontend Meetup #6 Slide 16 Server-side Rendering with JavaScript Frameworks | Odessa Frontend Meetup #6 Slide 17 Server-side Rendering with JavaScript Frameworks | Odessa Frontend Meetup #6 Slide 18
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

Server-side Rendering with JavaScript Frameworks | Odessa Frontend Meetup #6

Download to read offline

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

  • Be the first to like this

Server-side Rendering with JavaScript Frameworks | Odessa Frontend 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

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

Views

Total views

297

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

2

Shares

0

Comments

0

Likes

0

×