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

React (client side) vs. Next.js (server side)

Now, before we start learning Next.js, let me quickly show you how it is getting rendered at the server side as compared to React.js client side rendering. Here we have React.js and Next.js applications opened in the browser. Let me first open the React app and go to the page source. And you can see that there is no content here. However, if I open the source code in the next JS, then we can see the actual content which is getting rendered. So when this page is indexed in search engine with the content, it will be more SEO friendly. Let me also show you one more point. I will add a console log rendering here in the home component and switch to the browser. Now if I refresh and check the console in the developer tool, then it doesn't show the rendering here, because it is rendered on the server side. So let's go to the code terminal. And here you can see the rendering message. So this should give you the idea about how Next.js is different from React.

Contents