React.Js: достижение времени отклика сервера 20 мс с помощью рендеринга и кэширования на стороне сервера

  1. Маленький фон
  2. Вступает в реакцию!
  3. Вопросы !
  4. Входит Redis!
  5. Сожмите Больше!
  6. Разрушение кэша
  7. Выводы

Мы все любим ReactJ за его производительность рендеринга, модульность и свободу выбора стека. Но есть одна вещь, которая выделяет его. Рендеринг на стороне сервера . До React большинство фреймворков javascript были сосредоточены на создании одностраничных приложений и проделали довольно большую работу. Но сейчас 2016 год, эра гибридных приложений! Приложения, которые могут работать за пределами браузера . React начал тенденцию, поддерживая рендеринг на стороне сервера, что позволяет нам создавать сквозные приложения javascript.

Маленький фон

Мы все любим ReactJ за его производительность рендеринга, модульность и свободу выбора стека

Я сейчас работаю над Practo's Healthfeed место, где врачи и специалисты в области здравоохранения пишут статьи о здоровье и делятся своим опытом. Если не что-то иное, любая блог-платформа должна быть хороша в ОДНОЙ вещи больше всего: в SEO . Любой блог с хорошим SEO предназначен, чтобы получить больше читателей, чем кто-либо еще. И больше читателей означает больше SEO!

Чтобы улучшить SEO, нужно сделать много вещей правильно. Но здесь мы поговорим только о двух наиболее важных принципах хорошего SEO:

  • Создание вашего сайта для ботов .
  • Сделай это БЫСТРО . Как Тысячелетний сокол быстро!

Вступает в реакцию!

Когда вышел React, одним из преимуществ его продажи было то, что он поддерживал рендеринг на стороне сервера (SSR). Чтобы ваше приложение поддерживало SSR, все, что вам нужно, это сервер узлов и API . Современная архитектура выглядит примерно так:

Современная архитектура выглядит примерно так:

Обратите внимание! Сервер узла действует как посредник между пользователем и сервером API. Итак, поток выглядит так:

  • Пользователь нажимает на URL, запрос отправляется на Node Server .
  • Node Server отправляет запрос на API-сервер и получает данные с API- сервера.
  • Отправляет данные в приложение , которое, в свою очередь, создает окончательный HTML-код для пользователя.
  • Возвращает строку HTML обратно пользователю.

Теперь вся настройка завершена! Сервер принимает запросы, API - ответ, и, наконец, пользователи / боты получают полностью отображаемую HTML-страницу. Но это может оказаться кошмаром для пользователя .

Вопросы !

  • Что делать, если сервер API работает медленно ? Как время отклика 500 мс.

Одна из проблем, связанных с рендерингом на стороне сервера, заключается в том, что его время отклика сильно зависит от времени отклика сервера API. Это означает, что независимо от того, насколько эффективным и быстрым было ваше приложение, пользователь увидит белый экран, по крайней мере, 500 мс, при условии, что ваш сервер узла имеет время отклика 0 мс. Что практически невозможно (пока).

Итак, давайте посмотрим на разбивку здесь:

  • Время отклика 500 мс от API
  • 150 мс для рендеринга на стороне сервера (да, это занимает столько времени)
  • 10 мс для узла сервера
  • 150 мс задержка в сети

Таким образом, пользователь получит ответ через почти 810 мс ! Сейчас, конечно, это просто средние цифры, но в реальном мире это может быть намного хуже. Так как у нас нет большого контроля над задержкой в ​​сети, мы не допустим этого. Таким образом, время отклика сервера в настоящее время составляет 660 мс .

Чтобы улучшить ситуацию, мы сначала поймаем самую большую рыбу: время отклика API.

Входит Redis!

Redis - одно из самых мощных хранилищ структур данных, которое очень быстрое и эффективное. Там вы можете хранить все что угодно в виде пар ключ-значение. Интеграция Redis для хранения среды узла очень проста. Если мы сохраняем результат API в redis , мы можем сохранить нашу сетевую поездку на сервер API.

Так что теперь, когда пользователь делает какой-либо запрос, сервер узла будет запрашивать Redis, если у него уже есть ответ. Если это так, он напрямую передает его в приложение для рендеринга и, наконец, возвращает строку HTML. Если у него нет ответа, мы продолжим и вызовем API, а затем сохраним этот результат в redis перед передачей его в приложение.

