Once you have set up your new Next.js application, it’s important to ensure that your application is working as expected, specifically with server side rendering (SSR).
Next.js offers server side rendering as one of its main features. When you create a site using Next.js, the pages of the site are rendered on the server and delivered to the browser as HTML. This provides several advantages:
-
Faster site rendering: By rendering the pages on the server, the client does not need to instantiate React, resulting in a faster site for your users.
-
Improved search engine indexing: Search engines can index the server-rendered pages without relying on client-side JavaScript. Although Google has started running client-side JavaScript, it openly admitted that this process is slower. Therefore, it is advisable to help Google and other search engines by providing server-rendered content for better ranking.
-
Social media meta tags: Server side rendering allows you to include meta tags for social media platforms, such as preview images, custom titles, and descriptions. This makes your pages more appealing when shared on platforms like Facebook and Twitter.
To confirm if SSR is working in your Next.js app, follow these steps:
-
In Chrome browser, open your Next.js application.
-
Right-click anywhere on the page and select “View Page Source”.
-
In the page source, you will see the following snippet within the HTML
body:<div><h1>Airbnb clone</h1></div>. You will also notice a number of JavaScript files, which are the application bundles.
If you are able to view the page source and see the specified HTML snippet along with the JavaScript files, it means that SSR is already working in your Next.js application.
With Next.js, the React app is launched on the client side and handles interactions such as clicking a link through client-side rendering. However, when a page is reloaded, it is loaded from the server again. The result, whether server-rendered or client-rendered, should look exactly the same within the browser.
Tags: next.js, server-side rendering, SSR, view page source, HTML, JavaScript