Implementing Server-Side Rendering (SSR) with Next.js and Firebase for SEO-Friendly React Apps 🚀

In the modern tech world, Search Engine Optimization (SEO) constitues a very important aspect in achieving online success. With so much competition, SEO ensures your website or product to reach the right audience.

In this guide, we'll build a simple Next.js app with Firebase for backend services. We'll implement SSR to fetch data from Firebase on the server side and serve it as static HTML to the client.

Why Server-Side Rendering (SSR)

React apps are often client-rendered by default, meaning the HTML is generated in the browser, which can be slow and less SEO-friendly. Server-Side Rendering (SSR) addresses these issues by rendering the HTML on the server and sending it to the client. This approach provides better SEO and faster initial loading times.

Why Server-Side Rendering (SSR) is SEO-Friendly

Traditional client-rendered React applications can have challenges with SEO because:

1. JavaScript Rendering: Many search engines are still limited in how they render JavaScript. Since client-side React apps generate HTML in the browser, bots may struggle to index or even see the content effectively.
2. Poor Initial Loading Performance: With client-side rendering, users have to wait for the JavaScript to load and render on their devices before they see meaningful content. This delay can lead to poor user experience and, consequently, lower rankings in search engines, as they tend to prioritize pages with faster load times.

By using Server-Side Rendering (SSR) with Next.js, you’re generating the HTML content on the server before sending it to the user’s browser. This has the following key SEO benefits:

• Immediate Content Availability: With SSR, search engine bots and users get pre-rendered HTML right from the start. The entire content is loaded and ready on page load, making it immediately accessible for both search engines and users.
• Faster Page Load Times: Server-rendered pages are faster since the HTML is already prepared on the server. Google’s ranking algorithms consider loading speed a significant factor, and faster pages generally get higher rankings.
• Better Crawling and Indexing: Search engine bots prefer pages where content is easily accessible in the HTML. SSR with Next.js provides bots with fully rendered HTML, reducing the chance that important content is missed.
• Improved Social Sharing: When you share a URL on social media, the sharing platform reads metadata from the page (like title, description, and preview images). With SSR, you can dynamically generate these tags for each page, allowing for richer, accurate previews when shared on platforms like Facebook, Twitter, and LinkedIn.

Step 1: Setting up the Next.js project

Open a terminal and write the command below:

npx create-next-app task-manager
cd task-manager

This creates a Next.js application inside the folder task-manager.

Install Firebase SDK

Install the necessary Firebase packages using the command below:

npm install firebase firebase-admin

Step 2: Implement Firebase and Firebase-admin

Create your Firebase Project

First of all, you have to create your project in the Firebase console.

Create a file called firebase.js inside the src/ folder or wherever you prefer.

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import 'firebase/auth';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
};

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);
const auth = getAuth(app);

export { db, auth };

Replace the placeholders with your Firebase configuration copied in the previous step.

Configure Firebase-admin SDK

First we need to get our private key from firebase.
In order to access to firebase from the server and use the Admin SDK we need to generate a private key:

• Go to Project Overview then Project settings.
• Go to Service accounts - Firebase Admin SDK then Generate new private key.
• Firebase generated a .json file with your credentials.

Finally, create the file firebaseAdmin.js and add:

import admin from 'firebase-admin';
import serviceAccount from '../serviceAccountKey.json';

if (!admin.apps.length) {
  admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),
  });
}

export const firestoreAdmin = admin.firestore();

serviceAccountKey.json is the .json file generated before.

Add a collection in your Firestore

Before going any further, we need to add a collection to our Firestore. To do so:

• Go to the Firestore Database and click + Start collection
• Add the collection ID tasks
• Add an auto-id.
• Add a field named title of type string and type the title you want.
• Add a field named content of type string and type the content you want.

We are now ready for the next steps.

Step 3: Building the page with SSR

In Next.js, pages inside the pages folder are treated as routes. Let’s create an example page that will fetch data from Firestore using SSR.

Creating a Firestore collection

In Firestore, create a collection called posts and add a few documents. Each document can have fields like title and content to serve as our sample data.

Creating the index.js Page with SSR

Create an index.js file in the pages folder:

import React from 'react';
import { firestoreAdmin } from '../firebaseAdmin';

const Home = ({ tasks }) => {
  return (
    <div>
      <h1>Blog tasks</h1>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            <h2>{task.title}</h2>
            <p>{task.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export async function getServerSideProps() {
  const tasksSnapshot = await firestoreAdmin.collection('tasks').get();
  const tasks = tasksSnapshot.docs.map((doc) => ({
    id: doc.id,
    ...doc.data(),
  }));

  return {
    props: { tasks }, // will be passed to the page component as props
  };
}

export default Home;

In this file:

• getServerSideProps is an async function specific to Next.js running on the server side. It is allowing us to fetch data directly from Firestore before rendering the page.
• The data is returned as props to the Home component, rendering the list of posts.

Step 4: Run the app

Start your Next.js app by running the command:

npm run dev

and visit http://localhost:3000/home

The page should display the list of tasks inside your collection with their titles and content.

Step 5: Deploying the app using Vercel

To deploy the app, you can use Vercel, which is built specifically for Next.js. Here’s how to deploy:

1. Push your code to a GitHub repository.
2. Go to Vercel, sign in with your GitHub account, and import the repository.
3. Vercel automatically detects that it’s a Next.js project and handles the build and deployment process.

Conclusion

We've now built a way to optimize SEO in your Next.js app by implementing Server-Side Rendering (SSR). With Server-Side Rendering in Next.js, paired with Firebase as a backend, you can create SEO-friendly, high-performance applications. SSR enables better SEO by delivering pre-rendered HTML, which search engines can easily index, while Firebase provides a scalable, flexible backend. This setup is excellent for projects that need fast initial load times and are aiming to improve search visibility.