Новая разбивка будет:

  • 150 мс для рендеринга на стороне сервера
  • 5 мс для сервера Redis (ПРИМЕЧАНИЕ. Время рендеринга может быть меньше или очень велико, в зависимости от размера приложения.)
  • 10 мс для узла сервера

С помощью простого кэширования наших ответов API мы упали с 660 мс до 160 мс .

Сожмите Больше!

Хотя 160 мс - это хорошо, мы можем получить больше, просто используя небольшую хитрость.

Вместо того, чтобы хранить ответ API в redis, почему бы не сохранить саму всю строку HTML?

и это был результат!

и это был результат

Среднее время отклика упало до 20 мс !

Разрушение кэша

Если не обращаться должным образом, кэширование становится болью в заднице. Люди начинают постоянно сообщать о старых данных / ошибки становятся обычным явлением. Так что с большим кешем нам также нужна хорошая стратегия очистки кеша. Обычно у нас есть два случая, когда мы должны очистить кеш:

  • Когда автор обновляет статью. (Когда происходят обновления данных)

Когда автор обновляет что-то, он хочет видеть изменения, отраженные немедленно! Для этого мы создали небольшой кэш параметров = false. Всякий раз, когда URL-адрес попадает с этим URL-адресом, сервер узла выполняет и вызов API вместо выборки данных из кэша Redis. И, следовательно, кэш обновляется новыми данными.

Каждый раз, когда вы развертываете, генерируется новый чанк для файлов js и css. Это означает, что если вы сохраняете всю строку HTML в кэше, она станет недействительной при развертывании. Следовательно, всякий раз, когда вы развертываете, redis db должен быть полностью очищен.

Выводы

Узел быстрый. Так же как и Реакт! Но иногда нам нужно добавить нового игрока, чтобы достичь этой невозможной цели, не жертвуя при этом очками пользовательского опыта. Redis - это круто. Используйте все это с умом.

Похожие

