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

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

Hello

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

happy coding,

Yuriy

Теми: Front-end, Single Page Application

Ctrl + Enter

Undisclosed User 26.10.2024 17:48

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

Відповісти

Підтримати

Володимир Обрізан Директор в Design and Test Lab 25.10.2024 13:45

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

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

anonymous 25.10.2024 15:22

Володимир Обрізан

Сергій Цимбалюк 27.10.2024 11:50

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

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

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

anonymous

anonymous 27.10.2024 13:25

Сергій Цимбалюк

Artem Pylypchuk 25.10.2024 12:39

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

макогоненко 25.10.2024 12:41

вирішується пререндерінгом SSR/SSG

Artem Pylypchuk

anonymous 25.10.2024 12:47

Володимир Обрізан Директор в Design and Test Lab 25.10.2024 16:41

Гугл вміє індексувати SPA, є особливості: developers.google.com/...ipt/javascript-seo-basics

Roman Kamliuk Full-Stack / Front-End / Back-End Developer 16.11.2024 04:00

Google й справді вміє індексувати SPA та CSR. Але якщо важливо не тільки SEO для Google, а й коректне сканування іншими сервісами, то краще робити SSR або SSG.

Наприклад, такі соціальні мережі та меседжери як Facebook, LinkedIn, Telegram та інші при скануванні посилань не запускають в них JavaScript. Оскільки сайти типу SPA та CSR будуються завдяки JavaScript на стороні клієнта, то це означає, що при залишенні посилань у повідомленнях ці сервіси не зможуть створити прев’ю сторінки на основі назви, опису, головного зображення тощо.

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

10 коментарів

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