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.
- 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 HTML
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:
- Getting started with Next.js
- Next.js vs Gatsby vs create-react-app
- How to install Next.js
- Use links to link two pages in Next.js
- Dynamic content in Next.js in the router
- Use getInitialProps to feed data to Next.js components
- Use CSS to style Next.js components
- Prefetch content in Next.js
- Use a router to detect active links in Next.js
- Check the source code to confirm that SSR is working properly in Next.js
- Next.js: Fill the head tag with a custom tag
- Deploy the Next.js application now
- Next.js: Only run code on the server or client side of Next.js
- Deploy Next.js application in production
- How to analyze Next.js application bundles
- Lazy loading module in Next.js
- Add a wrapper component to your Next.js application
- Add Next.js to the icon in your application
- Next.js application bundle
- How to use Next.js router
- How to use Next.js API routing
- How to get cookies on the server side in Next.js application
- How to change the Next.js application port