JS Информатика
Каждому владельцу сайта, который управляет сайтом либо для хобби, либо для получения прибыли, либо чтобы стать популярным, понадобятся услуги SEO, поскольку это лучшее средство для достижения популярности, узнаваемости бренда, увеличения продаж и увеличения рентабельности инвестиций. SEO обеспечивает бизнес лидами без каких-либо периодических затрат. Чем больше людей узнают о ваших услугах или продуктах, тем больше ваш сайт приобретет популярность. Таким образом, любой веб-сайт, желающий
Как ускорить свой рост с помощью партнерского маркетинга
Как предприниматель или маркетолог, риск использования партнерского маркетинга для вас крайне низок, а вознаграждение велико. Вам нужно платить партнерам только тогда, когда клиент конвертирует их, а не когда они приводят людей на ваш сайт. Нил Патель и Дэн Макгоу обсуждают, как увеличить ваш доход с помощью партнерского маркетинга. Нил также стал соучредителем Crazy Egg и выступал на более чем 100 маркетинговых конференциях. У него огромный опыт работы с партнерским маркетингом, как
SEO & React ∴ Изоморфизм и индексирование
... всех на слуху, но даже ценой хорошей документации сложно понять влияние этой технологии на SEO. Небольшое освещение, чтобы освоить предмет? Что такое React? Какой смысл? Почему это хорошо? С появлением SPA Веб-приложения почти в реальном времени, такие как Gmail, Airbnb, Soundcloud или Netflix, JS-фреймворки и библиотеки, никогда не были так популярны.
Следите за тем, как оптимизируется ваш сайт с помощью SEO панели
Реклама Большинство экспертов SEO пришли к выводу, насколько смиренной может быть область поисковой оптимизации. Когда вы соберете ряд правил или техник, которые хорошо работают, Google поднимает и переворачивает мир с ног на голову. Хорошая вещь в оптимизации сайта заключается
Добиться лучшей позиции с помощью органических SEO услуг
Органическое SEO известно как процесс, с помощью которого вы получаете релевантность поисковой системы в результате обмена гиперссылками между различными сайтами, с явного согласия сторон. То, что ищется, не появляется сначала в поисках, но появляется в контексте определенных поисков. Это в сочетании с качественным написанием и органическим ростом вашей онлайн-собственности - вот что составляет Organic Seo.
Создание сайта агентства: что лучше, Adwords или SEO?
Агентство по созданию сайтов Ваш сайт готов и размещен в эфире, разработан с осторожностью и компетентностью агентством по созданию сайтов . Но каков следующий шаг? Хотя многие считают, что этого достаточно для развития веб-бизнеса, вам нужно подумать о стратегиях ускорения процессов и привлечения новых клиентов. Прямо сейчас вопрос: какие инструменты я
Обзор инструмента Content King SEO: отслеживание изменений на странице
У нас есть множество инструментов SEO. Для обратных ссылок, контента, технического аудита, сканирования, ключевых слов. Бесчисленные функции, которые сделают вашу жизнь лучше и поразят поисковиков. ContentKing Это новый в списке, и этот пост для тех, кто рассматривает возможность добавления его в свой арсенал инструментов. Content King - это SaaS, представляющий собой инструмент «SEO-аудита в реальном времени». Это позволяет сканировать
Часто задаваемые вопросы о поисковой оптимизации и планах отправки, предоставляемые Fast Name.
... ваемые вопросы по поисковой оптимизации Что такое поисковая система">
Стоит ли SEO для малого бизнеса?
Одна из причин, по которой большинство владельцев веб-сайтов предпочитают заниматься поисковой оптимизацией (SEO), а не платной рекламой, заключается в долгосрочных преимуществах, связанных с ней. Тем не менее, когда предприятиям необходимо сократить сумму, которую они тратят, маркетинг часто является первой областью, где наблюдаются сокращения. Это приводит ко многим сомнениям, стоит ли SEO время, усилия и деньги. В этой статье мы подробно рассмотрим органическое SEO и
Улучшите SEO с помощью анализа данных
Google Analytics собирает огромное количество данных о вашем сайте. Вооружившись необходимыми знаниями, вы можете значительно улучшить свою поисковую оптимизацию (SEO). Нет сомнений в том, что Google Analytics является мощным инструментом. Единственная проблема заключается в том, что он собирает больше информации о вашем сайте, чем
Оптимизируйте заголовок и метаданные в Yoast SEO
В этой части моего руководства по Yoast SEO мы будем работать над оптимизацией метаданных и заголовка. Кроме того, мы сосредоточимся на индексации нашего контента. Кроме того, я хотел бы обсудить, как мы можем избежать дублирования контента с помощью Yoast SEO и таким образом предотвратить наказание в поисковых системах. Как оптимизировать заголовки и метаданные с помощью Yoast SEO? Оптимизация заголовков наших сообщений, а также заголовков наших страниц является

Комментарии

