New Eleventy Supports ESM and NY Times Embraces React 18

This week, Eleventy, aka 11ty, released its version 3.0 beta, which it is touting as “ESM-friendly.”

“We did it. It’s happening. After 18 alpha pre-releases and over a year of work, our very first beta release of Eleventy 3.0 is now available,” the team wrote on its GitHub release notes.

ESM stands for ECMAScript Modules, and it’s a modern JavaScript module format natively supported in most web browsers. It’s a “major shift from CommonJS/AMD/UMD,” explained web developer Jacob Jackson.

“Eleventy is now written in ESM with full support for ESM in your projects (#836): configuration, data files, 11ty.js templates, etc.,” the team wrote. “For many projects this won’t be a breaking change and we’ll continue to support CommonJS too.”

A longer explanation about what ESM support means for 11ty can be found on the team’s December post about its plans to implement ESM.

Eleventy is a static site generator created by Zach Leatherman. It’s now operated independently, with full-time development and maintenance funded by its Open Collective supporters.

Screenshot via 11ty’s github.

Documentation is still in the works, but the Eleventy 3.0 beta is available now.

Busting JavaScript-on-Google Myths

Can Google render JavaScript content? Does the search engine treat JavaScript pages differently? Do JavaScript-heavy sites have slower page discovery? These a few of the SEO questions Vercel tackled Wednesday in an in-depth post that looks at how Google handles JavaScript throughout the indexing process.

Vercel partnered with MERJ, an SEO and data engineering consultancy, to conduct experiments on Google’s crawling behavior, analyzing more than 100,000 Googlebot fetches across various sites to test and validate Google’s SEO capabilities, Vercel wrote.

Most of the beliefs are out-of-date, the experiments show. Vercel explained the implications and then made eight recommendations from their conclusions, including:

• Embrace JavaScript freely, but “prioritize performance and adhere to Google’s best practices for lazy-loading.”
• Implement error boundaries in React applications to prevent total render failures due to individual component errors.
• Use and regularly update sitemaps..

The Gray Lady Goes React 18

Richard MacManus recently posed the question: are we living in a post-React world? I’m not convinced yet and part of the reason is articles like this from the New York Times’ Open Team, which described how the paper enhanced web performance with React 18.

I get it: The old Gray Lady is maybe not the first place you’d think to look for the latest, edgiest technology. But with 130 million unique monthly readers and 9.7 million digital-only subscribers, I think what The NY Times does with its web real estate is noteworthy.

It’s written by NY Times software engineer Ilya Gurevich, who notes that the Times places high value on page performance, SEO and technology — all of which it found in React 18. Specifically, they were excited about the following in React 18:

• Smoother rendering with concurrent mode, which he called a “paradigm shift that allows for simultaneous rendering of updates and user interactions.” It also means less screen junk and more responsive user experience, he added.
• Automatic batching and transitions. “To take full advantage of concurrency, React 18 automatically batches state updates within a single render cycle, optimizing performance,” Gurevich rote. “It does so by breaking up tasks in the main thread, which is a big shift from prior mechanics, where almost all tasks were synchronously executed. The introduction of new useTransition hooks also allows engineers to ensure that certain states will update without blocking the UI.”
• Server-side rendering.
• Streaming updates through React Server Components and selective hydration, which he noted opens doors for innovative UI partners and faster initial renders.

“… the release of React 18 stood out to us as a significant and tangible reap forward in the ever-expanding world of web development,” wrote Gurevich.

But this isn’t entirely a love story; there were “some unique peculiarities” in React and in the newspaper’s site that first had to be navigated, he added. Gurevich walks readers through the upgrade, starting with upgrading dependencies, and covering the problems they encountered, such as issues created by the differences between React 16 and 18.

INP on the revised The New York Times website, screenshot via The NYT Open Team blog.

The end results: Interaction to Next Paint scores in the p75 range dropped by roughly 30%, he wrote.

React 18 also improved re-renders.

“Before the upgrade, one of our biggest challenges had been the frequent re-renders our news site went through as it loaded pages. That caused a poor user experience (and sub-par INP scores) when the user tried to interact with the still-loading page,” Gurevich said. “After the React 18 upgrade, our re-renders were cut essentially in half!

Astro Stabilizes Two Features

On Thursday, Astro released version 4.13, which includes stabilized experimental features and logging improvements, as well as bug fixes.
The two stable features for this release are:

• Request rewriting, which allows developers to render another page without changing the URL of the browser in Astro pages and endpoints, the team wrote; and
• Content collections JSON schemas, which automatically generates JSON schemas for data content collections.

“When you define a data content collection in your Astro project, Astro will now automatically generate a JSON schema for the collection,” wrote “Erika” on behalf of the team. “This schema can then be used in your editor to provide autocompletion, validation and more for your data.”

This release also adds small improvements to the logging output during the build process.

“Pages that take a long time will now have their time logged in red, making it easier to spot bottlenecks in your build process,” she wrote.

Loraine Lawson is a veteran technology reporter who has covered technology issues from data integration to security for 25 years. Before joining The New Stack, she served as the editor of the banking technology site Bank Automation News. She has...

Read more from Loraine Lawson