Optimize TTI và FID cho Nextjs một cách super đơn giản

Tại sao nên đọc bài này?

• Như tít: “Optimize TTI và FID cho Nextjs một cách super đơn giản”

• Islands Architectures cho Nextjs

Kết quả

Before

https://next-lazy-hydrate-origin.vercel.app/

Live check PageSpeed

After

https://next-lazy-hydrate-optimized.vercel.app/

Live check PageSpeed

Hydration là quá trình lãng phí tài nguyên

Server side rendering với Hydration lãng phí tài nguyên như thế nào?

Tìm hiểu về cách các app React, Vue, Svelte đang làm với Sever side rendering và nó lãng phí tài nguyên như thế nào

https://thanhle.blog/blog/server-side-rendering-voi-hydration-lang-phi-tai-nguyen-nhu-the-nao

1. Đống HTML của landing page được gửi xuống Browser (Là kết quả của quá trình SSR)

2. JavaScript được download xuống Browser, phân tích, rồi thực thi (Đa số tụi nó sẽ bao gồm text và khá giống như HTML ở bước 1)

3. Sau khi JavaScript được download, và chạy xong, nó sẽ gắn đống event cần handle vào cây DOM hiện tại. Bây giờ thì cái web của mình với có thể gọi là… load đầy đủ

Progressive Hydration

import withHydrationOnDemand from "react-hydration-on-demand";
import Card from "../Card";

// Hydrate when the component enters the viewport
const CardWithHydrationOnDemand = withHydrationOnDemand({ on: ["visible"] })(
    Card
);

export default class App extends React.Component {
    render() {
        return (
            <CardWithHydrationOnDemand
                title="my card"
                wrapperProps={{
                    className: "customClassName",
                    style: { display: "contents" },
                }}
            />
        );
    }
}

Lazy load component rồi hydrate khi cần thiết

JS cho các component vẫn phải được download và parsed, nó chỉ đơn giản là không hoặc chưa execute thôi. 💡 Có cách nào mà mình vẫn render được full HTML nhưng chỉ load JS và Hydrate Component đó khi cần thiết không?

• Render full trang ở quá trình SSR

• Load tối thiểu JS, chỉ để listen trên cây DOM xem có event nào không

• Nếu mà có event, thì load JS tương ứng rồi chạy nó thôi

• Ở thời điểm hiện tại, React chỉ support hydrate full một app chứ không phải riêng từng component (Nếu v18 được hoàn thiện thì sẽ giải quyết được cái này). Thực ra cái package react-hydration-on-demand nó có một số trick để bỏ qua quá trình Hydrate

• Với Nextjs, nếu component được define là dynamic mà nếu nó được render ở quá trình SSR, thì đống JS của nó cũng được gửi xuống Browser ngay khi page load luôn, chả có gì gọi là lazy ở đây cả

Why Progressive Hydration is Harder than You Think

Recently there has been a fury of discussion on Twitter on progressive hydration. Let's explore the kinds of problems a framework needs to solve in order to have the best possible progressive hydration story. Let's start at the beginning and define the terms. hy·dra·tion /hīˈdrāSH(ə)n/ noun (software) the process of attaching behavior to declarative content to make it interactive.

https://www.builder.io/blog/why-progressive-hydration-is-harder-than-you-think

• Bỏ qua quá trình Hydrate. Hầu hết là dựa theo thằng react-hydration-on-demand thôi 😃

• Loại bỏ JS khi load page và khiến mình có thể tùy chỉnh khi nào thì load JS tương ứng

Cách dùng

npm install next-lazy-hydrate
yarn add next-lazy-hydrate

import lazyHydrate from 'next-lazy-hydrate';

// Static component
const WhyUs = lazyHydrate(() => import('../components/whyus'));

// Lazy hydrate when users hover the component
const Footer = lazyHydrate(
  () => import('../components/footer', { on: ['hover'] })
);

const HomePage = () => {
  return (
    <div>
      <AboveTheFoldComponent />
      {/* ----The Fold---- */}
      <WhyUs />
      <Footer />
    </div>
  );
};