Що таке SPA

SPA (Single Page Application; односторінкова програма) – це метод розробки веб-програми, який завантажує лише одну веб-сторінку, а потім оновлює частини її HTML структури не перезавантажуючи браузер.

Створення SPA не обходиться без використання XMLHttpRequest та Fetch – це API-інтерфейси JavaScript. Саме вони відповідають за завантаження нових даних із сервера.

На сьогоднішній день існують безліч frontend фреймворків та бібліотек, які допомагають створювати односторінкові програми. Найпотужніші та найпопулярніші це Angular, React та Vue.

Різниця між SPA та веб сайтом

На перший погляд немає жодної різниці між простим сайтом та односторінковим додатком. В обох випадках ресурс відкривається в браузері, і користувач взаємодіє з ним приблизно однаково, мандрує ним використовуючи гіперпосилання. Але попри це між ними є принципова різниця.

Відмінності між веб-сайтом і SPA лежать в іншій площині. По-перше, якщо розглядати крайні випадки, вони розроблені за допомогою різних технологій. По-друге, вони працюють по-різному. Розглянемо докладніше.

Технології

Розробка веб-сайтів і SPA може відбуватися з використанням різних технологій.

SPA обов’язково зроблено на JavaScript. Можуть бути задіяні різні фреймворки та допоміжні технології, наприклад, Angular та TypeScript, але фінальний код все одно буде JavaScript, без варіантів.

Веб сайт, у свою чергу, може лежати на сервері у вигляді простих HTML файлів, пов’язаних гіперпосиланнями і не використовувати жодної мови програмування. Але це не дуже ефективно або зручно, тому швидше за все для генерації сторінок використовується якась бек-енд технологія, наприклад, PHP.

Звичайно, все вищесказане справедливо якщо розглядати граничні випадки, зазвичай в обох випадках використовується мікс із різних frontend та backend технологій.

Принцип работы

Принцип роботи SPA та веб-сайту – це головна відмінність між ними.

У випадку веб-сайту, коли користувач клікає за посиланням, браузер відправляє на сервер запит на отримання цієї сторінки. Коли відповідь отримана, браузер завантажує її замість поточної. Для SPA, браузер також відправляє на сервер запит, але вже іншого типу і не отримання нової сторінки, а на якісь дані. Коли дані отримані, браузер не перезавантажує сторінку повністю, а оновлює лише її частину, використовуючи отримані з сервера дані.