Больше конкуренции, больше образованных поисковиков, меньше привлекательной рекламы?
Больше конкуренции, больше образованных поисковиков, меньше привлекательной рекламы? Вероятно, есть ряд факторов, которые могут объяснить ситуацию. Что это значит для SEO высшего образования? Они ищут больше, они меньше нажимают на рекламу. Поисковая оптимизация еще важнее, чем раньше. Настало время серьезно заняться поисковой оптимизацией. И хорошая новость в том, что вы можете сделать это самостоятельно
Как вы дифференцируетесь в цифровом пространстве, в котором конкурирует все больше и больше предприятий?
Как вы дифференцируетесь в цифровом пространстве, в котором конкурирует все больше и больше предприятий? В конечном счете, SEO является ключевым, поскольку он является ключевым маркетинговым планом для многих брендов и, тем более, для чистых цифровых брендов. В связи с этим возникает важный вопрос: стоит ли бизнесу привлекать эту услугу для экспертизы или просто нанять кого-то на работу, с плюсами и минусами, для кого-то, возможно, на самом деле лучше нанять команду SEO-специалистов на месте или
Или мы должны закончить путешествие к более широкому программному обеспечению для входящего маркетинга и сосредоточиться на поиске с помощью Moz Pro и Moz Local?
Или мы должны закончить путешествие к более широкому программному обеспечению для входящего маркетинга и сосредоточиться на поиске с помощью Moz Pro и Moz Local? Я пропустил последние части этих обсуждений (из-за выздоровления после операции по удалению грыжи), но, в конечном счете, основное предложение, внесенное на заседание совета 10 августа, заключалось в том, чтобы удвоить ставку на программное обеспечение SEO, как можно быстрее получить прибыль и свернуть Content + Вонг.
? Вы заинтересованы в том, чтобы увидеть больше тематических исследований A / B?
Но не знаете, какой хостинг вам больше подходит? Тогда этот блог полностью для вас. Выбор идеального веб-хостинга для вашего сайта может быть непростой задачей, так как на рынке так много игроков. Один неверный выбор, и вы можете в конечном итоге платить больше за функции, которые вам даже не нужны, или потерять некоторые важные функции, чтобы сэкономить деньги.
Больше ответственности, больше ценности - верно?
Больше ответственности, больше ценности - верно? Если ваш сайт недостаточно велик, чтобы гарантировать одного FTE, единственной ответственностью которого является SEO, вы, вероятно, планируете включить несколько других функций в описание их работы. Возможно управление PPC, веб-дизайн, отчетность, электронная почта, социальные сети. Не надо, если вы можете избежать этого. Талантливое время SEO лучше всего потратить на оптимизацию вашего сайта, если у вас есть они, управляющие
Как вы думаете, сколько времени пройдет, пока голосовой поиск не охватит социальные сети и другие платформы?
Как вы думаете, сколько времени пройдет, пока голосовой поиск не охватит социальные сети и другие платформы? В. Будет ли VEO работать для онлайн-бизнеса? А. Да. Теперь, чтобы быть справедливым, наша компания работает только с брендами, которые нуждаются в местной помощи SEO, поэтому я не могу вникнуть в детали того,
Времени?
Хотите еще больше контролировать эти вопросы в своих списках? Отвечайте на них напрямую, а не позволяйте сообществу отвечать (неправильно) за вас. Узнайте, как отвечать на вопросы Google Вот. Chatmeter - Когда дело доходит до VEO, очень важно быть в курсе ваших предложений и узнавать общие проблемы клиентов в форме
Таким образом, утверждение «рендеринг на стороне клиента вредит вашему рейтингу страницы» остается в силе?
Таким образом, утверждение «рендеринг на стороне клиента вредит вашему рейтингу страницы» остается в силе? Делать исследования Во-первых, отказ от ответственности: я ни в коем случае не эксперт SEO. Но я немного прочитал эту тему, и вот что я нашел. Вот объявление от Google
Сколько времени пройдет, прежде чем мы начнем видеть результаты нашей SEO-кампании?
Сколько времени пройдет, прежде чем мы начнем видеть результаты нашей SEO-кампании? Вы должны смотреть на SEO как на долгосрочную стратегию. Если вы ищете квалифицированных клиентов сейчас, рассмотрите Pay Per Click / Платная реклама как вариант. SEO действительно обеспечивает лучший возврат инвестиций (ROI) из всех услуг цифрового маркетинга. В среднем вы можете начать видеть улучшения в вашей поисковой
Вы согласны с тем, что органический поиск все еще стоит времени и усилий?
Вы согласны с тем, что органический поиск все еще стоит времени и усилий? Пожалуйста, поделитесь своим мнением в разделе комментариев ниже.
Вашему сайту действительно нужна карта погоды в реальном времени и 60 социальных сетей с прямой трансляцией?
Вашему сайту действительно нужна карта погоды в реальном времени и 60 социальных сетей с прямой трансляцией? Возможно, вы захотите переосмыслить свои раздутые рекламные кампании Google. 10. Ваш Sitemap Помните, что вы оптимизируете свои страницы для поиска роботами, а роботы едят файлы Sitemap на завтрак. Таким образом, ваша карта сайта должна быть доступна для чтения и сканирования. Если это не так, то вряд ли вас увидят на первой странице чего-либо. Файлы Sitemap

Вместо того, чтобы хранить ответ API в redis, почему бы не сохранить саму всю строку HTML?
Небольшое освещение, чтобы освоить предмет?
Что такое React?
Какой смысл?
Почему это хорошо?
Создание сайта агентства: что лучше, Adwords или SEO?
Но каков следующий шаг?
Как оптимизировать заголовки и метаданные с помощью Yoast SEO?
Больше конкуренции, больше образованных поисковиков, меньше привлекательной рекламы?
Что это значит для SEO высшего образования?
Stylish-Portal.infO 2011
При копирование материала активная ссылка на сайт!
Copyright 2004-2016 © www.zone55.ru. All rights reserved.