Предаване от страна на клиента спрямо сървър: защо не всичко е черно и бяло

От зората на времето, конвенционалният метод за извеждане на HTML на екран е чрез използване на сървър от страна на сървъра. Това беше единственият начин. Заредихте .html страниците си на вашия сървър, след това сървърът ви отиде и ги превърна в полезни документи в браузърите на вашите потребители.

Сървърното визуализиране работеше чудесно и по онова време, тъй като повечето уеб страници бяха предимно за показване на статични изображения и текст, с малко по пътя на интерактивността.

Бързо напред към днес и това вече не е така. Можете да твърдите, че уебсайтовете днес приличат повече на приложения, преструващи се на уебсайтове. Можете да ги използвате за изпращане на съобщения, актуализиране на онлайн информация, пазаруване и много други. Мрежата е просто много по-напреднала, отколкото преди.

Така че има смисъл, че рендерирането от страна на сървъра бавно започва да заема мястото на постоянно нарастващия метод за изобразяване на уеб страници от страна на клиента.

И така, кой метод е по-добрият вариант? Както при повечето неща в развитието, това наистина зависи от това, което планирате да правите със своя уебсайт. Трябва да разберете плюсовете и минусите, а след това да решите сами кой маршрут е най-подходящ за вас.

Как работи визуализацията от страна на сървъра

Рендерирането от страна на сървъра е най-често срещаният метод за показване на информация на екрана. Той работи, като конвертира HTML файлове в сървъра в използваема информация за браузъра.

Всеки път, когато посещавате уебсайт, вашият браузър отправя заявка до сървъра, който съдържа съдържанието на уебсайта. Заявката обикновено отнема само няколко милисекунди, но това в крайна сметка зависи от множество фактори:

  • Вашата скорост на интернет
  • местоположението на сървъра
  • колко потребители се опитват да получат достъп до сайта
  • и колко е оптимизиран уебсайтът, за да назовем няколко

След като заявката бъде обработена, браузърът ви връща изцяло рендирания HTML код и го показва на екрана. Ако след това решите да посетите друга страница на уебсайта, вашият браузър отново ще направи друго искане за новата информация. Това ще се случва всеки път, когато посещавате страница, на която браузърът ви няма кеширана версия.

Няма значение дали новата страница има само няколко елемента, които са различни от текущата страница, браузърът ще поиска цялата нова страница и ще рендерира всичко от самото начало.

Вземете например този HTML документ, който е поставен във въображаем сървър с HTTP адрес на example.testsite.com.



  <Глава>
    
     Примерен уебсайт 
  
  <Тяло>
    

Моят уебсайт

    

Това е пример за моя нов уебсайт

     Връзка   

Ако въвеждате адреса на примерния уебсайт в URL адреса на вашия въображаем браузър, вашият въображаем браузър ще направи заявка към сървъра, използван от този URL адрес, и очаква отговор на някакъв текст да се изобрази в браузъра. В този случай визуално ще видите заглавието, съдържанието на абзаца и връзката.

Сега, приемете, че сте искали да кликнете върху връзката от визуализираната страница, която съдържа следния код.



  <Глава>
    
     Примерен уебсайт 
  
  <Тяло>
    

Моят уебсайт

    

Това е пример за моя нов уебсайт

    

Това е още малко съдържание от other.html

  

Единствената разлика между предишната страница и тази е, че тази страница няма връзка и вместо това има друг абзац. Логиката ще диктува, че само новото съдържание трябва да се визуализира, а останалото да се остави на мира. Уви, това не е начина, по който работи визуализацията от страна на сървъра. Това, което всъщност ще се случи, е, че цялата нова страница ще бъде изобразена, а не само новото съдържание.

Макар че не може да изглежда голяма работа за тези два примера, повечето уебсайтове не са толкова прости. Съвременните уебсайтове имат стотици кодови редове и са много по-сложни. Сега си представете сърфирането в уеб страница и трябва да изчакате всяка страница да се изобразява при навигация в сайта. Ако някога сте посещавали сайт на WordPress, сте виждали колко бавни могат да бъдат. Това е една от причините.

От светла страна, визуализацията от страна на сървъра е чудесна за SEO. Съдържанието ви присъства, преди да го получите, така че търсачките могат да го индексират и обхождат добре. Нещо, което не е така при изобразяването от страна на клиента. Поне не просто.

Как работи визуализацията от страна на клиента

Когато разработчиците говорят за визуализация от страна на клиента, те говорят за изобразяване на съдържание в браузъра с помощта на JavaScript. Така че вместо да получавате цялото съдържание от самия HTML документ, получавате HTML документ с голи кости с JavaScript файл, който ще преведе останалата част от сайта с помощта на браузъра.

