Question about SSR

[alexluong]

Hi there. I worked on gatsby-plugin-firebase and intend on revamping it for a better DX. That's why I'm hanging out over here to take some inspiration.

My question is about SSR. As I'm reading this code, it seems like in the home page, you're not rendering anything if Firebase is not initialized.

How would this affect SSR and SEO? Doesn't that mean the generated HTML would just be blank, defying the main benefit of Gatsby?

Would love to learn your take on this! Thank you.

[epilande]

Hey @alexluong, sorry for the late reply, just got back from a vacation.

Good question. You're right, that page would be blank until the session is loaded.

It's a demo page and it's a naive way to handle rendering..Rather than returning null at the top, we can wrap the conditional on components that depends on user session.
Consumers of this library need to make that decision and can handle this however they want to.

As for SSR, you can "View Page Source" to see what the server sends down as HTML.

• Home Page: view-source:https://gatsby-theme-firebase.netlify.com/
• Firestore Page: view-source:https://gatsby-theme-firebase.netlify.com/firestore/

As you've mentioned the Home page is blank, though if you view page source for the Firestore page, that has the HTML and CSS needed for that page and anything dependent on user session is not rendered.

As for SEO, it's sort of impossible to SSR any dynamic user content since Gatsby is a static site generator and generates the HTML at build time. So SEO will work for your static content but not so great on the dynamic things.

With that said, you can still SSR the application shell. Though if your app has a lot of dynamic user generated content that you want to be searchable (for example apps like github, reddit, or stackoverflow), then it will probably be better to use something like next.js or another framework that's built for server-rendered apps.

That's my take on it, hopefully it makes sense ✌️