Which approach best integrates Bulma's pagination component with server‑side data slicing for large datasets?

Answer the question first

The most reliable way to combine Bulma’s pagination UI with a server‑side paginated API that uses a 0‑based page index is to let the server generate the entire nav.pagination block. Map the 0‑based index to a 1‑based page number only for display, keep the 0‑based value in the URL query parameter, and add full aria‑ attributes so the component works without JavaScript.

Why this works

• Bulma’s component is purely presentational; it expects standard <a> tags.
• Server‑side rendering guarantees that the total page count is accurate on each request, avoiding stale links.
• Using a helper that accepts totalItems, itemsPerPage, currentIndex, and baseURL keeps the logic stateless and repeatable.
• Accessibility is ensured by aria-current="page" on the active link and descriptive aria-label attributes on all links.

Key steps for implementation

1. Calculate page metadata
   

   On the server, compute:

   • totalPages = Math.ceil(totalItems / itemsPerPage)
   • currentIndex = parseInt(req.query.page) || 0
2. Build the URL for each link
   

   Use a base URL and append ?page=0, ?page=1, etc. The query value remains 0‑based.

3. Render Bulma markup
   

   Example snippet (pseudo‑template language):

   <nav class="pagination" role="navigation" aria-label="pagination">
     <a class="pagination-previous" href="{{ baseURL }}?page={{ currentIndex - 1 }}" {{#unless hasPrev}}disabled{{/unless}}>Previous</a>
     <a class="pagination-next" href="{{ baseURL }}?page={{ currentIndex + 1 }}" {{#unless hasNext}}disabled{{/unless}}>Next</a>
     <ul class="pagination-list">
       {{#each pages}}
         <li>
           <a class="pagination-link {{#if isCurrent}}is-current{{/if}}" href="{{ baseURL }}?page={{ index }}" aria-label="Page {{ display }}" {{#if isCurrent}}aria-current="page"{{/if}}>{{ display }}</a>
         </li>
       {{/each}}
     </ul>
   </nav>

4. Accessibility details
   
   • Use aria-label="Page X" on each numbered link.
   • Set aria-current="page" on the active link.
   • Ensure previous and next links contain descriptive text or aria-hidden="true" on any icon.
   • Do not rely on JavaScript; the links are regular <a> elements.
5. Handle changing total pages
   

   Because the markup is regenerated on every request, any change in totalItems automatically updates the pagination. Avoid caching the rendered markup on the client.

Follow‑up diagnostic detail

To fine‑tune the helper, could you confirm whether the backend exposes the total page count in the response payload or if it must be inferred from totalItems and itemsPerPage only?

Summary

Server‑side generation of Bulma’s pagination, with 0‑based indices in URLs and 1‑based numbers in the UI, satisfies all constraints: correct numbering, efficient server‑side slicing, and full accessibility without JavaScript.