Cách thêm màn hình Skeleton trong Next.js
Nếu bạn đã sử dụng web hoặc ứng dụng dành cho thiết bị di động, bạn có thể đã nhìn thấy màn hình khung. Thiết bị giao diện người dùng này cung cấp trải nghiệm mượt mà hơn khi bản cập nhật phụ thuộc vào việc nhận dữ liệu, có thể mất một lúc để có bản cập nhật.
Tìm hiểu chính xác màn hình khung là gì, tại sao bạn có thể muốn sử dụng chúng trong ứng dụng của mình và cách triển khai chúng trong Next.js.
Mục Lục
Màn hình Skeleton là gì?
Màn hình khung là một phần tử giao diện người dùng cho biết rằng một thứ gì đó đang tải. Nó thường là trạng thái trống hoặc “trống rỗng” của một thành phần UI, không có bất kỳ dữ liệu nào. Ví dụ: nếu bạn tải một danh sách các mục từ cơ sở dữ liệu, thì màn hình khung có thể là một danh sách đơn giản không có dữ liệu, chỉ là các phần tử hộp giữ chỗ.
Nhiều trang web và ứng dụng sử dụng màn hình khung. Một số sử dụng chúng cho trạng thái tải, trong khi những người khác sử dụng chúng như một cách để cải thiện hiệu suất cảm nhận.
Tại sao sử dụng Skeleton Screen?
Có một vài lý do khiến bạn có thể muốn sử dụng màn hình khung trong ứng dụng Next.js của mình.
Đầu tiên, nó có thể cải thiện hiệu suất nhận thức của ứng dụng của bạn. Nếu người dùng nhìn thấy màn hình trống trong khi dữ liệu đang được tải, họ có thể cho rằng ứng dụng chạy chậm hoặc không hoạt động bình thường. Tuy nhiên, nếu họ nhìn thấy màn hình khung, họ biết rằng dữ liệu đang được tải và ứng dụng đang hoạt động như mong đợi.
Thứ hai, màn hình khung có thể giúp giảm “jank” hoặc rối loạn trong giao diện người dùng của bạn. Nếu dữ liệu đang được tải không đồng bộ, giao diện người dùng có thể cập nhật dần dần khi ứng dụng của bạn nhận dữ liệu. Điều này có thể mang lại trải nghiệm người dùng mượt mà hơn.
Thứ ba, màn hình khung có thể cung cấp trải nghiệm người dùng tốt hơn nếu dữ liệu đang được tải từ kết nối chậm hoặc không đáng tin cậy. Nếu dữ liệu đang được tìm nạp từ một máy chủ từ xa, có khả năng kết nối có thể bị chậm hoặc bị gián đoạn. Trong những trường hợp này, có thể hữu ích khi hiển thị màn hình khung để người dùng biết rằng dữ liệu đang được tải, ngay cả khi phải mất một lúc.
Cách triển khai màn hình bộ xương trong Next.js
Có một số cách để triển khai màn hình khung trong Next.js. Bạn có thể sử dụng các tính năng tích hợp để tạo lại màn hình khung đơn giản theo cách thủ công. Hoặc bạn có thể sử dụng một thư viện như phản ứng tải-khung hoặc Material UI để thực hiện công việc cho bạn.
Phương pháp 1: Sử dụng các tính năng tích hợp
Trong Next.js, bạn có thể sử dụng các móc React khác nhau và các điều kiện đơn giản để hiển thị màn hình khung. Bạn có thể dùng && hỗ trợ hiển thị màn hình khung có điều kiện.
import {useState, useEffect} from 'react';function MyComponent() {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
setTimeout(() => setIsLoading(false), 1000);
}, []);
return (
<div>
{isLoading && (
<div>
Loading...
</div>
)}
{!isLoading && (
<div>
My component content.
</div>
)}
</div>
);
}
export default MyComponent;
Đoạn mã trên sử dụng useState hook để theo dõi xem dữ liệu có đang tải hay không (đang tải). Nó sử dụng useEffect hook để mô phỏng quá trình tải dữ liệu không đồng bộ. Cuối cùng, nó sử dụng && để hiển thị có điều kiện màn hình khung hoặc nội dung thành phần.
Phương pháp này không lý tưởng vì nó yêu cầu thiết lập thủ công đang tải trạng thái và mô phỏng tải dữ liệu. Tuy nhiên, đó là một cách đơn giản để triển khai màn hình khung trong Next.js.
Phương pháp 2: Sử dụng Thư viện như ‘React-Loading-Skeleton’
Một cách khác để triển khai màn hình khung là sử dụng một thư viện như phản ứng tải-khung. react-loading-khung xương là một thành phần React mà bạn có thể sử dụng để tạo các màn hình khung. Nó có một
Để sử dụng react-loading-khung, bạn cần cài đặt nó bằng cách sử dụng npm.
npm i react-loading-skeletonSau khi cài đặt xong, bạn có thể nhập nó vào ứng dụng Next.js của mình và sử dụng nó như sau:
import React from 'react';
import Skeleton from 'react-loading-skeleton';
import 'react-loading-skeleton/dist/skeleton.css'const App = () => {
return (
<div>
<Skeleton />
<h3>Second Screen</h3>
<Skeleton height={40} />
</div>
);
};
export default App;
Đoạn mã trên nhập Bộ xương thành phần từ thư viện khung xương phản ứng. Sau đó, nó sử dụng nó để tạo ra hai màn hình khung xương. Nó sử dụng Chiều cao chống đỡ để thiết lập chiều cao của màn hình khung. Bây giờ bạn có thể sử dụng kết xuất có điều kiện để kết xuất thành phần chỉ khi có dữ liệu.
Phương pháp 3: Sử dụng giao diện người dùng Material
Nếu đang sử dụng giao diện người dùng Material trong ứng dụng Next.js, bạn có thể sử dụng
Để sử dụng thành phần
npm install @mui/materialSau khi cài đặt xong, bạn có thể nhập nó vào ứng dụng Next.js của mình và sử dụng nó như sau:
import React from 'react';
import Skeleton from '@mui/material/Skeleton';const App = () => {
return (
<div>
<Skeleton variant="rect" width={210} height={118} />
<h3>Second Screen</h3>
<Skeleton variant="text" />
</div>
);
};
export default App;
Đoạn mã trên nhập Bộ xương thành phần từ @ material-ui / lab thư viện. Sau đó, nó tạo ra hai màn hình khung xương. Các khác nhau prop đặt loại màn hình khung xương. Các bề rộng và Chiều cao đạo cụ xác định kích thước của màn hình khung.
Bạn cũng có thể thêm các hoạt ảnh khác nhau vào màn hình khung của mình. Giao diện người dùng Material UI có một số hoạt ảnh tích hợp sẵn mà bạn có thể sử dụng. Ví dụ, bạn có thể sử dụng hoạt hình hỗ trợ thêm hoạt ảnh mờ dần vào màn hình khung xương của bạn:
import React from 'react';
import Skeleton from '@mui/material/Skeleton';const App = () => {
return (
<div>
<Skeleton variant="rect" width={210} height={118} />
<h3>Second Screen</h3>
<Skeleton variant="text" animate="wave" />
</div>
);
};
export default App;
Bằng cách thêm hoạt hình chống đỡ một
Cải thiện trải nghiệm người dùng với màn hình Skeleton
Màn hình Skeleton có thể là một cách tuyệt vời để cải thiện trải nghiệm người dùng đối với ứng dụng Next.js của bạn. Chúng có thể tăng tốc độ cảm nhận, giảm rung và mang lại trải nghiệm tốt hơn khi dữ liệu truyền qua kết nối chậm hoặc không ổn định.
Dù bạn chọn phương pháp nào để thêm màn hình khung, chúng là một cách tuyệt vời để cải thiện trải nghiệm người dùng của ứng dụng Next.js của bạn.