React uses Next.js for server-side rendering

React is a popular JavaScript library for building modern web applications. However, since React requires a lot of JavaScript code when rendering on the client side, it affects the performance and SEO optimization of the application. To combat this, Server Rendering (SSR) can be used to improve performance and SEO optimization. In this article, we'll take a closer look at how to use Next.js for server-rendered React applications.

What is Next.js?

Next.js is a React-based JavaScript framework for building server-rendered React applications. It provides many useful features such as automatic code splitting, pre-rendering, static exporting, etc. to simplify the development and deployment of React applications. Next.js uses Node.js as the server environment and React as the client-side rendering framework.
Advantages of Next.js:

• Server rendering: Next.js supports server rendering, which can render React components on the server side and send HTML strings to the client, thereby improving performance and SEO optimization.
• Automatic code splitting: Next.js can automatically split code into small chunks to reduce page load time and improve performance.
• Prerendering: Next.js can automatically prerender pages at build time and serve static HTML on subsequent requests, improving performance.
• Static export: Next.js can export pages as static HTML files for easy deployment to static website hosting services (such as GitHub Pages, Netlify, etc.).
• Support multiple data sources: Next.js can get data from multiple data sources (such as API, database, file system, etc.) and pass it to React components as props.
• Ease of use: Next.js provides many useful features such as routing, styling, and layout, etc., making developing React applications easy and easy.

Steps for a server-rendered React app with Next.js:

1. Create a Next.js application
   First, you need to install dependencies such as Next.js and React, and create a Next.js application.

npx create-next-app my-app
cd my-app
npm run dev

This will start the Next.js development server at http://localhost:3000.

2. Create the page
   Next, you need to create the page that will render the React components. You can create a new file under the pages directory and write your React components in it.

import React from 'react';

function Home() {
    
    
  return (
    <div>
      <h1>Hello, Next.js SSR!</h1>
    </div>
  );
}

export default Home;

In the code above, a simple React component is defined for rendering on the server and client side. This page can be viewed by visiting http://localhost:3000/.

3. Use the getInitialProps method for server-side rendering
   Next, you need to use the getInitialProps method for server-side rendering. The getInitialProps method is a static method that can be defined in a component and executed on both the server and client.

import React from 'react';

function Home({
     
      data }) {
    
    
  return (
    <div>
      <h1>{
    
    data.title}</h1>
      <p>{
    
    data.body}</p>
    </div>
  );
}

Home.getInitialProps = async () => {
    
    
  const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const post = await res.json();
  return {
    
     data: post };
};

export default Home;

In the code above, the getInitialProps method is used to fetch data from an API and pass the data to the component as props. This will make the component have the data when rendered on the server side. It should be noted that the getInitialProps method can only be used in page components.

4. Using the Link component for client navigation
   Next, you need to use the Link component for client navigation. The Link component is a component provided by Next.js, which is used to navigate to another page on the client side.

import React from 'react';
import Link from 'next/link';

function Home({
     
      data }) {
    
    
  return (
    <div>
      <h1>{
    
    data.title}</h1>
      <p>{
    
    data.body}</p>
      <Link href="/about">
        <a>About</a>
      </Link>
    </div>
  );
}

Home.getInitialProps = async () => {
    
    
  const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const post = await res.json();
  return {
    
     data: post };
};

export default Home;

In the code above, a Link component is used to create a link that navigates to the /about page. It should be noted that the Link component can only be used in page components.

5. Create other pages
   Finally, other pages can be created to build a complete React application. You can create another file under the pages directory and write another page component in it.

import React from 'react';

function About() {
    
    
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page.</p>
    </div>
  );
}

export default About;

In the code above, a simple React component is defined for rendering on the server and client side. This page can be viewed by visiting http://localhost:3000/about.

In conclusion, building server-rendered React applications is quick and easy with Next.js. Server rendering and client-side navigation can be performed by writing page components, using the getInitialProps method, using Link components, etc.