From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

React server component vs. client component

React server component vs. client component - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

React server component vs. client component

“

Now, let's try out a scenario where you have a product page and you need to have a counter for quantity. Then it seems pretty simple to create such a component. However, there is a catch and let's practically try it out to understand. We'll create a simple counter in the current application. So first, let's create the component file. I'll name the file counter.js and inside I'll create export default function named counter. And inside I'll return the JSX with a division giving the style display flex. Now inside this division, I'll have two buttons, one for subtraction, and one for addition. And let me give the buttons width of 4rem. All right, now let's take the counter variable. So I'll take a state const in the square brackets, cnt comma set cnt is equal to use state. Then let's display the counter value between the buttons. I'll take a span tag and render the value inside it. Let me also give padding 1rem to the span tag. Finally, let's configure the onClick event for the buttons…

Contents