Уходит ли React от SPA?27.12.2024 10:15

В последнее время большинство громких новостей в экосистеме React связаны с Server Components, Server Actions и в целом с Server Side Rendering и Next.js.

И вот вопрос, который беспокоил меня лично — что будет с уже созданными за последние 10 лет Single Page Applications на React? Неужели пора о них забыть? Действительно ли команда разработчиков React теперь занимается развитием только лишь SSR, или всё же в мире SPA тоже происходят обновления и они тоже развиваются?

Я решил взглянуть на список изменений в React 19 через призму применимости этих изменений к SPA. Вот что я отметил:

Появился хук useOptimistic: год назад я писал об этом хуке пост в своём телеграм канале. Этот хук позволяет реализовать в React подход Optimistic UI, когда мы отправляем запрос на сервер и сразу обновляем UI, не дожидаясь ответа от сервера, оптимистично предполагая, что ответ будет успешным. Сам этот подход — довольно старый (как и SPA), и призван он решать те проблемы, которые были ещё тогда, во времена jQuery. Поэтому, считаю, что появление этого хука можно смело записать в копилку обновлений, применимых к SPA.
Добавлена поддержка meta-тегов: теперь в React-компоненте можно отрисовывать теги , которые автоматически будут всплывать в секцию вашего документа. Раньше это было в Next.js, а теперь и в обычном SPA-реакте это тоже есть.
Поддержка title: то же самое, что и предыдущий пункт: теперь документа меняется прямо из React-компонентов. Чем не SPA-шная фича? :)</p><p>Правда, если быть совсем точным, то <title> там не заменяется со старого на новый, а добавляется к уже существующему. Но мы об этом помолчим и поставим команде React четвёрку за старания))</p></li><li><p><strong>Загрузка через </strong><strong>preinit</strong><strong>, </strong><strong>preload</strong><strong>, </strong><strong>preconnect</strong><strong>, </strong><strong>prefetchDNS</strong>: целый набор методов для предварительной загрузки (и выполнения) браузером ваших ресурсов. Метод preload, например, позволит заранее подгрузить аудио, шрифты, скрипты, стили и т.д., а preinit позволяет сразу обработать/выполнить загруженный контент. Потенциально это может сильно облегчить жизнь всем, в том числе и SPA.</p></li></ul><p><strong>Кажется, что SPA пока будут жить</strong></p><p>Да, у Single Page Applications есть свои минусы: это и долгая загрузка ресурсов, и сложности с SEO, и нюансы с роутингом или историей браузера. Фреймворки вроде Next.js и были созданы отчасти для того, чтобы решить эти проблемы.</p><p>Но, судя по количеству применимых к SPA нововведений в React 19, о полноценном отказе от SPA говорить ещё очень рано. </p></div> <p class="copyrights"><span class="source">© <a target="_blank" rel="nofollow" href="https://habr.com/ru/articles/870240/?utm_source=habrahabr&utm_medium=rss&utm_campaign=870240">Habrahabr.ru</a></span></p> </div> <br>  <div style="padding-left: 20px;"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2514821055276660" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2514821055276660" data-ad-slot="1200562049" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>  <noindex> <div style="margin: 25px;" id="disqus_thread"></div> <script type="text/javascript"> var disqus_shortname = 'pcnewsru'; var disqus_identifier = '1572850'; var disqus_title = 'Уходит ли React от SPA?'; var disqus_url = 'http://pcnews.ru/blogs/uhodit_li_react_ot_spa-1572850.html'; (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script>   </noindex> </div> <br class="clearer"/> </div> <br class="clearer"/> <div id="footer-2nd"></div> <div id="footer"> <br/><br/> <ul class="horz-menu"> <li class="about"><a href="/info/about.html" title="О проекте">О проекте</a></li> <li class="additional-menu"><a href="/archive.html" title="Архив материалов">Архив</a> </li> <li class="additional-menu"><a href="/info/reklama.html" title="Реклама" class="menu-item"><strong>Реклама</strong></a> <a href="/info/partners.html" title="Партнёры" class="menu-item">Партнёры</a> <a href="/info/legal.html" title="Правовая информация" class="menu-item">Правовая информация</a> <a href="/info/contacts.html" title="Контакты" class="menu-item">Контакты</a> <a href="/feedback.html" title="Обратная связь" class="menu-item">Обратная связь</a></li> <li class="email"><a href="mailto:pcnews@pcnews.ru" title="Пишите нам на pcnews@pcnews.ru"><img src="/media/i/email.gif" alt="e-mail"/></a></li> <li style="visibility: hidden"> <noindex>  <script type="text/javascript"> var _tmr = window._tmr || (window._tmr = []); _tmr.push({id: "93125", type: "pageView", start: (new Date()).getTime()}); (function (d, w, id) { if (d.getElementById(id)) return; var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id; ts.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//top-fwz1.mail.ru/js/code.js"; var f = function () { var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ts, s); }; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "topmailru-code"); </script> <noscript> <div style="position:absolute;left:-10000px;"> <img src="//top-fwz1.mail.ru/counter?id=93125;js=na" style="border:0;" height="1" width="1" alt="Рейтинг@Mail.ru"/> </div> </noscript>  </noindex> </li> </ul> </div>    </div>  <div id="footer-adlinks"></div> <noindex> <script type="text/javascript"> document.write("<a rel='nofollow' href='//www.liveinternet.ru/click' "+ "target=_blank><img src='//counter.yadro.ru/hit?t45.6;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";"+Math.random()+ "' alt='' title='LiveInternet' "+ "border='0' width='1' height='1'><\/a>") </script>  <script type="text/javascript"> var _tmr = window._tmr || (window._tmr = []); _tmr.push({id: "93125", type: "pageView", start: (new Date()).getTime()}); (function (d, w, id) { if (d.getElementById(id)) return; var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id; ts.src = "https://top-fwz1.mail.ru/js/code.js"; var f = function () {var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ts, s);}; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "topmailru-code"); </script><noscript><div> <img src="https://top-fwz1.mail.ru/counter?id=93125;js=na" style="border:0;position:absolute;left:-9999px;" alt="Top.Mail.Ru" /> </div></noscript>   <script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function () { try { w.yaCounter23235610 = new Ya.Metrika({ id: 23235610, clickmap: true, trackLinks: true, accurateTrackBounce: true, webvisor: true, trackHash: true }); } catch (e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript> <div><img src="https://mc.yandex.ru/watch/23235610" style="position:absolute; left:-9999px;" alt=""/> </div> </noscript>   <script type="text/javascript"> var sc_project=9446204; var sc_invisible=1; var sc_security="14d6509a"; </script> <script type="text/javascript" src="https://www.statcounter.com/counter/counter.js" async></script>  <script> (function (i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-46280051-1', 'pcnews.ru'); ga('send', 'pageview'); </script> <script async="async" src="/assets/uptolike.js?pid=49295"></script> </noindex>   <script type="text/javascript" src="https://pcnews.ru/js/blockAdblock.js"></script> <script type="text/javascript" src="/assets/jquery.min.js"></script> <script type="text/javascript" src="/assets/a70a9c7f/jquery/jquery.json.js"></script> <script type="text/javascript" src="/assets/a70a9c7f/jquery/jquery.form.js"></script> <script type="text/javascript" src="/assets/a70a9c7f/jquery/jquery.easing.1.2.js"></script> <script type="text/javascript" src="/assets/a70a9c7f/jquery/effects.core.js"></script> <script type="text/javascript" src="/assets/a70a9c7f/js/browser-sniff.js"></script> <script type="text/javascript" src="/assets/a70a9c7f/js/scripts.js"></script> <script type="text/javascript" src="/assets/a70a9c7f/js/pcnews-utils.js"></script> <script type="text/javascript" src="/assets/a70a9c7f/js/pcnews-auth.js"></script> <script type="text/javascript" src="/assets/a70a9c7f/js/pcnews-fiximg.js"></script> <script type="text/javascript" src="/assets/a70a9c7f/js/pcnews-infobox.js"></script> </body> </html>