Hỏi về next js getStaticProps rehydration

Thực ra tất cả thắc mắc của bạn (mình không dám chắc là mình hiểu đúng câu hỏi của bạn) đều dựa trên bản chất của việc hydrate code đã đc render trước (SSG hoặc SSR). Sau khi browser nhận đc html đã đc generate từ trước, nó sẽ ngay lập tức render lên màn hình để user nhìn thấy. Tuy nhiên, browser tiếp tục phải làm thêm một công đoạn đó là hydrate, tức là lặp lại toàn bộ những thứ mà server đã thực hiện kèm theo đó là 1 vài task chỉ có thể làm ở client, vd: khởi tạo virtual dom, sau đó là bind event handler cho ui,... Chỉ trừ việc tạo ra real DOM. Từ đây ta có thể dễ dàng nhận ra, sẽ có một khoảng delay từ lúc user nhìn thấy content cho đến khi anh ta có thể thực sự tương tác với app của bạn. Vậy nên: 1. React sẽ ko tạo lại mà sẽ dùng html đã đc pre rendering. 2. And 2.1: Nó sẽ cảnh báo khi html đã đc render KHÔNG match với virtual DOM trên browser. Ví dụ: bạn render A trên server nhưng lại render B ở client (có thể là render conditionally dựa trên một điều kiện mà giá trị của điều kiện đó ko đồng nhất giữa server và client (vd: typeof window === 'undefined'). Một trường hợp phổ biến khác là bạn render div ở trong span, và điều này là không đc phép. 3. Real DOM sẽ được tái sử dụng chứ không tạo lại từ đầu để render page mới. Vì như vậy là rất lãng phí, không có lý do gì để tạo lại trong khi server đã làm việc đó.