DSG is great to decrease your build times if you have a lot of pages that aren’t receiving much traffic useful for your SEO rankings.
SSR is something I’ve been playing around with as it is perfect for fetching and shaping data in real-time without impacting the client’s browser performance. This is great if you have a dashboard or a page builder that requires a fresh initial data fetch on load.
Under the hood, Gatsby will find page templates containing the getServerData() and render them server-side when the page is requested. This functionality behaves like the SSR that happens at build time but at runtime.
If any of the code used in your page template relies on the browser e.g. window then you will need do a check that it’s available. Otherwise, you will get a bunch of nasty “Window is undefined” errors during the gatsby serve process. To add to the confusion, they won’t be present on gatsby develop so it’s only when you are deploying that your site will stop working — boo! It’s to fix as outlined here. Or my preferred option is a simple short-circuit. const isBrowser = typeof window !== "undefined"
export default function MyComponent() {
let loggedIn = false
isBrowser && window.localstorage.getItem("isLoggedIn") === "true"
return <div>Am I logged in? {loggedIn}</div>
}