Check the source code to confirm that SSR is working properly in Next.js

How to check if SSR is working properly in your Next.js application

Have you set up a new Next.js application? great!

Now, let's check if the application is running as expected. This is a Next.js application, so it shouldServer-side rendering.

This is one of the main selling points of Next.js: if we use Next.js to create a website, the website pages will be rendered on the server, and the server will pass the HTML to the browser.

This has 3 main advantages:

  • The client does not need to instantiate React to render, which makes the website faster for your users.
  • The search engine will index the page without running client-side JavaScript. What Google started to do, but publicly acknowledged that it was a slow process (if you want to rank well, you should help Google as much as possible.
  • You can have social media meta tags that can be used to add preview images, customize the title and description of any page shared on Facebook, Twitter, etc.

Let's check the source code of the application. Using the Chrome browser, you can right-click anywhere on the page and pressView page source code.

If you look at the source code of the page, you will see<div><h1>Airbnb clone</h1></div>Code snippet in HTMLbody, And a bunch of JavaScript files-the application is bundled together.

We don't need to make any settings, SSR (Server Side Rendering) has already worked for us.

React applications will be launched on the client and will be a way to use client-side rendering to drive interactions (such as clicking links). But reloading the page will reload the page from the server. With Next.js, the results of the browser should be no different-the page rendered by the server should look exactly like the page rendered by the client.

Download mine for freeNext.js manual

More tutorials next: