From the course: Master Next.js: Elaborate Hands-On Web Development, React Basics, Advanced Next.js, and Deployment

Unlock this course with a free trial

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

What is CSR, client-side rendering with Next.js?

What is CSR, client-side rendering with Next.js?

From the course: Master Next.js: Elaborate Hands-On Web Development, React Basics, Advanced Next.js, and Deployment

Start my 1-month free trial Buy for my team

What is CSR, client-side rendering with Next.js?

“

OK, so to contrast pre-rendering to client-side rendering, or what we call CSR. So in a standard React application, what happens is that the browser just receives an empty HTML shell from the server, along with the JavaScript instructions to construct the UI. And that's called client-side rendering, because that initial rendering work happens on the user's device. So all the rendering is going to happen, and you've got to wait for the rendering to be finished before you're going to see the final result. So that's client-side rendering. Now, again, intuitively you might think, well, doesn't that mean server-side rendering should just be better? Many cases, yes. But suppose you're building a social media app where users receive real-time notifications, like you have messages, comments, and likes. You want to display a notification count in the nav bar, and it needs to update in real-time without requiring a full page refresh. That's a drawback with server-side rendering. With…

Contents