Ізаморфныя React і SEO: Перавагі адной старонкі прыкладання на React JS

2. Новы Web і Увядзенне адзіночных прыкладанняў Page (SPA)
3. Адзінкавыя Прыкладанні Старонкі: за і супраць
4. Seach аптымізацыя асобных прыкладанняў старонак
5. Адна старонка прыкладанняў прадукцыйнасць
6. Гібрыдны падыход да развіцця курортаў, або ізаморфныя JavaScript
7. Перавагі ізаморфныя Рэагаваць JS для ООТА
8. выснову

Гэты артыкул сovers асноўных пытанняў: Чаму распрацоўка ізаморфныя прыкладанняў становіцца ўсё больш і больш папулярнай? Што такое перавага аднаго прыкладання на старонцы React JS у параўнанні з іншымі тыпамі SPA? Як ізаморфныя Рэагаваць дапаможа стварыць SEO-дружалюбныя АГР? І чаму многія распрацоўшчыкі і кампаніі аддаюць перавагу рэагаваць Js развіццё ?

Стары і Новы Web

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

Новы Web і Увядзенне адзіночных прыкладанняў Page (SPA)

Па меры развіцця тэхналогіі, усе аперацыі сервера пачалі вырабляцца на ляту, і старонкі сайта сталі абнавіць адразу ў вэб-браўзэры. Адзін прыкладанне старонкі (SPA), які складаецца з адной HTML старонкі абгорткі з дынамічна загружаным змесцівам стала папулярным. Gmail або сацыяльныя сеткі, дзе пераключэнне паміж укладкамі адбываецца амаль імгненна, без перазагрузкі старонкі, можа быць выдатным прыкладам аднаго прыкладання старонкі.

Як і любы іншы сайт, адно прыкладанне старонка складаецца з сервернай і кліенцкай баку. Бок кліента напісана на JavaScript, у той час як на бок сервера можа быць напісаная на PHP, Node.js, Python, Java або любым іншым падыходным мове сервера. Бок кліента змяшчае ўсю логіку прыкладання адной старонкі (прагляд, шаблоны, кантралёры, мадэль і г.д.). Такім чынам, калі карыстач загружае вэб-сайт, ён бачыць толькі кліенцкую частка прыкладання. Пры націску на іншую ўкладку або старонку вэб-сайта, на баку кліента звязваецца з серверам праз API, сервер выдае дадзеныя, і карыстальнік бачыць зноў вынесенае частка старонкі HTML.

Гэта стварае прамую выгаду як для карыстальніка, і да Рэагаваць JS распрацоўшчык , Карыстальнік можа хутка перамыкацца паміж укладкамі або старонкі без перазагрузкі старонкі і нават працаваць з дадаткам у аўтаномным рэжыме. Распрацоўшчыкі маюць магчымасць ствараць прыкладанні, выразна падзяліўшы задачы на ​​баку кліента і сервера боку, што прадухіляе іх ад дублявання занадта шмат прыкладанняў логікі паміж двума асяроддзямі, напісанымі на розных мовах.

Адзінкавыя Прыкладанні Старонкі: за і супраць

Довады развіцця SPA, як і з любым кліент-серверная прыкладанняў, тое, што ёсць падзел на кліента і бакі сервера, якія могуць быць распрацаваны, у выпадку неабходнасці, асобнымі камандамі. У выпадку, калі патрабуецца змяніць інтэрфейс прыкладання, няма неабходнасці ўносіць змены ў бізнес-логіцы, ці наадварот.
Яшчэ адна перавага асобных прыкладанняў старонак заключаецца ў іх высокай хуткасці загрузкі. У выніку мы атрымліваем прыгожыя, ўльтрасучасныя і супер хуткі вэб-дадатак, якое абнаўляе без перазагрузкі старонкі.
Але, з іншага боку, усе намаганні могуць быць ануляваныя з-за наступныя крытычныя недахопы:

• Seach аптымізацыя асобных прыкладанняў старонак

Першапачаткова АГР не пасуюць для патрэб SEO. Бо адзін загружае старонкі дадзеныя прыкладанняў дынамічна і стварае разметку, як правіла, пошукавыя робаты не могуць бачыць і індэксаваць такое ўтрыманне. У выніку, адно прыкладанне старонкі індэксуюцца як пустая старонка. Таму праграмісты павінны дадаткова ствараць асобныя старонкі (часцей за ўсё старонак HTML) для пошукавых робатаў, а разам з вэб-майстрам думаць над логікай, каб стварыць структуру сайта, каб мець такое ўтрыманне індэксуецца.

• Адна старонка прыкладанняў прадукцыйнасць

Што тычыцца зместу аднаго прыкладання старонкі ствараецца дынамічна, яно адлюстроўваецца толькі пасля таго, як прыкладанне будзе цалкам загружана і ініцыялізаваць. Таму карыстальнікі могуць бачыць пустую старонку або значок загрузкі на працягу некалькіх секунд (у адрозненне ад традыцыйнай HTML-старонак, на якіх браўзэр візуалізуе ўтрыманне як HTML нагрузкі). Асабліва падчас першага наведвання сайта, калі старонка рэсурсы не былі яшчэ ў кэшы.
Такім чынам, такі сайт губляе патэнцыйных кліентаў, таму што гэтыя секунды маюць вырашальнае значэнне для прыняцця рашэння: застацца ці пакінуць сайт. Напрыклад, Amazon падлічылі, што павелічэнне іх загрузкі старонак на 100 мілісекунд аўтаматычна зніжае іх прыбытак на 1%.

