Оптимізація продуктивності Frontend-застосунків в рамках розробки фінтех проекту на Next.js

Abstract

У роботі досліджено проблему низької продуктивності frontend-застосунків у фінансовому секторі. Проведено аналіз сучасних стратегій рендерингу (CSR, SSR, SSG, ISR), методів оптимізації розміру бандла та підходів до кешування, а також виявлено їхні переваги та недоліки в контексті реальної розробки з урахуванням технічного боргу та легасі-коду. Розроблено математичні моделі впливу розміру JavaScript-бандла на час до інтерактивності (TTI) та стратегій рендерингу на час завантаження (LCP, FCP). Проведено порівняльний аналіз фреймворків Next.js, Angular та Vue/Nuxt за критеріями продуктивності, SEO та зручності розробки. Обґрунтовано вибір Next.js як основи для фінтех-проектів завдяки вбудованій підтримці ISR та гібридних стратегій рендерингу. Реалізовано тестовий застосунок "FinDash" на базі Next.js (App Router, React 18) з послідовним впровадженням методів оптимізації: стратегій рендерингу, tree shaking, лінивого завантаження та кешування даних (React Query). Проведено вимірювання з використанням інструментів Lighthouse, WebPageTest та Bundle Analyzer зі статистичною обробкою результатів (10 вимірювань, довірчий інтервал 95%). Результати роботи можуть бути використані розробниками та технічними лідами для підвищення продуктивності комерційних frontend-застосунків в умовах обмежених ресурсів. Практична значущість полягає у розробленій пріоритетній матриці методів оптимізації та покроковому алгоритмі впровадження, що дозволяє скоротити LCP на 58%, зменшити розмір JavaScript-бандла на 45% та досягти ROI понад 8000% при мінімальних трудозатратах.