Building Next.js Server-Side Rendering (SSR) from Scratch: A Comprehensive Guide

Next.js is a popular framework for building React applications, known for its built-in Server-Side Rendering (SSR) capabilities. While Next.js makes SSR largely seamless, understanding how SSR works under the hood can help you optimize performance, debug issues, and integrate with custom server setups.

In this blog post, we'll explore how to implement SSR in Next.js from scratch. We'll cover the core concepts, provide practical examples, and share best practices to help you get the most out of SSR.

Table of Contents

• Understanding Server-Side Rendering (SSR)
• Why Use SSR?
• Setting Up Next.js
• Implementing SSR in Next.js
  • Step 1: Creating a Custom Server
  • Step 2: Handling Dynamic Data Fetching
  • Step 3: Rendering the HTML
• Best Practices for SSR in Next.js
• Common Challenges and Solutions
• Conclusion

Understanding Server-Side Rendering (SSR)

Server-Side Rendering is a technique where the initial HTML for a webpage is generated on the server and sent to the client. This is in contrast to Client-Side Rendering (CSR), where the entire application is rendered in the browser.

Key benefits of SSR include:

• Improved SEO: Search engines can crawl and index the rendered HTML directly.
• Faster Initial Load Times: Users see content sooner because the server sends pre-rendered HTML.
• Better Accessibility: Screen readers can interpret the pre-rendered content more effectively.

Why Use SSR?

While SSR offers many benefits, it's not always the best choice for every application. Here are some scenarios where SSR shines:

• E-commerce websites with product lists or search results.
• Content-heavy websites like blogs or news sites.
• SEO-critical applications where page visibility is crucial.

However, SSR can introduce some overhead, such as increased server load and longer build times. It's essential to weigh the benefits against these trade-offs.

Setting Up Next.js

Before diving into SSR, let's ensure we have a basic Next.js setup. If you already have a project, skip this section.

Installation

npx create-next-app@latest next-ssr-example
cd next-ssr-example
npm run dev

This command creates a new Next.js application with the latest version.

Folder Structure

A typical Next.js project structure looks like this:

next-ssr-example/
│
├── pages/
│   └── index.js
├── components/
│   └── Header.js
├── public/
│   └── favicon.ico
├── .next/
│   └── ...
├── package.json
└── next.config.js

Implementing SSR in Next.js

Next.js provides built-in SSR capabilities, but you can also implement it manually for more control. Let's walk through the process step by step.

Step 1: Creating a Custom Server

By default, Next.js uses its built-in server for development and production. To implement SSR from scratch, we'll use the next-server package to create a custom server.

1. Install Dependencies

First, install the necessary packages:

npm install next react react-dom
npm install --save-exact next@latest
npm install express next-server

2. Create a Custom Server File

Create a server.js file in the root of your project:

// server.js
const express = require('express');
const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.get('*', (req, res) => {
    const parsedUrl = parse(req.url, true);
    handle(req, res, parsedUrl);
  });

  const PORT = process.env.PORT || 3000;
  server.listen(PORT, (err) => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${PORT}`);
  });
});

Explanation:

• express: A popular Node.js web framework.
• next-server: Provides the createServer function to handle Next.js requests.
• app.getRequestHandler(): A function that handles all incoming requests and routes them to the appropriate Next.js pages.

Step 2: Handling Dynamic Data Fetching

SSR requires fetching data on the server before sending the rendered HTML to the client. Next.js provides the getServerSideProps function for this purpose.

Example: Fetching Data for a Blog Post

Create a posts directory in the pages folder and add a [id].js file:

// pages/posts/[id].js
import { useRouter } from 'next/router';

export async function getServerSideProps(context) {
  const { params } = context;
  const { id } = params;

  // Simulate an API call
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  const data = await res.json();

  return {
    props: {
      post: data,
    },
  };
}

const Post = ({ post }) => {
  const router = useRouter();

  if (!router.isFallback && !post.id) {
    return <h1>Post not found</h1>;
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
};

export default Post;

Explanation:

• getServerSideProps: This function runs on the server and returns props to the page.
• fetch: Simulates an API call to retrieve data for the specific post.
• props: The data returned by getServerSideProps is passed to the component as props.

Step 3: Rendering the HTML

When you run the custom server, Next.js will render the pages on the server and send the pre-rendered HTML to the client. The client-side JavaScript will take over afterward to hydrate the application.

Running the Server

Update your package.json scripts to use the custom server:

{
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "next start"
  }
}

Now, run the server:

npm run dev

Open http://localhost:3000/posts/1 in your browser. The page will load with the post data pre-rendered on the server.

Best Practices for SSR in Next.js

1. Use getServerSideProps for Dynamic Data

• Always use getServerSideProps for pages that require dynamic data fetched from an API.
• Avoid calling getServerSideProps in child components. Use it only in page-level components.

2. Optimize Data Fetching

• Use caching mechanisms like swr or revalidate to reduce redundant API calls.
• Minimize the amount of data fetched on the server to improve performance.

3. Handle Errors Gracefully

• Use fallback states to show loading indicators or error messages when data is not available.

4. Consider Static Generation When Applicable

• Use getStaticProps for pages with static content that doesn't change frequently. This can reduce server load and improve performance.

5. Monitor Server Performance

• Use tools like New Relic or Datadog to monitor server response times and identify bottlenecks.

Common Challenges and Solutions

Challenge 1: Server Load with Too Many Concurrent Requests

• Solution: Implement rate limiting or use a load balancer to distribute traffic evenly.

Challenge 2: Slow Data Fetching

• Solution: Optimize API calls, use caching, or consider pre-fetching data where possible.

Challenge 3: Debugging SSR Issues

• Solution: Use tools like next lint to catch SSR-specific issues early. Log errors on the server to identify problematic areas.

Conclusion

Implementing SSR in Next.js from scratch gives you fine-grained control over how your application renders content. By understanding the core concepts and following best practices, you can build performant and SEO-friendly applications.

Remember, SSR is just one tool in your toolkit. Use it when it aligns with your project's goals, and consider static generation or client-side rendering for scenarios where it might not be the best fit.

Feel free to experiment with the examples provided and adapt them to your specific use cases. Happy coding!

If you have any questions or need further clarification, feel free to reach out! 🚀

References:

• Next.js Documentation
• Server-Side Rendering in Next.js
• Express.js