Як працює SPA (Single Page Application) — усе, що потрібно знати

Hello

Сьогодні написання додатків типу Single Page Application (SPA) стало звичною справою, і сучасні фреймворки, як-от React, Vue чи Angular, легко вирішують цю задачу. Але чи кожен із нас глибоко розбирався, як саме працюють SPA і які нативні браузерні API використовуються для їх реалізації? Адже під капотом SPA часто використовуються такі інструменти, як History API, Fetch API, DOM API і BOM, які забезпечують плавну і динамічну роботу без перезавантаження сторінок, про це та більше у відео 👇

happy coding,

Yuriy

Усі статті, обговорення, новини про Front-end — в одному місці. Підписуйтеся на телеграм-канал!

👍ПодобаєтьсяСподобалось6
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Я це зробив на минулій роботі, в результаті у кожного нового дева на проекті вибухав мозк. Хоча здається оцей весь аякс для цього і педалили. Воно писало історію браузера, працювала кнопка назад, юзер міг повернутися до цієї сторінки по прямому посиланню, де завантаження відбувалося в «класичний» спосіб. Тобто я супортив як рендеринг на стороні клієнта джаваскриптом, так і віддавання всієї пейджі одним куском на стороні flask бекенду.

«перехід між сторінками потребує повного перезавантаження, а це означає, що щоразу завантажується новий HTML, CSS та JavaScript».

Not true. У більшості випадків HTML, CSS та JavaScript будуть завантажуватись з локального диску завдяки кешуванню.

Ви частково маєте рацію, але моя позиція лишається незмінною. Переходячи між сторінками, ви все одно перезавантажуєте контент, незалежно від того, кешований він на диску чи ні. До того ж, якщо таких запитів багато, це негативно впливає на користувацький досвід (user experience). Кожен додатковий запит, навіть при кешуванні, створює навантаження на систему, затримки та потенційно уповільнює взаємодію. У випадку великих додатків чи високої частоти переходів, це може відчутно погіршити загальне враження користувача та спричинити затримки при завантаженні контенту.

Актуально було коли був повільний інтернет і браузери.

ви все одно перезавантажуєте контент

Що ви маєте на увазі, рендеринг чи завантаження по мережі?

не тільки завантаження по мережі, а й того, що браузеру все одно потрібно «підтягувати» контент із кешу та рендерити його, створюючи невеликі затримки навіть на локальному рівні.
В додаток — Коли ви кажете, "

Актуально було коли був повільний інтернет і браузери

"
Коли розробляємо додатки, важливо виходити з мінімальних вимог до ресурсів, не розраховуючи, що в користувачів буде надшвидкий інтернет чи топовий процесор. Оптимізація має включати перевірку на слабкому інтернеті та обмежених системних ресурсах, щоб навіть при обмежених умовах програма працювала плавно.

Маю питання: а що там seo? Знаю шо раніше боти не могли читати сторінки де контент підгружається динамічно... чи змінилось шось?

Привіт, якщо коротко то не все так просто.. В силу того що контент генерується на стороні клієнта, то пошукові системи не завжди розпізнають інфу, солюшн може бути або використовувати SSR, або Prerendering (www.npmjs.com/...​rerenderer/webpack-plugin)
Ну або використовувати метатеги для динамічної заміни метаданих під час навігації.

Підписатись на коментарі