Това е сравнително нов подход за изобразяване на уебсайтове и всъщност не стана популярен, докато JavaScript библиотеките не започнаха да го включват в своя стил на разработка. Някои забележителни примери са Vue.js и React.js, за които съм писал повече тук.

Връщайки се към предишния уебсайт, example.testsite.com, приемете, че сега имате файл index.html със следните кодови редове.



<Глава>
  
   Примерен уебсайт 

<Тяло>
  
    <Приложение>         

Веднага виждате, че има някои големи промени в начина, по който работи index.hmtl, когато визуализирате с помощта на клиента.

За начало, вместо да съдържате съдържанието вътре в HTML файла, имате div контейнер с идентификатор на root. Имате и два елемента на скрипт точно над затварящия етикет на тялото. Един, който ще зареди JavaScript библиотеката на Vue.js, и един, който ще зареди файл, наречен app.js.

Това е коренно различно от използването на рендериране от страна на сървъра, защото сега сървърът е отговорен само за зареждането на голия минус на уебсайта. Основният котел. Всичко останало се обработва от клиентска JavaScript библиотека, в случая Vue.js и персонализиран JavaScript код.

Ако искате да направите заявка към URL адреса само с кода по-горе, ще получите празен екран. Няма какво да се зареди, тъй като действителното съдържание трябва да бъде изобразено с помощта на JavaScript.

За да поправите това, ще поставите следните редове код във файла app.js.

var data = {
        заглавие: „Моят уебсайт“,
        съобщение: „Това е пример за моя нов уебсайт“
      }
  Vue.component („приложение“, {
    шаблон:
    `
    
    

{{заглавието}}     

{{message}}

     Връзка          `,     данни: функция () {       данни за връщане;     }     методи: {       newContent: function () {         var node = document.createElement ('p');         var textNode = document.createTextNode ('Това е малко повече съдържание от other.html');         node.appendChild (textNode);         document.getElementById ( "moreContent) appendChild (възел).       }     }   })   ново Vue ({     el: '#root',   });

Сега, ако посетите URL адреса, ще видите същото съдържание като примера на сървъра. Ключовата разлика е, че ако щракнете върху връзката на страницата, за да заредите повече съдържание, браузърът няма да направи друга заявка към сървъра. Предавате елементи с браузъра, така че вместо това той ще използва JavaScript за зареждане на новото съдържание, а Vue.js ще се увери, че е изобразено само новото съдържание. Всичко останало ще бъде оставено на мира.

Това е много по-бързо, тъй като зареждате само много малка част от страницата, за да получите новото съдържание, вместо да зареждате цялата страница.

Има някои компромиси с използването на клиентски рендеринг. Тъй като съдържанието не се визуализира, докато страницата не се зареди в браузъра, SEO за уебсайта ще вземе хит. Има начини да заобиколите това, но това не е толкова лесно, колкото при рендерирането от страна на сървъра.

Друго, което трябва да се има предвид, е, че уебсайтът или приложението ви няма да могат да се зареждат, докато ВСЕКИ JavaScript не бъде изтеглен в браузъра. Което има смисъл, тъй като съдържа цялото съдържание, което ще е необходимо. Ако вашите потребители използват бавна интернет връзка, това може да удължи първоначалното им време за зареждане.

Плюсовете и минусите на всеки подход

Значи там го имате. Това са основните разлики между изобразяването от страна на сървъра и от страна на клиента. Само вие, разработчикът, можете да решите коя опция е най-подходяща за вашия уебсайт или приложение.

По-долу е кратко разбивка на плюсовете и минусите за всеки подход:

Професионалисти от страна на сървъра:

  1. Търсачките могат да обхождат сайта за по-добро SEO.
  2. Първоначалното зареждане на страницата е по-бързо.
  3. Страхотно за статични сайтове.

Минуси от страна на сървъра:

  1. Чести заявки на сървъра.
  2. Като цяло бавно изобразяване на страници.
  3. Пълни презареждания на страници.
  4. Не богати взаимодействия със сайта.

Професионалисти от страна на клиента:

  1. Богато взаимодействие със сайта
  2. Бързо изобразяване на уебсайтове след първоначалното зареждане.
  3. Чудесен за уеб приложения.
  4. Здрав избор на JavaScript библиотеки.

Минуси от страна на клиента:

  1. Ниско SEO, ако не се прилага правилно.
  2. Първоначалното зареждане може да изисква повече време.
  3. В повечето случаи изисква външна библиотека.

Ако искате да научите повече за Vue.js, разгледайте VueReactor.com. Можете също да посетите juanmvega.com, за да сте в крак с последните ми истории.