1. Вступ до фреймворку NUXT.JS

PDF цього документа доступний |TYT|.

Приклади з цього документа доступні за посиланням |TYT|.

Цей документ є частиною серії з чотирьох статей:

|Вступ до мови PHP7 на прикладах (2019)|;

|Вступ до мови ECMASCRIPT6 на прикладах (2019)|;
|Вступ до фреймворку VUE.JS на прикладі (2019)|;
|Вступ до фреймворку NUXT.JS на прикладах (2019)|. Це саме цей документ;

Усі ці документи призначені для початківців. Статті мають логічний зв’язок, але слабко пов’язані між собою:

документ [1] присвячений мові PHP 7. Читач, якого цікавить лише мова PHP, а не мова JavaScript, про яку йдеться в наступних статтях, може зупинитися на цьому;
документи [2-4] присвячені створенню клієнта JavaScript для сервера розрахунку податків, розробленого в документі [1];
фреймворки JavaScript [vue.js] та [nuxt.js], описані у статтях 3 та 4, вимагають знання JavaScript останніх версій ECMASCRIPT, а саме версії 6. Отже, документ [2] призначений для тих, хто не знайомий із цією версією JavaScript. Він посилається на сервер розрахунку податку, створений у документі [1]. Тому читачам документа [2] іноді доведеться звертатися до документа [1];
опанувавши ECMASCRIPT 6, можна перейти до фреймворку VUE.JS, який дозволяє створювати клієнтські програми на JavaScript, що виконуються в браузері в режимі SPA (Single Page Application). Це документ [3]. Він посилається як на сервер розрахунку податку, створений у документі [1], так і на код автономного клієнта на JavaScript, створений у [2]. Тому читачеві документа [3] іноді доведеться звертатися до документів [1] та [2];
опанувавши VUE.JS, можна перейти до фреймворку NUXT.JS, який дозволяє створювати клієнти JavaScript, що виконуються в браузері в режимі SSR (Server Side Rendered). Він посилається як на сервер розрахунку податку, описаний у документі [1], і на код автономного клієнта JavaScript, створеного в [2], а також на додаток [vue.js], розроблений у документі [3]. Тому читачеві документа [4] іноді доведеться звертатися до документів [1], [2] та [3];

Цей документ є продовженням роботи, виконаної в документі [3] з використанням фреймворку VUE.JS.

У цьому розділі розглядається така архітектура:

У [1] веб-браузер відображає веб-сторінки [5, 7], отримані з сервера [3], призначені для користувача. Ці сторінки містять JavaScript, що реалізує клієнтський модуль веб-сервісу даних [2], а також клієнтський модуль сервера фрагментів веб-сторінок [3];
У [2] веб-сервер є сервером даних. Він може бути написаний будь-якою мовою програмування. Він не генерує веб-сторінок у класичному розумінні (HTML, CSS, JavaScript), за винятком, можливо, першого разу. Але цю першу сторінку можна отримати з класичного веб-сервера [3] (а не з сервера даних). Потім JavaScript початкової сторінки генеруватиме різні веб-сторінки додатка, отримуючи дані [4] для відображення з веб-сервера, який виконує роль сервера даних [2]. Він також може отримувати фрагменти веб-сторінок [5] для оформлення цих даних із сервера веб-сторінок [3];
у [4] користувач ініціює дію;
у [6,7]: він отримує дані, оформлені фрагментом веб-сторінки;

Фреймворк [nuxt.js] |https://fr.nuxtjs.org/| дозволить нам реалізувати таку схему роботи:

перша сторінка додатка видається сервером [node.js] [3]. Крім того, інші сторінки додатка також знаходяться на цьому ж сервері. Вони надаються, коли користувач вручну вводить їх URL у браузері. Ці сторінки містять додаток [vue.js] (приблизно);
як тільки перша сторінка завантажується в браузері, додаток поводиться як звичайний додаток [vue.js]. У нашій схемі, наведеній вище, він потім взаємодіє з сервером даних [2];

У підсумку додаток працює як додаток [vue.js], за винятком першої сторінки та випадків, коли користувач вводить URL вручну. У цих випадках сторінка шукається на сервері [3]. Коли пошукова система запитує різні сторінки додатка, вона отримує їх із сервера [3]. Ці сторінки могли бути оптимізовані для SEO (пошукова оптимізація). У додатку [vue.js] пошукова система отримує сторінку з незначним значенням SEO. Наприклад, у клієнтському додатку сервера розрахунку податку за документом [3] сторінка, яку браузер отримав під час запуску додатка, виглядала так:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/client-vuejs-impot/favicon.ico">
    <title>vuejs</title>
  <link href="/client-vuejs-impot/app.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- згенеровані файли будуть автоматично вставлені -->
  <script type="text/javascript" src="/client-vuejs-impot/app.js"></script></body>
</html>

Це єдина сторінка, яку завантажує браузер. Усі інші сторінки додатка генеруються динамічно за допомогою JavaScript без участі браузера. Деякі пошукові системи задовольняються цією сторінкою. Інші йдуть далі, виконуючи JavaScript-код, що міститься на сторінці (рядок 9 вище). У результаті отримуємо іншу сторінку. Вона може містити асинхронну операцію для отримання даних, які сторінка буде відображати. У цьому випадку пошукові системи не чекають. У результаті ми отримуємо неповну сторінку. Можливо, ви пам’ятаєте, що саме так відбувається у випадку нашого клієнта [vue.js] із сервера розрахунку податків: асинхронно, під час завантаження першої сторінки, він ініціалізує сесію jSON із сервером розрахунку податків. У цьому конкретному випадку це не впливає на сторінку, яку отримує пошукова система. Для інших додатків це може мати негативні наслідки з точки зору SEO.

За допомогою [nuxt.js] можна надати пошуковій системі більш релевантну сторінку для кожної зі сторінок додатка.

Скрипти в цьому документі містять коментарі, а результати їх виконання відтворено в консолі. Іноді наводяться додаткові пояснення. Документ вимагає активного читання: щоб зрозуміти скрипт, потрібно одночасно читати його код, коментарі та результати виконання.

Serge Tahé, грудень 2019 року