Server-side rendering (SSR) using Next.js and JavaScript

In the world of web development, providing a fast and seamless user experience is crucial. One way to achieve this is through server-side rendering (SSR), a technology that allows web pages to be rendered on the server before being sent to the client. SSR provides many benefits, including improved performance, SEO optimization, and better user interaction. In this article, we'll explore the basics of SSR using Next.js, a popular JavaScript framework for building server-rendered React applications.

What is Server Side Rendering (SSR)?

Traditionally, web applications have relied on client-side rendering, where the entire rendering process occurs on the browser using JavaScript. This approach works well for small applications, but can result in slower initial page loads, poor SEO performance, and limited accessibility.

Server-side rendering, on the other hand, involves generating the complete HTML content on the server and sending it to the client. The client then receives a fully rendered page, ready to be displayed to the user. This approach allows search engines to crawl the page more efficiently and improves user-perceived performance.

Introduction to Next.js

Next.js is a React framework that provides built-in server-side rendering capabilities. It simplifies the process of building SSR applications by abstracting the complexity of server-side setup and configuration. Next.js also offers features like automatic code splitting, client-side rendering, and static site generation, making it a versatile choice for modern web development.

Set up the Next.js project

To start using Next.js, make sure Node.js is installed on your computer. Create a new directory for your project and initialize it using the following command -

npx create-next-app my-next-app

This command sets up a new Next.js project with the necessary files and dependencies. Navigate to the project directory by running -

cd my-next-app

After entering the project directory, use the following command to start the development server -

npm run dev

Next.js will start the local development server at http://localhost:3000 and you can see your application running in your browser.

Create server-side rendering page

Next.js makes creating server-side rendered pages incredibly easy. In the project structure, navigate to the Pages directory and create a new file called about.js. This file will represent the /about route in our application.

In about.js, add the following code -

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

export default About;

Save the file and if the Next.js development server is running, you can navigate to http://localhost:3000/about to view the rendered page.

Let's take a closer look at the code. The About component is a React functional component that returns JSX that represents the content of the About page. In this case, it renders an element containing a

heading and

paragraphs.

The final export default About statement exports the About component as the default export, which allows Next.js to recognize it as a server-side rendered page.

After accessing the /about route, the server will render the About component and the client will receive the full HTML representation of the page. This approach ensures that the page is fully rendered before being sent to the user, improving performance and SEO.

Dynamic server-side rendering

Next.js also supports dynamic server-side rendering, allowing us to get data from external APIs or perform server-side calculations before rendering the page. This allows us to serve dynamic content to users without relying on client-side JavaScript.

To demonstrate dynamic server-side rendering, let's create a page that gets data from the mock API. In the pages directory, create a new file called users.js -

function Users({ users }) {
   return (
      <div>
         <h1>User List</h1>
         <ul>
            {users.map((user) => (
               <li key={user.id}>{user.name}</li>
            ))}
         </ul>
      </div>
   );
}

export async function getServerSideProps() {
   const response = await  fetch('https://api.example.com/users');
   const users = await response.json();

   return {
      props: {
         users,
      },
   };
}

export default Users;

illustrate

In the above code, we define a functional component Users, which receives user data as prop. It uses the received data to render a list of users. The getServerSideProps function is an asynchronous function that gets data from an external API (https://api.example.com/users in this case).

In getServerSideProps, we use the fetch function to make an HTTP request to the API and retrieve user data. We then parse the response into JSON and assign it to the user's variable. Finally, we return an object with a props attribute containing the fetched user data.

When a user accesses the /users route, Next.js will call the getServerSideProps function on the server to get the data. The obtained user data will be passed as props to the Users component for rendering. This ensures that the page is always rendered with the latest data on every request.

Dynamic server-side rendering is a powerful feature that allows us to build data-driven pages and deliver personalized content to users. By getting the data on the server, we can optimize performance and ensure a consistent user experience across different devices and network conditions.

in conclusion

Server-side rendering (SSR) using Next.js and JavaScript provides an efficient way to build high-performance web applications. By leveraging Next.js’ server-side rendering capabilities, we can serve fully rendered pages to our users, improving performance, search engine visibility, and overall user experience.

This article introduces SSR, steps through the setup of a Next.js project, and demonstrates how to create a server-side rendered page. We explored the benefits of server-side rendering and how Next.js simplifies the process of implementing SSR in React applications.

The above is the detailed content of Server-side rendering (SSR) using Next.js and JavaScript. For more information, please follow other related articles on the PHP Chinese website!