DEV Community

Cover image for Episode 23/37: ISR in Angular, Cypress & Playwright
ng-news for This is Angular

Posted on

Episode 23/37: ISR in Angular, Cypress & Playwright

Enea Jahollari explained ISR for better SSR. Cypress and Playwright released new minor version with additional features.

ISR in Angular

The official Angular blog had Enea Jahollari as a guest writer, where he explained ISR, which stands for Incremental Static Regeneration.

In a way, it is a caching layer on top of Server-Side Rendering. So, every time a user enters our page, the content renders on the server, and the user should get the full-rendered static response quite quickly.

With ISR, the response is cached and re-used for the next user.

In terms of cache invalidation, we can define criteria like expiry data. There are also advanced features, like a complete invalidation on-demand, different caching providers or fine-grained caching depending on the route.

Incremental Static Regeneration for Angular | by Enea Jahollari | Sep, 2023 | Angular Blog

In Angular v16 we got a new hydration system. It was also hinted that experiments for partial hydration and resumability are in the works…

favicon blog.angular.io

ISR is part of rx-angular. That's a suite from Push-Based containing different tools to improve Angular's performance.

RxAngular | RxAngular

Performance & DX

favicon rx-angular.io

Infinite Scrolling - Case Study

Infinite scrolling is a feature which a UI library provides out of the box. Nevertheless, it is a good learning experience to look behind the curtains. Ezz Abuzaid did exactly that in his latest article. He explains his prototype, where he used a lot of RxJs and provided the virtual scrolling feature in a pipe and directive version.

Minor Releases

Other than that, we had new minor releases. This time, especially in the testing field.

Jest 29.7

Jest was released in 29.7. It is now possible to setup Jest via npm init.

https://github.com/jestjs/jest/releases

Cypress 13.2

Cypress doesn't provide parallelisation out of the box. However, we can split up and assign our E2E tests to multiple libraries with Nx. Nx can then run those tests in parallel.

In Cypress 13.2, the Component Test Runner got a modification so that Nx could also parallelise those tests.

https://github.com/cypress-io/cypress/releases

Playwright 1.38

Playwright, the other major E2E testing framework, got an update well. With version 1.38, the UI mode got further improvements. The network panel got a redesign, and it's possible to zoom in on the timeline.

https://github.com/microsoft/playwright/releases

Ionic 7.4

Next to that, Ionic, a framework for cross-platform applications, was released in 7.4. Among handy new features and bug fixes, no groundbreaking features.

https://github.com/ionic-team/ionic-framework/releases

Top comments (0)