【Overseas Event Introduction】The next generation of Jamstack is less JS! by Yang Zhang

The speaker for this session is Yang Zhang, who was involved in the development of "Plasmic". (Plasmic is a headless CMS with a powerful no-code visual builder for creating content quickly.)

 

The problem of JavaScript becoming bloated and data increasing as the Jamstack configuration expands.

 

Introducing approaches to solve this problem. What kind of frameworks and methods can be utilized?

 

Let's take a look right away!

Relationship between site performance and user actions

Please see the table below. This is the result of a study on how communication latency affects sales and number of registered users. It is clear that site performance has a significant impact on user behavior.

 

 

Therefore, Google places importance on "page experience". Page experience refers to what users can gain in addition to the information itself when they visit a page.

 

 

Among them, the three elements grouped as Core Web Vitals※ are all related to the user's experience when visiting the page.

 

※What are Core Web Vitals...

 

Largest Contentful Paint (LCP): A measure of loading performance.

First Input Delay (FID): A measure of interactivity.

Cumulative Layout Shift (CLS): A measure of visual stability.

 

We are excited to see how Jamstack can approach these metrics!

 

Let's take a look at the results here.

 

 

The result is surprisingly lackluster...

 

What could be the cause?

 

It is bloated JavaScript.

JavaScript Bloat

In Jamstack, we achieve high speed by sending static HTML pages to the client. To improve performance, we minimize the data sent to the client.

 

However, the reality is that a large amount of JavaScript is exchanged in order to achieve interaction, resulting in an increase in data volume.

 

What happens when JavaScript increases?

 

Core Web Vitals' First Input Delay score will deteriorate.

 

This is because JavaScript blocks threads.

 

When JavaScript is loaded, it re-evaluates existing images and text on the page.

 

This process, called hydration, affects performance.

 

Is there a solution?!

Solution

One possible solution to this problem is:

 

1. Use a framework for server-side rendering

Returning to frameworks such as PHP and HUGO can also be a viable option depending on the requirements.

 

2. Use a framework for rendering on the client side.

Next-generation frameworks such as Marko, Astro, Elder, and Qwik can be rendered on the client side only when needed.

 

Let's take a closer look at the next-generation framework.

 

① marko

This is a framework developed by eBay that has been around since around 2014.

 

Streaming Rendering and Partial Hydration can be considered as pioneers in introducing these concepts.

 

Partial Hydration = Partial Hydration does not require hydrating the entire page.

 

 

By dividing individual parts into "Islands", you can define which parts to hydrate. In the next version of Marko, it will be possible to more precisely narrow down the hydration scope to be targeted.

 

② astro

astro is a server-side template language. It retrieves data and renders it with JSX. Its biggest feature is the ability to load components created with React or Vue as is. When used alone, only HTML is rendered, but

 

 

By describing as above, you can specify the timing at which the component is loaded. It covers commonly used timings and is very user-friendly.

 

3. React Next Version

On the other hand, we cannot overlook the evolution of React. Even now, partial hydration can be achieved by handwriting, but further evolution can be expected in the future.

 

Check out the roadmap on the official website, which outlines the future implementation concepts for server and client components. Even for static pages, HTML will be partially generated by server components, while the client component will be displayed as is. If this is realized, it will be possible to flexibly arrange various functions!

Finally

Static websites become heavier on the server side as functional requirements become more complex, resulting in decreased performance.

 

This is why Jamstack has become a hot topic in trying to solve this, but now the same issue is arising even with Jamstack...

 

As a solution, the most promising method currently is Partial Hydration.

 

Efforts are being made to separate processing even a little like a craftsman's art, so that it does not affect loading.

 

Although all methods are still rough and have been pointed out for their shortcomings, it is worth paying attention to which of the frameworks mentioned this time will stand out in the future!

 

Thank you for reading until the end.

 

Human Science Co., Ltd. offers unique solutions for web content and platforms using the combination of "document creation know-how" and "the latest web development technology (Jamstack)" that other companies do not have.

If you are interested, please contact us here!

Human Science Co., Ltd.

https://www.science.co.jp/document/jamstack.html

 

Source of this document: https://www.youtube.com/watch?v=U28rjWrGVxk&t=607s