← flaviocopes.com

View source to confirm SSR is working in Next.js

Published Nov 18 2019

Do you have set up your new Next.js application? Great!

Let’s now check the application is working as we expect it to work. It’s a Next.js app, so it should be server side rendered.

It’s one of the main selling points of Next.js: if we create a site using Next.js, the site pages are rendered on the server, which delivers HTML to the browser.

This has 3 major benefits:

Let’s view the source of the app. Using Chrome you can right-click anywhere in the page, and press View Page Source.

If you view the source of the page, you’ll see the <div><h1>Airbnb clone</h1></div> snippet in the HTML body, along with a bunch of JavaScript files - the app bundles.

We don’t need to set up anything, SSR (server-side rendering) is already working for us.

The React app will be launched on the client, and will be the one powering interactions like clicking a link, using client-side rendering. But reloading a page will re-load it from the server. And using Next.js there should be no difference in the result inside the browser - a server-rendered page should look exactly like a client-rendered page.

Wanna go from noobie to expert?

I wrote an entire book on this topic 👇

© 2023 Flavio Copes Flavio Copes using Notion to Site Notion to Site

Interested in solopreneurship?