Bài viết này nhận được sự hỗ trợ nhiệt tình của những người bạn thân thiết của chúng tôi tại Netlify, một nhóm tài năng đáng kinh ngạc đến từ khắp nơi trên thế giới và cung cấp một nền tảng cho các nhà phát triển web giúp tăng năng suất. Cảm ơn các bạn!
Trước đây, hệ sinh thái web phát triển rất chậm. Các nhà phát triển sẽ phải mất nhiều năm mà không có tính năng ngôn ngữ mới hoặc giải quyết một lỗi kỳ lạ của trình duyệt. Điều này đã thúc đẩy các nhà lãnh đạo kỹ thuật của chúng tôi đưa ra các giải pháp sáng tạo để khắc phục những thiếu sót của nền tảng. Chúng tôi đã phát minh ra các bước đóng gói, polyfill và chuyển đổi để mọi thứ hoạt động ở mọi nơi với ít rắc rối hơn.
Chúng tôi dần tiến tới một số dạng đồng thuận về những gì chúng tôi cần như một hệ sinh thái. Hiện tại, chúng tôi có TypeScript và Vite là những tùy chọn rõ ràng—thúc đẩy ý nghĩa của việc xây dựng trải nghiệm nhất quán cho web. Các khuôn khổ ứng dụng đã xây dựng toàn bộ hệ sinh thái trên nền tảng của chúng: SolidStart, Nuxt, Remix và Analog là những ví dụ về các công cụ đáng kinh ngạc được xây dựng bằng các nguyên mẫu như vậy. Chúng ta có thể nói rằng Vite và TypeScript là các công cụ nguyên thủy hỗ trợ việc tạo ra các công cụ khác trong các hệ sinh thái đa dạng.
Với nhu cầu đóng gói và chuyển đổi được xác định phần nào, thì việc các tác giả khung chuyển hướng sự chú ý của họ sang lớp tiếp theo mà họ cần trừu tượng hóa: máy chủ là điều dễ hiểu.
Nitro đã được sử dụng bởi ba khuôn khổ chính: Nuxt, Analog và SolidStart. Trong khi Vinxi cũng được sử dụng bởi SolidStart. Điều này có nghĩa là bất kỳ nền tảng nào hỗ trợ một trong những nền tảng này chắc chắn sẽ có thể hỗ trợ những nền tảng khác mà không cần nỗ lực bổ sung nào.
Đúng như tên gọi, Netlify Platform Primitives là một nhóm các trừu tượng hóa và trợ giúp được cung cấp ở cấp độ nền tảng để các khuôn khổ hoặc nhà phát triển tận dụng khi sử dụng ứng dụng của họ. Điều này mang lại chức năng bổ sung đồng thời cho mọi khuôn khổ. Đây là một sự thay đổi lớn và mạnh mẽ vì cho đến nay, mỗi khuôn khổ sẽ phải tạo ra các giải pháp riêng và đưa các chiến lược đó trở lại các lớp tương thích trong mỗi nền tảng.
Hơn nữa, các nhà phát triển sẽ phải đợi một tính năng đầu tiên xuất hiện trên một khuôn khổ và sau đó chờ hỗ trợ đến nền tảng mà họ lựa chọn. Bây giờ, miễn là họ đang sử dụng Netlify, các nguyên mẫu đó có sẵn trực tiếp mà không cần bất kỳ nỗ lực và thời gian nào của tác giả khuôn khổ. Điều này trao quyền cho mọi hệ sinh thái trong một biện pháp duy nhất.
Lưu ý rằng thành phần trên thậm chí còn phức tạp hơn một chút so với những thành phần cơ bản vì chúng tôi đang áp dụng một số tối ưu hóa mặc định. Phương thức
Bằng cách thêm tiêu đề kiểm soát bộ nhớ đệm, bạn đã hoàn thành 80% công việc tối ưu hóa tài nguyên của mình để phục vụ người dùng tốt nhất. Một số chỉ thị kiểm soát bộ nhớ đệm thường dùng:
Bộ nhớ đệm là một loại lưu trữ khóa/giá trị. Vì vậy, sau khi phản hồi của chúng ta được thiết lập với kiểm soát bộ nhớ đệm phù hợp, các nền tảng có một số phương pháp để xác định
Tiêu đề phản hồi Vary bao gồm danh sách các tiêu đề sẽ ảnh hưởng đến tính hợp lệ của tài nguyên (
Tiêu đề phản hồi Vary là một phần cơ bản của tiêu đề đặc biệt trong Netlify Caching Primitive.
Bạn có thể ghi vào blob từ thời gian chạy hoặc đẩy dữ liệu cho kho lưu trữ cụ thể cho triển khai. Ví dụ, đây là cách Hàm hành động sẽ đăng ký số lượng lượt thích trong kho lưu trữ với SolidStart.
Hãy cho tôi biết trong phần bình luận về quan điểm của bạn về công cụ khách quan so với các thiết lập có ý kiến!
Trước đây, hệ sinh thái web phát triển rất chậm. Các nhà phát triển sẽ phải mất nhiều năm mà không có tính năng ngôn ngữ mới hoặc giải quyết một lỗi kỳ lạ của trình duyệt. Điều này đã thúc đẩy các nhà lãnh đạo kỹ thuật của chúng tôi đưa ra các giải pháp sáng tạo để khắc phục những thiếu sót của nền tảng. Chúng tôi đã phát minh ra các bước đóng gói, polyfill và chuyển đổi để mọi thứ hoạt động ở mọi nơi với ít rắc rối hơn.
Chúng tôi dần tiến tới một số dạng đồng thuận về những gì chúng tôi cần như một hệ sinh thái. Hiện tại, chúng tôi có TypeScript và Vite là những tùy chọn rõ ràng—thúc đẩy ý nghĩa của việc xây dựng trải nghiệm nhất quán cho web. Các khuôn khổ ứng dụng đã xây dựng toàn bộ hệ sinh thái trên nền tảng của chúng: SolidStart, Nuxt, Remix và Analog là những ví dụ về các công cụ đáng kinh ngạc được xây dựng bằng các nguyên mẫu như vậy. Chúng ta có thể nói rằng Vite và TypeScript là các công cụ nguyên thủy hỗ trợ việc tạo ra các công cụ khác trong các hệ sinh thái đa dạng.
Với nhu cầu đóng gói và chuyển đổi được xác định phần nào, thì việc các tác giả khung chuyển hướng sự chú ý của họ sang lớp tiếp theo mà họ cần trừu tượng hóa: máy chủ là điều dễ hiểu.
Các công cụ nguyên thủy của máy chủ
Những người làm việc tại UnJS đã liên tục xây dựng các công cụ độc lập có thể được tái sử dụng trong các hệ sinh thái khác nhau. Nhờ có họ, giờ đây chúng ta có các khuôn khổ và thư viện như H3 (một khuôn khổ máy chủ Node.js tối giản được xây dựng bằng TypeScript), cho phép Nitro (một thời gian chạy máy chủ toàn bộ được hỗ trợ bởi Vite và H3), đến lượt nó kích hoạt Vinxi (một trình đóng gói ứng dụng và thời gian chạy máy chủ trừu tượng hóa Nitro và Vite).Nitro đã được sử dụng bởi ba khuôn khổ chính: Nuxt, Analog và SolidStart. Trong khi Vinxi cũng được sử dụng bởi SolidStart. Điều này có nghĩa là bất kỳ nền tảng nào hỗ trợ một trong những nền tảng này chắc chắn sẽ có thể hỗ trợ những nền tảng khác mà không cần nỗ lực bổ sung nào.
Các khuôn khổ, nền tảng, nhà phát triển và người dùng đều được hưởng lợi từ nó. Chúng tôi đặt cược vào hệ sinh thái của mình cùng nhau thay vì làm việc riêng lẻ với các giải pháp độc lập của mình. Trao quyền cho người dùng-nhà phát triển của chúng tôi để có được các kỹ năng có thể chuyển giao và thực sự lựa chọn công cụ tốt nhất cho công việc với ít bị ràng buộc với nhà cung cấp hơn bao giờ hết.
Serverless Rejoins Conversation
Những sáng kiến như vậy có thể đã được các nền tảng không máy chủ như Netlify chú ý. Với Platform Primitives, các khuôn khổ có thể tận dụng các giải pháp độc lập cho các nhu cầu chung như Tái tạo tĩnh gia tăng (ISR), Tối ưu hóa hình ảnh và lưu trữ khóa/giá trị (kv).Đúng như tên gọi, Netlify Platform Primitives là một nhóm các trừu tượng hóa và trợ giúp được cung cấp ở cấp độ nền tảng để các khuôn khổ hoặc nhà phát triển tận dụng khi sử dụng ứng dụng của họ. Điều này mang lại chức năng bổ sung đồng thời cho mọi khuôn khổ. Đây là một sự thay đổi lớn và mạnh mẽ vì cho đến nay, mỗi khuôn khổ sẽ phải tạo ra các giải pháp riêng và đưa các chiến lược đó trở lại các lớp tương thích trong mỗi nền tảng.
Hơn nữa, các nhà phát triển sẽ phải đợi một tính năng đầu tiên xuất hiện trên một khuôn khổ và sau đó chờ hỗ trợ đến nền tảng mà họ lựa chọn. Bây giờ, miễn là họ đang sử dụng Netlify, các nguyên mẫu đó có sẵn trực tiếp mà không cần bất kỳ nỗ lực và thời gian nào của tác giả khuôn khổ. Điều này trao quyền cho mọi hệ sinh thái trong một biện pháp duy nhất.
Như đã đề cập trước đó, Netlify Platform Primitives là ba tính năng khác nhau:
- Image CDN
Một mạng phân phối nội dung cho hình ảnh. Nó có thể xử lý chuyển đổi định dạng và tối ưu hóa kích thước thông qua chuỗi truy vấn URL. - Bộ nhớ đệm
Các nguyên hàm cơ bản cho thời gian chạy máy chủ của họ giúp quản lý các chỉ thị bộ nhớ đệm cho thời gian chạy trình duyệt, máy chủ và CDN một cách trơn tru. - Blob
Tùy chọn lưu trữ khóa/giá trị (KV) tự động khả dụng cho dự án của bạn thông qua SDK của họ.
Image CDN
Mọi hình ảnh trong/public đều có thể được phục vụ thông qua hàm Netlify. Điều này có nghĩa là có thể truy cập thông qua đường dẫn /.netlify/images. Vì vậy, không cần thêm sharp hoặc bất kỳ gói tối ưu hóa hình ảnh nào vào ngăn xếp của bạn, triển khai lên Netlify cho phép chúng tôi phục vụ người dùng của mình bằng định dạng tốt hơn mà không cần chuyển đổi tài sản tại thời điểm xây dựng. Trong SolidStart, chỉ trong vài dòng mã, chúng ta có thể có một thành phần Hình ảnh chuyển đổi các định dạng khác thành .webp.
Mã:
import { type JSX } from "solid-js";const SITE_URL = "https://example.com";interface Props extends JSX.ImgHTMLAttributes { định dạng?: "webp" | "jpeg" | "png" | "avif" | "bảo toàn"; chất lượng?: số | "bảo toàn";}const getQuality = (chất lượng: Props["quality"]) => { nếu (chất lượng === "bảo toàn") trả về""; trả về `&q=${chất lượng || "75"}`;};hàm getFormat(định dạng: Props["format"]) { chuyển đổi (định dạng) { trường hợp "bảo toàn": trả về" "; trường hợp "jpeg": trả về `&fm=jpeg`; trường hợp "png": trả về `&fm=png`; trường hợp "avif": trả về `&fm=avif`; trường hợp "webp": mặc định: trả về `&fm=webp`; }}hàm xuất Image(props: Props) { return ( );}getFormat của chúng tôi chuyển đổi hình ảnh thành .webp theo mặc định. Đây là định dạng được hỗ trợ rộng rãi, nhỏ hơn đáng kể so với định dạng phổ biến nhất và không làm giảm chất lượng. Hàm get quality của chúng tôi giảm chất lượng hình ảnh xuống 75% theo mặc định; theo nguyên tắc chung, không có bất kỳ sự mất mát đáng kể nào về chất lượng đối với các hình ảnh lớn trong khi vẫn cung cấp khả năng tối ưu hóa kích thước đáng kể.Bộ nhớ đệm
Theo mặc định, bộ nhớ đệm Netlify khá rộng đối với các hiện vật thông thường của bạn - trừ khi có triển khai mới hoặc bộ nhớ đệm được xả thủ công, tài nguyên sẽ tồn tại trong 365 ngày. Tuy nhiên, vì các chức năng máy chủ/biên có bản chất động nên không có bộ nhớ đệm mặc định để ngăn chặn việc cung cấp nội dung cũ cho người dùng cuối. Điều này có nghĩa là nếu bạn có một trong những chức năng này trong quá trình sản xuất, rất có thể sẽ có một số bộ nhớ đệm được tận dụng để giảm thời gian xử lý (và chi phí).Bằng cách thêm tiêu đề kiểm soát bộ nhớ đệm, bạn đã hoàn thành 80% công việc tối ưu hóa tài nguyên của mình để phục vụ người dùng tốt nhất. Một số chỉ thị kiểm soát bộ nhớ đệm thường dùng:
Mã:
{ "cache-control": "public, max-age=0, stale-while-revalidate=86400"}-
public: Lưu trữ trong bộ nhớ đệm được chia sẻ. -
max-age=0: tài nguyên ngay lập tức trở nên cũ. -
stale-while-revalidate=86400: nếu bộ nhớ đệm trở nên cũ trong thời gian chưa đến 1 ngày, hãy trả về giá trị đã lưu trong bộ nhớ đệm và xác thực lại giá trị đó trong nền.
Mã:
{ "cache-control": "public, max-age=86400, must-revalidate"}-
public: Lưu trữ trong bộ nhớ đệm được chia sẻ. -
max-age=86400: tài nguyên là mới trong một ngày. -
phải-xác-nhận-lại: nếu yêu cầu đến khi tài nguyên đã cũ, bộ nhớ đệm phải được xác thực lại trước khi phản hồi được gửi đến người dùng.
Cache-Control, hãy kiểm tra mục mdn trên Cache-Control.Bộ nhớ đệm là một loại lưu trữ khóa/giá trị. Vì vậy, sau khi phản hồi của chúng ta được thiết lập với kiểm soát bộ nhớ đệm phù hợp, các nền tảng có một số phương pháp để xác định
khóa sẽ là gì đối với tài nguyên của chúng ta trong bộ nhớ đệm. Nền tảng web có một tiêu đề thứ hai rất mạnh mẽ có thể chỉ định cách bộ nhớ đệm của chúng ta hoạt động.Tiêu đề phản hồi Vary bao gồm danh sách các tiêu đề sẽ ảnh hưởng đến tính hợp lệ của tài nguyên (
phương thức và URL điểm cuối luôn được xem xét; không cần phải thêm chúng). Tiêu đề này cho phép các nền tảng xác định các tiêu đề khác được xác định theo vị trí, ngôn ngữ và các mẫu khác sẽ xác định thời gian phản hồi có thể được coi là mới.Tiêu đề phản hồi Vary là một phần cơ bản của tiêu đề đặc biệt trong Netlify Caching Primitive.
Netlify-Vary sẽ lấy một tập hợp các hướng dẫn về các phần của yêu cầu mà khóa sẽ dựa trên. Có thể điều chỉnh khóa phản hồi không chỉ theo tiêu đề mà còn theo giá trị của tiêu đề.- truy vấn: thay đổi theo giá trị của một số hoặc tất cả các tham số truy vấn yêu cầu.
- tiêu đề: thay đổi theo giá trị của một hoặc nhiều tiêu đề yêu cầu.
- ngôn ngữ: thay đổi theo ngôn ngữ từ tiêu đề
Accept-Language. - quốc gia: thay đổi theo quốc gia được suy ra từ tra cứu GeoIP trên yêu cầu Địa chỉ IP.
- cookie: thay đổi theo giá trị của một hoặc nhiều khóa cookie yêu cầu.
Lưu trữ blob
Đây là kho lưu trữ khóa/giá trị có tính khả dụng cao, lý tưởng cho các hoạt động đọc thường xuyên và ghi không thường xuyên. Chúng tự động có sẵn và được cung cấp cho bất kỳ Dự án Netlify nào.Bạn có thể ghi vào blob từ thời gian chạy hoặc đẩy dữ liệu cho kho lưu trữ cụ thể cho triển khai. Ví dụ, đây là cách Hàm hành động sẽ đăng ký số lượng lượt thích trong kho lưu trữ với SolidStart.
Mã:
import { getStore } from "@netlify/blobs";import { action } from "@solidjs/router";export const upVote = action(async (formData: FormData) => { "use server"; const postId = formData.get("id"); const postVotes = formData.get("votes"); if (typeof postId !== "string" || typeof postVotes !== "string") return; const store = getStore("posts"); const voteSum = Number(postVotes) + 1) await store.set(postId, String(voteSum); console.log("done"); return voteSum});- Kiểm tra
@netlify/blobstài liệu API để biết thêm ví dụ và trường hợp sử dụng.
Suy nghĩ cuối cùng
Với các nguyên mẫu chất lượng cao, chúng ta có thể cho phép những người tạo thư viện và khung tạo ra các lớp tích hợp mỏng và bộ điều hợp. Theo cách này, thay vì tập trung vào cách bất kỳ nền tảng cụ thể nào hoạt động, chúng ta có thể tập trung vào trải nghiệm người dùng thực tế và các trường hợp sử dụng thực tế cho các tính năng như vậy. Các khối đơn và công cụ tích hợp sâu có ý nghĩa trong việc xây dựng nền tảng nhanh chóng với sự ràng buộc chặt chẽ với nhà cung cấp, nhưng đó không phải là những gì cộng đồng cần. Đặt cược vào nền tảng web là một cách hợp lý hơn và thân thiện với tương lai.Hãy cho tôi biết trong phần bình luận về quan điểm của bạn về công cụ khách quan so với các thiết lập có ý kiến!
