Next.js là một khung nguồn mở phổ biến để phát triển các ứng dụng React được kết xuất phía máy chủ. Nhờ tính dễ sử dụng và khả năng thích ứng, bạn có thể sử dụng nó để tạo các ứng dụng web phức tạp.
Các hàm cạnh là một trong những tính năng thú vị nhất của Next.js. Tìm hiểu về các chức năng của Edge và năm cách sử dụng chúng trong Next.js.
Chức năng cạnh là gì?
Tính năng chức năng Edge mạnh mẽ của Next.js cho phép bạn chạy các chức năng serverless tùy chỉnh gần hơn với người dùng cuối trên mạng biên. Điều này ngụ ý rằng mã chạy trên các máy chủ được tìm thấy gần hơn về mặt địa lý với máy khách, mang lại hiệu suất nhanh hơn và cao hơn trong các ứng dụng web.
Các hàm cạnh có thể thay đổi yêu cầu hoặc phản hồi, tìm nạp dữ liệu, xác thực, v.v.
Các chức năng cạnh chạy ngay lập tức. Vì chúng giảm thời gian tải dữ liệu và hiển thị trang nên bạn có thể sử dụng các chức năng của Edge để cải thiện hiệu suất web và trải nghiệm người dùng.
Các tiện ích hiện đại và thế hệ tiếp theo cần điện toán biên vì nó đáng tin cậy và an toàn hơn điện toán đám mây và tận dụng các chức năng Biên. Ngoài ra, nó có nhiều khả năng và linh hoạt hơn so với việc tính toán một mình trên thiết bị.
Dưới đây là một số cách bạn có thể sử dụng các hàm Edge trong Next.js.
1. Định tuyến động
Một cách bạn có thể sử dụng các hàm Edge trong Next.js là thông qua định tuyến động. Bạn có thể xác định và quản lý các tuyến tùy chỉnh dựa trên dữ liệu động, chẳng hạn như tham số truy vấn hoặc tiêu đề yêu cầu.
Điều này có giá trị để tạo ra các ứng dụng web linh hoạt và linh hoạt hơn để xử lý các yêu cầu khác nhau.
Bạn có thể sử dụng các hàm Edge của Next.js để triển khai định tuyến động theo cách sau:
export default function handler(req, res) {
const { slug } = req.query;
if (slug === 'about') {
res.status(200).send('This is the about page!');
} else if (slug === 'contact') {
res.status(200).send('This is the contact page!');
} else {
res.status(404).send('Page not found.');
}
}
Ví dụ này hiển thị nội dung của một tệp có tên [slug.js] bên trong trang/api thư mục để xác định tuyến đường tùy chỉnh với dữ liệu động. Sau đó, ranh giới sên được xóa khỏi truy vấn yêu cầu bằng cách sử dụng req.querycho phép bạn giải quyết các nhu cầu dựa trên giá trị của sên.
Chẳng hạn, nếu người dùng truy cập https://ift.tt/5DUZpmo, tham số sên sẽ được đặt thành Về. Các xử lý sẽ chạy khối mã thích hợp và hiển thị thông báo “Đây là trang giới thiệu!”
Nếu khách hàng truy cập https://ift.tt/12Pvt9J, xử lý sẽ trả về thông báo “Đây là trang liên hệ!”
Sử dụng các chức năng của Edge để định tuyến động, các nhà phát triển có thể tạo các ứng dụng web linh hoạt và linh hoạt hơn, có thể xử lý các yêu cầu khác nhau dựa trên việc thay đổi dữ liệu.
2. Tìm nạp dữ liệu
Trong Next.js, một trường hợp sử dụng phổ biến cho các hàm Edge là tìm nạp dữ liệu. Bạn có thể giảm tải cho máy chủ và tăng hiệu suất của ứng dụng web bằng cách đưa dữ liệu lên biên.
Các hàm Edge của Next.js có thể thực hiện tìm nạp dữ liệu, như minh họa trong ví dụ sau:
export default async function handler(req, res) {
const { id } = req.query;
const response = await fetch(`https://api.example.com/users/${id}`);
const user = await response.json();
res.status(200).json(user);
}
Ví dụ này xác định một điểm cuối API sử dụng nhận dạng tham số truy vấn để truy xuất dữ liệu người dùng từ API của bên thứ ba. Sử dụng tìm về phương pháp, bạn có thể gửi yêu cầu tới API và sau đó đợi phản hồi với từ khóa đang chờ.
Đoạn mã sau đó trích xuất thông tin JSON bằng cách gọi phản hồi.json() và lưu trữ nó trong một biến. Cuối cùng, nó sử dụng json phương thức phản hồi để định dạng dữ liệu phản hồi dưới dạng JSON.
Tìm nạp dữ liệu chức năng biên là một kỹ thuật mạnh mẽ cho phép bạn tìm nạp dữ liệu ở biên, giảm tải máy chủ và cải thiện hiệu suất ứng dụng web.
Tương tự như vậy, bạn có thể giảm nhu cầu nhàn rỗi và cung cấp cho khách hàng các trang nhanh hơn, phản hồi nhanh hơn bằng cách lấy thông tin từ giao diện lập trình bên ngoài ở rìa.
3. Được sử dụng trong Xác thực
Bằng cách triển khai các quy tắc kiểm soát truy cập ở biên, bạn có thể cải thiện tính bảo mật của ứng dụng web của mình và giảm nguy cơ truy cập trái phép vào dữ liệu nhạy cảm.
Ví dụ, hãy xem xét một chức năng kiểm tra trạng thái xác thực của máy khách và lặp lại nó trong phản hồi. Dưới đây là phác thảo xác minh liên quan đến các khả năng của Edge trong Next.js:
export default (req, res) => {
const { isAuthenticated } = req.cookies;
if (isAuthenticated) {
res.status(200).json({ message: 'You are authenticated' });
} else {
res.status(401).json({ message: 'You are not authenticated' });
}
}
Trong hình minh họa này, hàm Edge kiểm tra cookie để tìm mã thông báo xác thực và nếu tìm thấy, sẽ tạo phản hồi JSON với thông tin của người dùng.
4. Thử nghiệm A/B
Một cách khác mà bạn có thể sử dụng các hàm Edge của Next.js là tối ưu hóa hiệu suất của ứng dụng web bằng thử nghiệm A/B. Bạn có thể so sánh các phiên bản khác nhau của trang web hoặc ứng dụng bằng thử nghiệm A/B để xác định phiên bản nào hoạt động tốt hơn.
Minh họa về cách các hàm Edge của Next.js có thể được sử dụng để thực hiện thử nghiệm A/B như sau:
const variants = ['variantA', 'variantB'];
export default function handler(req, res) {
const { userId } = req.query;
const variantIndex = Math.floor(Math.random() * variants.length);
const variant = variants[variantIndex];
res.setHeader('Set-Cookie', `variant=${variant}; Max-Age=604800;`);
if (variant === 'variantA') {
res.status(200).send('Welcome to variant A!');
} else {
res.status(200).send('Welcome to variant B!');
}
}
Mã này minh họa một điểm cuối giao diện API chạy thử nghiệm A/B cho hai biến thể duy nhất của một trang web. Nó sử dụng Math.random() phương pháp để tạo một biến thể ngẫu nhiên cho người dùng và lưu trữ nó trong cookie với res.setHeader phương pháp. Điều này cho phép mã đảm bảo khách hàng thấy cùng một biến thể trong các lần truy cập trong tương lai.
Đoạn mã sau đó sử dụng khác nhau giá trị của cookie để hiển thị biến thể phù hợp. Nó hiển thị một thông báo cho biết nó đã chọn biến thể nào.
Khi sử dụng các chức năng của Edge, nhà phát triển có thể sử dụng một công cụ mạnh mẽ có tên là thử nghiệm A/B để so sánh các phiên bản khác nhau của một ứng dụng hoặc trang web để xem phiên bản nào hoạt động tốt hơn. Bạn có thể thu thập dữ liệu về hành vi của người dùng và cải thiện hiệu suất của ứng dụng web cũng như trải nghiệm người dùng bằng cách chỉ định ngẫu nhiên người dùng cho các biến thể khác nhau.
5. Phản hồi vào bộ đệm
Lưu trữ phản ứng là một cách khác mà bạn có thể sử dụng các khả năng của Edge trong Next.js để hợp lý hóa việc thực thi web. Nó cho phép chúng tôi giữ các phản ứng trong một khoảng thời gian cụ thể để giảm số lượng yêu cầu được gửi đến máy chủ và hoạt động dựa trên tốc độ của ứng dụng web.
Dưới đây là minh họa về cách bạn có thể thực hiện lưu trữ phản ứng với Edge Capabilities trong Next.js:
const data = { name: 'John Doe', age: 30 };
export default function handler(req, res) {
res.setHeader('Cache-Control', 's-maxage=10, stale-while-revalidate');
res.status(200).json(data);
}
Ví dụ này xác định một điểm cuối API trả về phản hồi JSON với một số dữ liệu.
Chúng tôi đặt các tiêu đề phản ứng bằng cách sử dụng res.setHeader kỹ thuật cho phép đặt trước trong 10 giây bằng cách sử dụng s-max-tuổi ranh giới. Điều này chỉ ra rằng CDN có thể lưu trữ phản hồi trong tối đa mười giây trước khi yêu cầu làm mới.
Chúng tôi cũng sử dụng cũ-trong-khi-xác nhận lại tham số để cho phép CDN phục vụ phản hồi được lưu trong bộ nhớ cache đã hết hạn trong khi phản hồi mới đang được thực hiện trong nền. Ngay cả khi phản hồi được lưu trong bộ nhớ cache đã hết hạn, CDN sẽ tạo một phản hồi mới và sẽ luôn gửi phản hồi.
Bộ nhớ đệm phản hồi chức năng cạnh là một cách tuyệt vời để tăng tốc ứng dụng web và giảm số lượng yêu cầu đến máy chủ. Bạn có thể đảm bảo cho người dùng các trang web phản hồi nhanh hơn và nhanh hơn bằng cách lưu các phản hồi vào bộ đệm trong một khoảng thời gian định trước.
Các chức năng cạnh là một tính năng cực kỳ mạnh mẽ của Next.js
Sự hỗ trợ của Next.js cho các chức năng Edge là một tính năng hấp dẫn cho phép bạn chạy các chức năng tùy chỉnh, không cần máy chủ gần hơn với người dùng cuối trên mạng biên.
Có một số cách mà bạn có thể sử dụng các chức năng của Edge để cải thiện các ứng dụng web: thử nghiệm A/B, lưu vào bộ nhớ đệm phản hồi, định tuyến động, tìm nạp dữ liệu, xác thực.
Việc sử dụng các khả năng của Edge trong kiến trúc của bạn có thể cải thiện trải nghiệm của khách hàng và dẫn đến các ứng dụng web phản hồi nhanh hơn, nhanh hơn.
