Search for a command to run...
My name is Michael Lehmann. I'm a developer, architect, technical team lead and occasional speaker. I work for Zühlke Engineering AG as a Lead Software Architect aiming to help my customers and team mates to design and develop software. I specialised in developing distributed systems with micro-service architectures and modern web technologies.
No comments yet. Be the first to comment.
15 years ago, C# did not have a large variety of unit test frameworks and supporting libraries. That has changed in the meantime. The community has grown considerably and so has the range of libraries and tools that can be used for unit tests. While ...
A good friend of mine once told me about a conference talk that was about so-called task-based UIs. I considered this architecture style for an application in a private bank which was responsible for checking the suitability for finance instrument tr...
I recently implemented a small hint showing the reading time of an article in my blog. This is a functionality used quite much when reading some technical articles written by the developer community. It helps me to decide whether I have the time to r...
In larger projects, the cooperation of several teams and long-term maintenance is always an issue. The architecture must be defined in such a way that such aspects are possible. This is often implemented with a certain degree of modularization. This ...
On this page
If you read my blog regularly you may have noticed that I recently introduced pagination to my article list. In order of that, I would like to explain how I implemented that with the tech stack of my blog - NextJS and MongoDB.
Pagination is one of the major mechanisms to reduce page loading time and is widely adopted. It is a good practice to do pagination when you have many rows, resp. an unknown amount of rows. It can help to improve the performance with three aspects:
It reduces the query time on the database
It reduces the payload size returned to the client
It reduces the amount of elements the browser needs to render
Especially the third point can help a lot when there are some expensive elements such as images per data row.
The mechanism is actually quite simple. The data as a whole needs to be split into junks of the same size. These junks we call pages.
Every page has a page number, a size , and an offset. In order to get a reliable result the data needs to be sorted.
We now can translate this into a database query. Usually, the databases don't know the concept or pages. But they have a syntax to skip and take a certain amount of rows. In terms of SQL, it would be offset and fetch. We can translate the page number into this syntax. Assuming the pages start with 1 we can do following query skip = (page - 1) * size, take = size.
A full SQL query loading page 2 could look like this:
SELECT * FROM [Posts]
ORDER BY [Published]
OFFSET 10 ROWS
FETCH NEXT 10 ROWS ONLY;
If we know the total amount of rows, we can calculate the total page count as well Math.Ceil(totalRowCount / size).
Since I have a database, concrete MongoDB, for storing my articles in place I need to use the SSR mechanism of NextJS to pre-render the articles on the server side.
Assuming I have a UI which is illustrated in the next image. It contains a table of data and controls for navigating through the pages. In my case, I allow only navigation forward and backwards. In some implementations, there are controls for a dedicated page. But in the end, this does not matter.
Having the design in place we need a way to tell the server-side rendering which page to load. We do that by passing it with the URL as a query parameter https://domain/blog?page=2.