Paginação lado do cliente | Spring Boot API Rest: Segurança da API, Cache e Monitoramento

Olá Larissa, tudo bem?

Isso mesmo, a resposta paginada do Spring traz todas informações para que o front consiga estruturar a pagina em cima disso, a grande questão vai ser a tecnologia utilizada, por exemplo com React teríamos algo assim:

function App() {
  const [topics, setTopics] = useState([]);
  const [limit, setLimit] = useState(10);
  const [page, setPage] = useState(0);

  useEffect(() => {
    async function fetchTopics() {
      const data = await fetch(
        `http://localhost:8080/topicos?page=${page}`
      );
      const topicsResponse = await data.json();
      setTopics(topicsResponse.content);
      setLimit(topicsResponse.totalPages);
    }
    fetchTopics();
  }, [page]);

  const handlePage = (number) => {
    if(page + number >= limit || page + number < 0) return;
    setPage(page+number);
  }

  return (
    <div className="App">
      <table>
        <thead>
          <tr>
            <th> ID </th>
            <th> Data</th>
            <th>Titulo</th>
            <th>Mensagem</th>
          </tr>
        </thead>
        <tbody>
          {topics && topics.map(topic => {
            return (
              <tr key={topic.id}>
                <td>{topic.id}</td>
                <td>{topic.titulo}</td>
                <td>{topic.mensagem}</td>
                <td>{new Date(topic.dataCriacao).toLocaleDateString("pt-BR")}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
      <div>
        <button onClick={ () => handlePage(1)} >Próxima</button>
        <button onClick={ () => handlePage(-1)}>Anterior</button>
      </div>
    </div>
  );
}

Então fazemos uma requisição base com a página sendo 0, e dessa requisição podemos selecionar o que julgamos importante, neste exemplo, eu peguei o totalPage e dessa forma consigo criar um botão que aumente o número de páginas em 1 ( ou volte), e consigo controlar até que página ele pode ir para não fazer requisições incorretas para a API

No React a função useEffect é disparada sempre que um estado, que estamos observando, muda, então quando o usuário clica no botão de pŕoximo ou anterior, o número da página muda, e é disparada uma noma requisição para o backend mudando apenas o parâmetro :)

Obviamente é um exemplo bem simples, mas dado o retorno pela a API podemos criar um sistema bem completo, dar possibilidade do usuário selecionar a quantidade, criar botões para ir para paginas especificas (dado que temos a quantidade), etc.

Vai depender realmente da tecnologia utilizada :)

Abraços e Bons Estudos!