Часам адзін і тыя ж дзеянні, павінны быць зроблены як на кліенце, так і на баках сервера. Найпростым прыкладам з'яўляецца форма праверкі. Часта кліент і сервер боку напісаны на розных мовах, таму мы атрымліваем два варыянты аднаго і таго ж функцыі, якія павінны падтрымлівацца паралельна. Гэта тычыцца не толькі асобных прыкладанняў старонкі, але ўсё вэб-прыкладанняў у цэлым.

Як пярэдні край тэхналогіі дапамагаюць вырашыць гэтыя праблемы?

Гібрыдны падыход да развіцця курортаў, або ізаморфныя JavaScript

Для адаптацыі аднаго прыкладання старонкі для патрэб SEO і забяспечыць яго хуткую загрузку і індэксацыі пошукавымі сістэмамі, парадыгма развіцця ссоўваецца ў бок ізаморфныя JavaScript. Ізаморфныя код ўяўляе сабой код, які можа быць выкананы як на баку кліента і на боку сервера.

Што гэта азначае ў кантэксце прымянення асобных старонак?

Калі сайт адкрыты першы, усе аперацыі выконваюцца на серверы, а браўзэр атрымлівае HTML з усёй інфармацыяй (такі ж, як са звычайнымі вэб-сайтаў надвор'я са статычнымі старонкамі, пошукавыя сістэмы могуць індэкса). Пасля загрузкі JS палатно ператвараецца ў «адным дадатку старонкі» і працуе адпаведна.

Найбольш тыповыя ізаморфныя прыкладання добра вядомыя Facebook, Instagram, Flickr, Airbnb і г.д.

Розныя бібліятэкі выкарыстоўваюцца для распрацоўкі прыкладанняў ізаморфныя, напрыклад, Метэор, Дэрбі або Рэагаваць JS. Давайце мець больш глыбокае разуменне Рэагаваць JS.

Перавагі ізаморфныя Рэагаваць JS для ООТА

• Перавагі для SEO і маркетынгу

Ізаморфныя Рэагаваць JS дае два асноўных перавагі для вас і вашага адзінага карыстальніка старонка прыкладання:

1. гэта прасцей для пошукавых ботаў праглядаць і індэксаваць старонкі сайта
2. палепшаны карыстацкі досвед ад узаемадзеяння з вашым сайтам React

Ізаморфныя дадатак на React з'яўляецца адзіным дадаткам старонкі, якія могуць быць аказаны на сэрвэры. Сэнс рэндэрынгу сервера з'яўляецца тое, што вы можаце паказаць статычныя старонкі, як index.html, page1.html, page2.html файлаў і г.д. для кліентаў, якія падтрымліваюць або часткова падтрымліваюць JavaScript (напрыклад, для пошукавых робатаў). Акрамя таго, ізаморфныя Рэагаваць хуткасць загрузкі павялічваецца прыкладаннямі і дазваляе карыстальнікам праглядаць інфармацыю на старонцы хутчэй, як толькі зноў аказваюцца частка старонкі загружаюцца.

Пры загрузцы вэб-сайтаў хутка, фактары карыстацкі вопыт паляпшэння: простымі словамі, карыстальнікі больш лаяльныя і даўжэй заставацца на сайце. У цяперашні час паводніцкія фактары робяць адзін з самых важных фактараў ранжыравання Google. Яны з'яўляюцца больш важнымі, чым, напрыклад, шчыльнасць ключавых слоў.

Рэагаваць гэта бібліятэка, якая можа аказаць кампаненты сайта як на сэрвэры, так і на кліенцкіх баках. Рэагаваць выдатна падыходзіць для пабудовы ізаморфныя прыкладанняў, так як яна дазваляе паўторна выкарыстоўваць амаль увесь код кліента (У залежнасці ад маштабу applcation), каб зрабіць яго на боку сервера. Па гэтай прычыне многія распрацоўшчыкі выбіраюць React для сваіх праектаў.

Неизоморфное прыкладанне не дазваляе гэта зрабіць з-за сваю архітэктуру. Калі кліенцкая частка напісана на JavaScript, і бэкенд на PHP, мы не можам паўторна выкарыстоўваць на баку кліента код на боку сервера, і наадварот. У выпадку з JavaScript, код кліента часта залежыць ад браўзэра DOM, які не даступны на боку сервера. Рэагаваць дае нам анатацыю DOM браўзэра ў выглядзе віртуальнага DOM. Tha дае два асноўных перавагі:

1. Код, які працуе з віртуальным DOM ў React не залежыць ад браўзэра і можа быць выканана на сэрвэры.
2. React можа аптымізаваць працу з дакументамі і паменшыць колькасць злучэнняў з браўзэрам DOM і, як следства, значна паскорыць аперацыі фронтэнда.

выснову

Калі вы лічыце, React для будучых прыкладанняў? Вядома, вы павінны. Асабліва, калі вам неабходна распрацаваць якасны адно прыкладанне старонкі і ў самыя кароткія тэрміны і зрабіць гэта хутка, лёгкі, зручны і лёгка даступныя для індэксацыі пошукавымі сістэмамі. Ізаморфныя аднаго прыкладання на старонцы Рэагаваць з'яўляецца выдатным варыянтам для распрацоўшчыкаў, заказчыкаў і карыстальнікаў прыкладанняў таксама. Тым не менш, варта памятаць, што React ня не з'яўляецца панацэяй ад усіх праблем. Вы павінны ўлічваць спецыфіку кожнага праекта, каб пераканацца, што абраная мадэль з'яўляецца аптымальнай у вашым выпадку.

Наступныя дзве ўкладкі змяніць змест ніжэй.

XB Software спецыяліст па маркетынгу спецыяліст па лічбавым маркетынгу. Яна горача пра вэб-маркетынгу і імкнецца стварыць прывабны, вэб-дружалюбны кантэнт для ІТ-аўдыторыі па розных тэмах.