如何使用 React Suspense 在 Next.js 13 中創建加載 UI
加載 UI 和視覺元素是 Web 和移動應用程序中的重要組件；它們在增強用戶體驗和參與度方面發揮著關鍵作用。如果沒有這樣的提示，用戶可能會感到困惑和不確定應用程序是否正常運行，是否觸發了正確的操作，或者他們的操作是否正在被處理。
人們發現，通過各種視覺提示向用戶指示正在進行的處理可以減輕他們可能經歷的任何不確定或沮喪的感覺，從而防止他們過早地離開應用程序。
加載 UI 對性能和用戶體驗的影響
雅各布·尼爾森 (Jakob Nielsen) 的用戶界面設計十個啟發式方法強調了使最終用戶能夠感知系統當前狀態的重要性。該原則建議用戶界面組件，包括加載界面和各種反饋元素，應及時提供有關操作進度的通知並遵守指定的時間範圍。
高效加載屏幕的實現對於增強應用程序的性能和用戶體驗至關重要。在性能方面，這些屏幕可以極大地提高 Web 應用程序的速度和響應能力。
最佳地利用用戶界面有利於異步內容加載，從而防止整個網頁在後台同時加載特定元素的過程中停滯不前。因此，這會帶來以流暢導航為特徵的增強瀏覽體驗。
此外，提供當前操作的明顯視覺表示可以鼓勵用戶在等待數據採集時表現出更大的容忍度。
Next.js 中的 React Suspense 入門 13
Suspense 是一個 React 組件，用於管理在後台運行的異步操作，例如數據獲取。簡而言之，該組件允許您渲染後備組件，直到預期的子組件安裝並加載所需的數據。
考慮一個場景，其中模塊從 Web 服務檢索信息，如下圖所示。在這種情況下，我們將考慮一個假設的框架，其中用戶界面元素從基於互聯網的應用程序編程接口（API）獲取數據。
export default function Todos() {
const data = fetchData() {
//fetch data...
return data;
};
return <h1> {data.title} </h1>
}
// the fallback component
export default function Loading() {
return <p>Loading data ...</p> }
React 中 Suspense 的實現允許異步數據獲取，同時通過顯示佔位符組件（例如“正在加載”元素）來保持無縫的用戶體驗，而不是在數據檢索過程中使頁面為空或凍結。通過利用提供的代碼片段（其中“Todos”組件返回任務數組），可以通過使用 Suspense API 有效管理加載狀態，確保應用程序即使在等待數據加載時也保持響應和交互。
import { Suspense } from 'react';
function App() {
return (
<>
<Suspense fallback={<Loading/>}>
<Todos/>
</Suspense>
</>
);}
Next.js 13 支持 React Suspense
Next.js 版本 13 引入了一種創新方法，通過其突破性的應用程序目錄功能集成 Suspense 功能來增強用戶體驗。此功能使開發人員能夠戰略性地管理和排列指定文件夾中特定於各個路由的頁面組件。通過利用這種技術，可以簡化項目組織，同時優化性能水平。
在指定的路由目錄中，可以合併一個“loading.js”文件，Next.js 隨後將使用該文件作為默認組件，用於在渲染子組件及其數據之前顯示加載用戶界面。
將 React Suspense 合併到 Next.js 版本 13 的框架中是創建 To-Do 應用程序的全面演示的有效方法。
該項目的源代碼可在開發人員的 GitHub 存儲庫中獲取。
創建 Next.js 13 項目
您將構建一個簡單的應用程序，從 DummyJSON API 端點獲取待辦事項列表。首先，運行以下命令來安裝 Next.js 13。
npx create-next-app@latest next-project --experimental-app
定義 Todos 路線
在“src/app”目錄下，創建一個新的子目錄，命名為“Todos”。隨後，在上述子目錄中，引入一個名為“page.js”的新文檔，並在其中包含隨後的代碼。
async function Todos() {
async function fetchTodos() {
let res = await fetch("https://dummyjson.com/todos");
const todosData = await res.json();
return todosData
}
const {todos} = await fetchTodos();
async function wait(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
await wait(3000);
return (
<>
<div className="todo-container">
<div className="todo-list">
{todos.slice(0, 10).map((todo) => (
<ul key={todo.id}>
<div className="todos">
<li> <h2>{todo.todo}</h2> </li>
</div>
</ul>
))}
</div>
</div>
</>
);
}
export default Todos;
異步函數（指定為“Todos”）利用非阻塞操作從 DummyJSON API 檢索任務或項目的可枚舉集合。隨後，它會迭代所獲取的一組任務，並將它們以可視化表示的格式呈現在 Web 瀏覽器的用戶界面上。
此外，該程序還採用了一種稱為“等待”功能的異步機制，用於模擬一段延遲時間。這種設計使用戶能夠在顯示檢索到的任務或 Todo 對象之前在預定的時間間隔內感知正在加載的用戶界面。
在實際場景中，實際事件（例如在軟件程序中執行任務、從數據庫檢索信息、利用響應時間較慢的外部服務以及延遲的 API 響應）都可能導致暫時的延遲，而不是通過模擬來模擬延遲。
在 Next.js 應用程序中集成 React Suspense
請通過合併提供的代碼片段來修改“app/layout.js”文件的內容。
import React, { Suspense } from 'react';
import Loading from '@/app/Todos/loading';
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body >
<Suspense fallback={<Loading/>}>
{children}
</Suspense>
</body>
</html>
)
}
Next.js 版本 13 中的 App/Layout.js 文件充當主要佈局元素，用於建立平台設計的總體佈局和功能。通過向 Suspense 組件提供“children”屬性，它使佈局能夠充當應用程序中包含的所有內容的封裝。
Suspense 組件在其子組件的異步渲染期間充當佔位符，將 Loading 組件呈現為視覺提示，以通知用戶當前正在後台獲取或處理內容。
更新家鄉路線文件
請打開“app/page.js”文件，從 Next.js 中刪除任何預先存在的默認代碼，然後插入以下代碼行:
import React from 'react';
import Link from "next/link";
function Home () {
return (
<main>
<div>
<h1>Next.js 13 React Suspense Loading Example</h1>
<Link href="/Todos">Get Todos</Link>
</div>
</main>
)
}
export default Home;
創建loading.js 文件
通過在 app/Todos 文件夾中建立一個 loading.js 文件進一步推進。在此文件中，合併提供的代碼片段。
export default function Loading() {
return <p>Loading data ...</p> }
將現代旋轉器添加到加載 UI 組件
您創建的加載 UI 組件非常基本；您可以選擇添加骨架屏幕。或者，您可以在 Next.js 應用程序中使用 Tailwind CSS 創建自定義加載組件並設置其樣式。然後，添加用戶友好的加載動畫，例如 React Spinners 等包提供的旋轉器。
要使用此包，請將其安裝到您的項目中。
npm install react-loader-spinner --save
接下來，更新 yourloading.js 文件，如下所示:
"use client"
import { RotatingLines} from 'react-loader-spinner'
function Loading() {
return (
<div>
<p>Loading the Todos ...</p>
<RotatingLines
strokeColor="grey"
strokeWidth="5"
animationDuration="0.75"
width="96"
visible={true}/>
</div>
);
}
export default Loading;
用於加載應用程序狀態的用戶界面將以加載消息的形式顯示視覺提示以及動畫旋轉效果，這表明檢索 Todo 數據的過程當前正在進行。
通過加載 UI 改善用戶體驗
在 Web 應用程序中集成加載接口可以通過提供可視化指示器來通知用戶正在進行的異步進程，從而顯著改善整體用戶體驗。這種方法不僅可以減少憂慮和模糊性，還可以提高用戶參與度。