Search and Pagination
Answered
(-.-) posted this in #help-forum
(-.-)OP
Filters, search, and pagination controlled via URL search parameters for server-side components or through states on the client?
Context: I'm creating a data table with search filters and pagination. I'm debating whether to use URL search parameters or TanStack Table on the client side.
Context: I'm creating a data table with search filters and pagination. I'm debating whether to use URL search parameters or TanStack Table on the client side.
Answered by American Crow
Need the URLs for SEO / Shareable? e.g. E-Commerce app
-> Server Side
SEO not important / URL's are not shared e.g. Personal Dashboard -> Client Side
Two more considerations:
- Devices of users? If shitty might do it server side.
- Cost / Scalability: Using searchParams opts into dynamic rendering
site.com/prodcuts/shirt?color=red&size=blue-> Server Side
SEO not important / URL's are not shared e.g. Personal Dashboard -> Client Side
Two more considerations:
- Devices of users? If shitty might do it server side.
- Cost / Scalability: Using searchParams opts into dynamic rendering
11 Replies
American Crow
Need the URLs for SEO / Shareable? e.g. E-Commerce app
-> Server Side
SEO not important / URL's are not shared e.g. Personal Dashboard -> Client Side
Two more considerations:
- Devices of users? If shitty might do it server side.
- Cost / Scalability: Using searchParams opts into dynamic rendering
site.com/prodcuts/shirt?color=red&size=blue-> Server Side
SEO not important / URL's are not shared e.g. Personal Dashboard -> Client Side
Two more considerations:
- Devices of users? If shitty might do it server side.
- Cost / Scalability: Using searchParams opts into dynamic rendering
Answer
(-.-)OP
It's not a E-commerce, it would be a personal dashboard
SEO not important
but I think the URL can be shared
@American Crow Need the URLs for SEO / Shareable? e.g. E-Commerce app `site.com/prodcuts/shirt?color=red&size=blue`
-> Server Side
SEO not important / URL's are not shared e.g. Personal Dashboard -> Client Side
Two more considerations:
- Devices of users? If shitty might do it server side.
- Cost / Scalability: Using searchParams opts into dynamic rendering
(-.-)OP
This personal Dashboard will only be available in the Desktop version
@(-.-) This personal Dashboard will only be available in the Desktop version
American Crow
You have to put some thought into the URL sharing.
If you want to store more sophisticated state in the URL e.g. SQL-like queries
You'll have to go with server side search params and there is a website which can help with the construction of those parameters.
But i can't find it.
@B33fb0n3 Sorry for the ping, I think you shared the site a couple of times i just cant find it / remember. (see above)
If you just want some very basic url sharing there is a way to sync up state with searchparams. However i'd only suggest that for very simple states.
Anyways i think you got all the info, have to make your own decision from here
If you want to store more sophisticated state in the URL e.g. SQL-like queries
site.com/dashboard/filter=[name]$eq[michael]You'll have to go with server side search params and there is a website which can help with the construction of those parameters.
But i can't find it.
@B33fb0n3 Sorry for the ping, I think you shared the site a couple of times i just cant find it / remember. (see above)
If you just want some very basic url sharing there is a way to sync up state with searchparams. However i'd only suggest that for very simple states.
Anyways i think you got all the info, have to make your own decision from here
@American Crow You have to put some thought into the URL sharing.
If you want to store more sophisticated state in the URL e.g. SQL-like queries `site.com/dashboard/filter=[name]$eq[michael]`
You'll have to go with server side search params and there is a website which can help with the construction of those parameters.
But i can't find it.
<@301376057326567425> Sorry for the ping, I think you shared the site a couple of times i just cant find it / remember. (see above)
If you just want some very basic url sharing there is a way to sync up state with searchparams. However i'd only suggest that for very simple states.
Anyways i think you got all the info, have to make your own decision from here
(-.-)OP
Thanks a lot for the help
@American Crow@(-.-) the site that you searching is https://nuqs.47ng.com/
Short version: Imagine having a useState, but the state is inside your URL. You can decide if the url only updates clientside or if there should be a new server request.
Your case: Integrate nuqs as filter and update only the clientside. Your filters will be also handled only clientside like zomh told you. If the user now want to share this current filtered data, the url is already updated and the user can share it
Short version: Imagine having a useState, but the state is inside your URL. You can decide if the url only updates clientside or if there should be a new server request.
Your case: Integrate nuqs as filter and update only the clientside. Your filters will be also handled only clientside like zomh told you. If the user now want to share this current filtered data, the url is already updated and the user can share it
@B33fb0n3 <@240974567730970625><@641430056069103617> the site that you searching is https://nuqs.47ng.com/
Short version: Imagine having a useState, but the state is inside your URL. You can decide if the url only updates clientside or if there should be a new server request.
Your case: Integrate nuqs as filter and update only the clientside. Your filters will be also handled only clientside like zomh told you. If the user now want to share this current filtered data, the url is already updated and the user can share it
American Crow
yea that's what i meant. Thanks mate i knew you had that shit bookmarked ❤️
@(-.-) Feel free to check it out
@(-.-) Feel free to check it out
(-.-)OP
thank you guys
@(-.-) thank you guys
sure thing. Please mark solution