SWE Wiki
Đăng nhập Nâng cấp
SWE Wiki › Bài tóm tắt › Vercel

Layouts RFC

Bài tóm tắt Vercel 2022 4. Điều chỉnh Độ khó: Khó

Vercel · 2022 · 4. Điều chỉnh · Độ khó: Khó — bài gốc

Vercel vừa làm framework Next.js vừa bán nền tảng chạy nó; nhận định về sản phẩm của họ trong trang này đều là "theo Vercel". Bài là RFC (đề xuất lấy ý kiến); API và tên file trong đó về sau còn đổi.

Bối cảnh

  • Router pages/ của Next.js (từ 2016) ánh xạ file thành route: layout chỉ là component bọc tay, lấy dữ liệu chỉ ở cấp trang, mỗi lần chuyển trang tải lại JS và JSON props rồi render ở client.
  • Theo Vercel, đây là thay đổi lớn nhất của Next.js từ lúc ra đời, dựa trên React 18 và mở đường cho React Server Components. Ràng buộc là không breaking change, nên thêm thư mục app/ chạy song song với pages/.

Ý chính của đề xuất

  • Cây thư mục là cây layout: layout bọc một subtree và không render lại khi đi giữa các trang anh em, nên giữ được state.
  • Server Component là mặc định; client component phải đánh dấu riêng.
  • Lấy dữ liệu ở nhiều segment trong một route, các fetch bắt đầu song song để tránh waterfall; đi giữa segment anh em chỉ fetch và render từ segment đó trở xuống.
  • Routing hướng server: khi điều hướng, server render rồi trả cho React một chỉ thị cập nhật (không phải HTML hay JSON), nên không tải JS của component đã render ở server. Kết quả nằm trong cache phía client, tách theo segment để vô hiệu hoá ở mọi cấp.
  • Trạng thái tức thì: theo RFC, router mới sẽ dùng Suspense để hiện trạng thái loading ngay (qua một file loading.js tuỳ chọn); phần còn lại của API còn có thể đổi.

Vì sao

  • Theo Vercel, router cũ khó làm layout lồng nhau, mỗi navigation render lại cả trang, và dữ liệu gom ở cấp trang nên sinh waterfall. Đẩy render sang server cho phép gửi ít JS hơn; đổi lại điều hướng phải chờ server, nên đề xuất đi kèm trạng thái loading qua Suspense.

Bài học cho SWE

  • Muốn đổi mô hình mà không phá người dùng cũ: thêm cấu trúc mới chạy song song (app/ cạnh pages/) và để từng phần chuyển sang.
  • Đẩy render về server làm điều hướng phải chờ network; đề xuất này (một thiết kế, chưa phải kết quả đo) trả lời bằng phần "hiện ngay" và cache theo đơn vị nhỏ.

Liên quan

Kiến trúc frontendCache và invalidation
#Next.js#App Router#thư mục app#nested layouts#React Server Components#Suspense#server-centric routing#cache theo segment

Được nhắc tới trong

Chủ đề (2)
Công ty (1)
Bài tóm tắt (4)