"use client" capabilities
Unanswered
Central Asian Shepherd Dog posted this in #help-forum
Central Asian Shepherd DogOP
Hello,
Tried to get things done by myself, but got a little bit confused. I'm working on a page which would contain a product grid for an online store. Therefore, loading times are quite important.
- page.tsx would contain a basic layout and in the future it would be wrapped by a reducer
- 4 main components: ProductGrid, Pagination, FilterSection, HeaderSection (including a searchbar and some sorting capabilities)
So far, all the main components are using client-side rendering ("use client") since all of them are using data being fetched from an REST API. My goal is to split them accordingly into client-side and server-side components in order to get faster loading times.
My questions:
1. Is there any way I can initially render a server-side component and then take advantage of "use client" if the user uses any interactivity at all? The products are quite constant, there won't be frequent updates. I think that they could be cached somehow.
2. Any other tips when trying to fully use "use client" capabilities?
Thanks!
Tried to get things done by myself, but got a little bit confused. I'm working on a page which would contain a product grid for an online store. Therefore, loading times are quite important.
- page.tsx would contain a basic layout and in the future it would be wrapped by a reducer
- 4 main components: ProductGrid, Pagination, FilterSection, HeaderSection (including a searchbar and some sorting capabilities)
So far, all the main components are using client-side rendering ("use client") since all of them are using data being fetched from an REST API. My goal is to split them accordingly into client-side and server-side components in order to get faster loading times.
My questions:
1. Is there any way I can initially render a server-side component and then take advantage of "use client" if the user uses any interactivity at all? The products are quite constant, there won't be frequent updates. I think that they could be cached somehow.
2. Any other tips when trying to fully use "use client" capabilities?
Thanks!
20 Replies
if you want to use the client only, you can use react ^^
@Central Asian Shepherd Dog helped?
@Central Asian Shepherd Dog Hello,
Tried to get things done by myself, but got a little bit confused. I'm working on a page which would contain a product grid for an online store. Therefore, loading times are quite important.
- page.tsx would contain a basic layout and in the future it would be wrapped by a reducer
- 4 main components: ProductGrid, Pagination, FilterSection, HeaderSection (including a searchbar and some sorting capabilities)
So far, all the main components are using client-side rendering ("use client") since all of them are using data being fetched from an REST API. My goal is to split them accordingly into client-side and server-side components in order to get faster loading times.
My questions:
1. Is there any way I can initially render a server-side component and then take advantage of "use client" if the user uses any interactivity at all? The products are quite constant, there won't be frequent updates. I think that they could be cached somehow.
2. Any other tips when trying to fully use "use client" capabilities?
Thanks!
I am publishing a course at newline on the topic of using RSCs and Server Action to craft ecommerce website that favours static rendering and use client/dynamic where appropriate
" all of them are using data being fetched from an REST AP"
-> not the right criterion for client-side data fetching
client-side is mostly relevant if you have an highly dynamic behaviour
for instance fetch the products every X ms without the user reloading the page, having filtering capabilities etc.
Not having "use client" is the default in Next.js
I am assuming App Router here*
so you just write your RSC and "just" await your data
const ProductsGrid = () => {
await fetch("/rest-api/products")
return products
}
I am oversimplifying but you get the idea
You may want to provide more specific questions, like, are some specific technical points preventing you from moving to App Router and React Server Components? Are you facing errors that you can't solve yet?
The Next.js Learn tutorial is also a great free resource that explains how to use Next App Router the way it's intended to be used: https://nextjs.org/learn
the example they take is an accounting app, you can probably adapt to ecommerce
Central Asian Shepherd DogOP
Alright, thank you for your help. Figured them out. Being mostly a back-end developer, working on the front-end feels like shooting myself in the foot, at the moment 🙂
@Central Asian Shepherd Dog Alright, thank you for your help. Figured them out. Being mostly a back-end developer, working on the front-end feels like shooting myself in the foot, at the moment 🙂
Perfect you'll love the backend-first style of the App Router 😆