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.

Asynchronous server components

Asynchronous server components - 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

Asynchronous server components

“

Previously, we called an API on load of the page using the useEffect hook. And that led to a concern that if all the API calling components have to be rendered on the client side, then we won't be using the optimal performance of Next.js. And if we want to use hooks, then it is mandatory to use client components. So let's see what happens when we try the same code using a server component and without use effect. I'll remove the use client and also the use effect. Let me take a constant which will have the user's data, I'll say const users. And after the console log, we'll return the value. Now in the JSX, I'll add a paragraph tag that will render the users. So let me comment the counter and these image components. And I'll write paragraph in the curly brackets, json.stringify and users. Let's save and check. I'll refresh and the user data is not rendered. However, in the terminal, we have the user's data displayed. This means that the JSX was rendered before the user data was…

Contents