[Introduction to Overseas Events] The next generation of Jamstack is less JS! by Yang Zhang

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

 

As the Jamstack architecture expands, the problem of JavaScript bloating and increasing data arises.

 

We are introducing approaches to solve this problem. What frameworks and methods can be utilized?

 

Let's take a look right away!

The relationship between site performance and user actions

Please see the table below. This is the result of an investigation into how communication latency affects sales and the number of user registrations. It is clear at a glance that site performance has a significant impact on user behavior.

 

 

Therefore, Google places great importance on "page experience." In simple terms, page experience refers to "what users can gain from the page beyond just the information itself when they visit it."

 

 

Among them, the three elements categorized as Core Web Vitals are all related to the user's experience when visiting a 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.

 

 

The results are surprisingly unimpressive...

 

What could be the cause?

 

That is bulky JavaScript.

Growing JavaScript

Jamstack essentially achieves speed by sending static HTML pages to the client. To improve performance, it reduces the amount of data sent to the client.

 

However, in order to achieve interaction, a large amount of JavaScript is exchanged, which ultimately increases the amount of data.

 

What happens when JavaScript increases?

 

Core Web Vitals includes a poor score for First Input Delay.

 

This is because JavaScript blocks the thread.

 

When JavaScript is loaded, it reevaluates images, text, and other elements that already exist on the page.

 

This process called hydration affects performance.

 

Is there a solution?!

Solutions

One proposed solution to this problem is,

 

1. Use a server-side rendering framework

Frameworks like PHP and HUGO can also be a viable option depending on the requirements.

 

2. Use a framework that renders on the client side

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

 

Now, let's take a closer look at the next-generation framework.

 

① marko

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

 

Streaming Rendering and Partial Hydration can be said to be concepts introduced by pioneers.

 

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

 

 

By separating individual parts as "Islands," you can define which parts to hydrate. In the next version of marko, it is expected that you will be able to narrow down the target hydration range more precisely.

 

② astro

Astro is a server-side templating language. It fetches data and renders it with JSX. Its biggest feature is that it can directly load components created with React or Vue. When used alone, only HTML is rendered, but

 

 

By describing it as above, you can specify the timing at which the component is loaded. Commonly used timings are covered, making it very user-friendly.

 

3. Next Version of React

On the other hand, we cannot overlook the evolution of React. Even now, partial hydration can be achieved with manual coding, but further advancements are expected in the future.

 

Official Site Roadmap shows the future implementation concepts of server and client components. Even for static pages, HTML will be partially generated by server components while the client component part will be displayed as is. If realized, it will allow for flexible placement of various features!

Finally

Static websites become heavier on the server side and experience decreased performance as functional requirements become more complex.

 

This is why Jamstack has gained attention in trying to solve this issue, but now the same challenges are arising with Jamstack as well...

 

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

 

Efforts are ongoing to separate processing, even in small amounts, to ensure that loading is not affected.

 

Although none of the methods are polished yet and have their shortcomings pointed out, it will be interesting to see which of the frameworks mentioned this time will stand out in the future!

 

Thank you for reading until the end.

 

Human Science Co., Ltd. provides solutions for web content and platforms using a unique combination of "document production know-how" and "the latest web development technology (Jamstack)" that is not available from other companies.

If you are interested, please feel free to 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