SSR Gatsby 5 on Netlify returns 404

Support
,
1

Hello!

I’ve got a Gatsby 5 website hosted on netfliy. Everything works great with SSG but I wanted to add a page with server side rendering.
If I add getServerData on a page, on local works great but when I deploy on netlify I get a 404 on that same page.
I tried to install gatsby-plugin-netlify but it still doesn’t work.

This simple page: https://github.com/Balastrong/blog/blob/main/src/pages/ssr.tsx
Is deployed here: https://leonardomontini.dev/ssr/
And here’s the 404

Thank you!

3

I don’t see the linked page in GitHub anymore. Has something changed?

4

Hey, thanks for the reply!

You’re right, sorry, I forgot to update it here.

I read that the Essential Gatsby plugin was installed automatically but apparently it was not. Adding it in the netlify.toml file made it.

[[plugins]]
package = "@netlify/plugin-gatsby"

Error 404 went away, but then came error 500. It turned out I had to move the graphql query from outside the component from inside. This is the commit that made it.

(that page no longer exists too as it was one more experiment, I was in trial-and-error at that point)

That said, we can consider the issue here solved as SSR is kind of working now. Since we’re here, I think I have a problem with cache now but that would be a new topic, maybe I can open a new post here on the forum.

This is my getServerData but I see getVideos is called everytime, not sure what is wrong.

export const getServerData = async () => {
  const videos = await getVideos();

  return {
    props: {
      foo: "bar",
      videos,
      headers: {
        "Cache-Control":
          "public, max-age=600, s-maxage=600, stale-while-revalidate=300",
      },
    },
  };
};
5

We can continue discussing here since this one already has the details.

What exactly is the problem?

6

Thanks!

Maybe I understood it wrong, but I would have expected with this configuration (from the snippet in the previous reply) that the function getServerData is not executed again for 10 minutes after the first run.

 headers: {
        "Cache-Control":
          "public, max-age=600, s-maxage=600, stale-while-revalidate=300",
      },

In my code, there’s an API call to google and I see that every time I refresh the page, a call is made. Shouldn’t caching the result avoid this?

7

Netlify doesn’t respect user-set stale-while revalidate, and you should most likely not set custom cache headers when using functions, as it could potentially break your site’s cache. Netlify provides On-Demand Builders that accept a custom revalidate time to provide a similar functionality.

However, since Gatsby doesn’t support revalidate-based regeneration (at least I could not find any such information), we currently do not generate any On Demand Builders for Gatsby like we do for Next.js.

8

So is there any way to support caching on SSR with Gatsby?

The goal is to avoid calling the API every time.

9

Hi you could try the built-in caching. Gatsby caches for 10 minutes you can adjust the time frame or you can use browser caching.

10

Hey SamO, thanks for the answer!

Where can I find the doc for caching with gatsby on SSR?

11

Here is some documentation I found on SSR Server-Side Rendering API | Gatsby

12

Thank you! It was the same documentation I found, that’s why I added this in the return of getServerData:

 headers: {
        "Cache-Control":
          "public, max-age=600, s-maxage=600",
      },

But apparently it is not working, I see the API called in getServerData every time the page is loaded (hence, cache didn’t work)

14

As mentioned, SWR headers would not be respected and any custom cache control headers are not recommended (especially for server-side stuff), so currently you cannot set a timeout for the cache - the SSR will happen on every request.

15

Ok, thanks for the answer :slight_smile: