Dynamically Fetch Products Based on Screen Size
Unanswered
Giant Angora posted this in #help-forum
Giant AngoraOP
# 🛒 How to Dynamically Fetch Products Based on Screen Size Without Affecting UI in Next.js?
## ❓ Question
I'm building an eCommerce site using Next.js (App Router) with Drizzle + PostgreSQL. In the "Featured Products" section, I want to fetch different numbers of products based on the user's screen size to optimize performance.
For example:
- Mobile (<425px): Fetch 16 products
- Tablet (425px–619px): Fetch 18 products
- Desktop (1020px+): Fetch 30 products
## ⚠️ The Problem
I currently fetch 24 products by default and hide extras using
However, the issue isn’t just about fetching 30 products—I need to show placeholders for 30 items even if the user initially requested from a mobile device (which only fetches 16). This means:
1. UI should always display placeholders for 30 products, regardless of screen size.
2. API should fetch only the necessary number of products to avoid over-fetching.
3. When data loads, placeholders should be replaced with the fetched products without breaking the layout.
## ❓ Questions
1. How can I efficiently handle this dynamic fetching while maintaining a consistent UI?
2. Should I fetch the minimum (16 products) first, then lazy-load more as needed?
3. Is there a better way to manage placeholders when the fetched product count differs from the total placeholders?
Would love insights from anyone who has tackled a similar issue in Next.js (App Router)! 🚀
## ❓ Question
I'm building an eCommerce site using Next.js (App Router) with Drizzle + PostgreSQL. In the "Featured Products" section, I want to fetch different numbers of products based on the user's screen size to optimize performance.
For example:
- Mobile (<425px): Fetch 16 products
- Tablet (425px–619px): Fetch 18 products
- Desktop (1020px+): Fetch 30 products
## ⚠️ The Problem
I currently fetch 24 products by default and hide extras using
display: none. While this works, it wastes database queries and bandwidth. However, the issue isn’t just about fetching 30 products—I need to show placeholders for 30 items even if the user initially requested from a mobile device (which only fetches 16). This means:
1. UI should always display placeholders for 30 products, regardless of screen size.
2. API should fetch only the necessary number of products to avoid over-fetching.
3. When data loads, placeholders should be replaced with the fetched products without breaking the layout.
## ❓ Questions
1. How can I efficiently handle this dynamic fetching while maintaining a consistent UI?
2. Should I fetch the minimum (16 products) first, then lazy-load more as needed?
3. Is there a better way to manage placeholders when the fetched product count differs from the total placeholders?
Would love insights from anyone who has tackled a similar issue in Next.js (App Router)! 🚀
11 Replies
there is no way to know the device's width on the server
you can however do some shenanigans using css and server components
like make 3 server components which fetch and render diff no of items
using css
render them
nvm
this will just hide the components
the data fetching will still take place
Giant AngoraOP
hi @Yi Lon Ma thx for quick reply, i used same css for skeleton too, no need to create 3 server components.
.responsive-products {
& > article {
@apply hidden;
}
@media screen AND (max-width: 424px) {
& > article:nth-child(-n + 8) {
@apply block;
}
}
@media screen AND (min-width: 425px) AND (max-width: 619px) {
& > article:nth-child(-n + 16) {
@apply block;
}
}
@media screen AND (min-width: 620px) AND (max-width: 819px) {
& > article:nth-child(-n + 18) {
@apply block;
}
}
@media screen AND (min-width: 820px) AND (max-width: 1019px) {
& > article:nth-child(-n + 20) {
@apply block;
}
}
@media screen AND (min-width: 1020px) AND (max-width: 1279px) {
& > article:nth-child(-n + 25) {
@apply block;
}
}
@media screen AND (min-width: 1280px) {
& > article:nth-child(-n + 30) {
@apply block;
}
}
}I had smth else in my mind
but that I recalled that setting display hidden hides the element but its still rendered