Dev новости: Eleventy 3.0 вносит поддержку ESM, а The New York Times переходит на React 18

ESM и его значение для Eleventy

ESM, или ECMAScript Modules, представляет собой современный формат модулей JavaScript, который нативно поддерживается большинством веб-браузеров. «Это важный переход от CommonJS/AMD/UMD,» — объяснил веб-разработчик Джейкоб Джексон.

«Eleventy теперь написан на ESM с полной поддержкой ESM в ваших проектах: конфигурация, файлы данных, шаблоны 11ty.js и т.д.,» — добавила команда. «Для многих проектов это не будет являться критическим изменением, и мы продолжим поддерживать CommonJS.»

Детальное объяснение значимости поддержки ESM для Eleventy можно найти в посте команды от декабря.

Eleventy — это генератор статических сайтов, созданный Заком Лизерманом. Сейчас он работает независимо, а его полная разработка и поддержка финансируются за счет Open Collective.

Рендеринг JavaScript в Google

Может ли Google рендерить JavaScript-контент? Обрабатывает ли поисковая система страницы на JavaScript иначе? Имеют ли сайты с большим количеством JavaScript медленное обнаружение страниц? Эти и другие вопросы SEO были разобраны в статье Vercel, которая подробно описала, как Google обрабатывает JavaScript на этапе индексации.

Vercel сотрудничал с MERJ, консультантами по SEO и инженерии данных, для проведения экспериментов по поведению Google при обходе, анализируя более 100,000 запросов Googlebot на различных сайтах. Эксперименты показали, что многие убеждения устарели. На основе выводов, Vercel дала восемь рекомендаций, среди которых:

• Используйте JavaScript свободно, но «придавайте приоритет производительности и соблюдайте лучшие практики Google для ленивой загрузки.»
• Реализуйте границы ошибок в приложениях React для предотвращения полного отказа рендеринга из-за ошибок отдельных компонентов.
• Используйте и регулярно обновляйте карты сайтов.

The New York Times и React 18

Недавно Ричард МакМанус задал вопрос: живем ли мы в мире после React? Я все еще не уверен, особенно учитывая статьи, как эта от команды Open Team New York Times, которая описывает, как газета улучшила производительность веб-страниц с помощью React 18.

Инженер-программист NY Times Илья Гуревич объясняет, что газета придает большое значение производительности страниц, SEO и технологиям — все это они нашли в React 18. В частности, их заинтересовали следующие возможности React 18:

• Более плавный рендеринг с concurrent mode, который он назвал «сдвигом парадигмы, позволяющим одновременно обновлять рендеринг и взаимодействие с пользователем.»
• Автоматическая пакетная обработка и переходы. «React 18 автоматически обрабатывает обновления состояния в одном цикле рендеринга, оптимизируя производительность,» — написал Гуревич. «Это происходит за счет разбивки задач в основном потоке.»
• Рендеринг на стороне сервера.
• Потоковые обновления через компоненты сервера React и выборочная гидратация, что открывает возможности для инновационных UI-партнеров и более быстрой начальной загрузки.

«Релиз React 18 стал для нас значительным и ощутимым шагом вперед в постоянно развивающемся мире веб-разработки,» — добавил Гуревич.

Однако это не было полностью гладким процессом. «Были некоторые уникальные особенности,» — отметил он, описывая обновление зависимостей и проблемы, возникшие из-за различий между React 16 и 18. Но в итоге взаимодействие до следующего рендеринга (INP) улучшилось на 30%, а частота повторных рендеров сократилась вдвое.

Astro стабилизирует две экспериментальные функции

На этой неделе Astro выпустила версию 4.13, которая включает стабилизацию двух экспериментальных функций и улучшения логирования, а также исправления ошибок. Эти две стабильные функции включают:

• Перезапись запросов, позволяющая разработчикам рендерить другую страницу без изменения URL браузера на страницах и конечных точках Astro.
• JSON схемы для коллекций контента, которые автоматически генерируют схемы JSON для коллекций данных.

«Когда вы определяете коллекцию данных в вашем проекте Astro, Astro автоматически генерирует схему JSON для этой коллекции,» — написала от имени команды «Эрика.» «Эта схема может быть использована в вашем редакторе для автозаполнения, валидации и других целей.»

Это обновление также включает небольшие улучшения логирования в процессе сборки.

«Страницы, которые занимают много времени, теперь будут логироваться красным цветом, что облегчит обнаружение узких мест в вашем процессе сборки,» — написала она.