Como criar UIs de carregamento no Next.js 13 usando o React Suspense
As interfaces de utilizador e os elementos visuais de carregamento são componentes importantes nas aplicações Web e móveis; desempenham um papel fundamental na melhoria da experiência e da participação do utilizador. Sem essas indicações, os utilizadores podem ficar confusos e inseguros sobre se a aplicação está a funcionar corretamente, se desencadearam as acções correctas ou se as suas acções estão a ser processadas.
Verificou-se que a indicação do processamento em curso aos utilizadores através de várias pistas visuais alivia qualquer sentimento de incerteza ou frustração que possam sentir, evitando assim que abandonem prematuramente a aplicação.
Impacto do carregamento das IU no desempenho e na experiência do utilizador
As dez heurísticas de Jakob Nielsen para a conceção da interface do utilizador sublinham a importância de permitir que os utilizadores finais percebam o estado atual de um sistema. Este princípio sugere que os componentes da interface do utilizador, incluindo as interfaces de carregamento e vários elementos de feedback, devem fornecer notificações atempadas sobre o progresso das operações e respeitar o prazo designado.
A implementação de ecrãs de carregamento eficientes é crucial para melhorar o desempenho e a experiência do utilizador de uma aplicação. Em termos de desempenho, estes ecrãs podem melhorar significativamente a velocidade e a capacidade de resposta de uma aplicação Web.
O aproveitamento ótimo das interfaces de utilizador facilita o carregamento assíncrono de conteúdos, o que impede que toda a página Web fique estagnada durante o processo de carregamento simultâneo de elementos específicos em segundo plano. Consequentemente, isto resulta numa melhor experiência de navegação caracterizada por uma navegação suave.
Além disso, o fornecimento de uma representação visual visível das operações em curso pode incentivar os utilizadores a demonstrar maior tolerância enquanto aguardam a aquisição de dados.
Introdução ao React Suspense no Next.js 13
Suspense é um componente React que gerencia operações assíncronas executadas em segundo plano, como a busca de dados. Simplificando, este componente permite-lhe renderizar um componente de recurso até que o componente filho pretendido seja montado e carregue os dados necessários.
Considere um cenário em que um módulo recupera informações de um serviço da Web, conforme demonstrado na ilustração a seguir. Neste caso, vamos contemplar uma estrutura hipotética em que um elemento da interface do utilizador obtém dados de uma interface de programação de aplicações (API) baseada na Internet.
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> }
A implementação do suspense no React permite a obtenção assíncrona de dados, mantendo uma experiência de utilizador perfeita ao exibir um componente de espaço reservado, como o elemento “Loading”, em vez de deixar a página vazia ou congelada durante o processo de obtenção de dados. Utilizando o fragmento de código fornecido, que apresenta o componente “Todos” que devolve um conjunto de tarefas, o estado de carregamento é gerido eficazmente através da utilização da API Suspense, assegurando que a aplicação se mantém reactiva e interactiva mesmo quando aguarda o carregamento de dados.
import { Suspense } from 'react';
function App() {
return (
<>
<Suspense fallback={<Loading />}>
<Todos />
</Suspense>
</>
);}
Next.js 13 Suporta React Suspense
A versão 13 do Next.js introduziu uma abordagem inovadora para melhorar a experiência do utilizador, integrando a funcionalidade Suspense através da sua inovadora funcionalidade App Directory. Esta funcionalidade permite aos programadores gerir e organizar estrategicamente componentes de página específicos para rotas individuais numa pasta designada. Ao utilizar esta técnica, torna-se possível simplificar a organização do projeto e, simultaneamente, otimizar os níveis de desempenho.
No diretório de rotas especificado, é possível incorporar um ficheiro “loading.js” que o Next.js utilizará subsequentemente como componente predefinido para apresentar a interface de carregamento do utilizador antes de apresentar o componente filho juntamente com os respectivos dados.
A incorporação do React Suspense na estrutura do Next.js versão 13 é uma abordagem eficaz para criar uma demonstração abrangente de um aplicativo To-Do.
O código-fonte deste projeto está disponível no repositório GitHub do programador.
Criar um projeto Next.js 13
Você criará um aplicativo simples que obtém uma lista de tarefas a partir do ponto de extremidade DummyJSON API . Para começar, execute o comando abaixo para instalar o Next.js 13.
npx create-next-app@latest next-project --experimental-app
Definir uma rota Todos
Dentro do diretório “src/app”, estabeleça um novo subdiretório que será denominado “Todos”. Posteriormente, dentro da referida subdiretoria, introduza um novo documento intitulado “page.js”, incorporando nele o código que se segue.
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;
A função assíncrona, designada por “Todos”, recupera uma coleção enumerável de tarefas ou itens da API DummyJSON utilizando operações não bloqueantes. Posteriormente, itera sobre este conjunto adquirido de tarefas e apresenta-as num formato visualmente representado na interface de utilizador do navegador Web.
Além disso, o programa incorpora um mecanismo assíncrono conhecido como função “wait”, que serve para simular um período de latência.Este design permite que os utilizadores se apercebam de uma interface de utilizador em carregamento durante um intervalo pré-determinado antes de exibir as tarefas recuperadas ou os objectos Todo.
Em cenários práticos, em vez de imitar a latência por meio de simulação, eventos reais, como a execução de tarefas em programas de software, a recuperação de informações de bancos de dados, a utilização de serviços externos com tempos de resposta mais lentos e respostas de API atrasadas podem contribuir para atrasos temporários.
Integrar o React Suspense no aplicativo Next.js
Modifique o conteúdo do arquivo app/layout.js incorporando o trecho de código fornecido.
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>
)
}
O ficheiro App/Layout.js da versão 13 do Next.js funciona como um elemento de layout principal que estabelece a disposição geral e as funcionalidades do design da plataforma. Ao fornecer a propriedade children ao componente Suspense, permite que o layout sirva como um invólucro para todos os conteúdos contidos na aplicação.
O componente Suspense serve de espaço reservado durante a renderização assíncrona dos seus componentes filhos, apresentando o componenteLoading como uma indicação visual para informar os utilizadores de que o conteúdo está a ser obtido ou processado em segundo plano.
Atualizar o ficheiro Home Route
Abra o ficheiro “app/page.js”, remova qualquer código predefinido pré-existente de Next.js e insira as seguintes linhas de código:
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;
Criar o ficheiro loading.js
Avance mais estabelecendo um ficheiro loading.js dentro da pasta app/Todos . Neste ficheiro, incorpore o fragmento de código fornecido.
export default function Loading() {
return <p>Loading data ...</p> }
Adicionando spinners modernos ao componente da interface do usuário de carregamento
O componente da interface do usuário de carregamento que você criou é muito básico; você pode optar por adicionar telas de esqueleto. Como alternativa, você pode criar e estilizar componentes de carregamento personalizados usando Tailwind CSS no seu aplicativo Next.js . Em seguida, adicione animações de carregamento fáceis de usar, como spinners fornecidos por pacotes como React Spinners .
Para utilizar este pacote, instale-o no seu projeto.
npm install react-loader-spinner --save
Em seguida, atualize seu arquivoloading.jsfile da seguinte forma:
"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;
A interface do utilizador para carregar o estado da aplicação apresentará uma sugestão visual sob a forma de uma mensagem de carregamento juntamente com um efeito de rotação animado, que serve como indicação de que o processo de recuperação dos dados Todo está atualmente em curso.
Melhorar a experiência do utilizador com interfaces de carregamento
A integração de interfaces de carregamento em aplicações Web pode melhorar significativamente a experiência geral do utilizador, oferecendo indicadores visuais que informam os utilizadores de processos assíncronos em curso. Esta abordagem não só diminui a apreensão e a ambiguidade, como também promove um maior envolvimento do utilizador.