Server Rendered React + Firebase Web App with NextJS.

[Updated on April 16, 2020]

I wanted to render some Firebase data with React & Typescript and have it indexed it by search engines. This was the fastest solution IMHO.

The Problem

While building web apps with React & Firebase can drastically cut down development time, if the app is meant to be indexed by search engines then you’re going to have a bad time.

Relying on services that server render React for you will not be enough if you want your firebase data to be indexed too.

This Solution

Server Render your React App with NextJS and inject initial Firebase data to your UI to make it available to search engines and to make your users wait less for their content.

Why not GatsbyJS ?

While Gatsby is great for static React website generation, I wanted the server-rendered data to change without re-building and deploying.

End Result here.

Code here.

The code includes :

• Github Authentication
• Firebase Reads on Client & Server
• Dynamic Routing with NextJS
• E2E Tests with Cypress
• Typescript — NextJS Integration
• Material UI - NextJS Integration
• Server Rendered Firebase Data Updated with realtime data when the page mounts on the browser
• Using styled-components with NextJS
• Deployment with Zeit’s now cli.

This post won’t go through detailed steps of implementation. Please post any questions in the comments or ping me on @rakannimer and I will update the post with the answers :)