How to properly run gatsby with SSR in a production environment

Question

I have trouble finding any useful documentation on how to properly set up a gatsby side that is using SSR (server side rendering) in a custom production environment (not Gatsby Cloud or Netlify)

In their documentation for SSR there's a section

Server-Side Rendering requires a running NodeJS server. You can put NodeJS running gatsby serve behind a content delivery network (CDN) like Fastly, however that also requires additional infrastructure (like monitoring, logging, and crash-recovery).

So my general idea would be to put this all inside some Docker container and run gatsby serve

However according to the documentation for gatsby serve (https://www.gatsbyjs.com/docs/reference/gatsby-cli/#serve )this is not supposed to be used for production

At the root of a Gatsby site, serve the production build of your site for testing

Is it ok to use serve production? What kind of security issues do I need to keep in mind when using it? Is there a detailed documentation how to set this up in a custom environment?

Madelina

no. I went with the accepted answer and compile the static files and then used an express server for serving – Madelina

Answer 1

No docs on the SSR mode on custom servers. But in general you'd want to use something like Express to serve the static files (not gatsby serve) and then you can look at gatsby-plugin-netlify and gatsby-plugin-fastify for inspiration as they support SSR.

The serving and runtime SSR logic you’d have to write yourself using those plugins I mentioned as inspiration. The framework doesn’t handle the serving of the app, platforms like Gatsby Cloud and Netlify do. Or in your case, a custom server.

You might find this useful https://github.com/wille/gatsby-plugin-express Should also know there are lots of super easy ways to deploy (Gatsby Cloud, Netlify, Vercel) so you don’t need your own server. The reason you can’t use serve command is things like caching, redirects, headers, etc.

Accordion

In Vercel SSR doesn't seem to work. – Ablation

Answer 2

I had the same problem and could not find one complete solution out there. The closest solution, is to use gatsby-plugin-fastify. It has a lot of nice features. However, it came with some drawbacks. It did not handle fallback-routes as gatsby-cloud does. Wich is quite easy to fix.

I made some modifications to the plugin. And bumped the fastify packages. Until the moment when that can be merged with the original contributors repo, you can use my version of the package. gatsby-plugin-fastify-klyngen.

Using the original fastify plugin is very easy.

1. Install the package
   npm install gatsby-plugin-fastify fastify

2. Add the fastify-plugin to your gatsby.config

  plugins: [
    {
      resolve: `gatsby-plugin-fastify`,
      options: {
        features: {},
      },
    },
    ...otherPlugins
  ]

1. Run the server
   npx gserve

Fastify should be behind a proper web-server like Nginx. I also suggest putting the server behind a CDN or a cache for better performance.

EDIT: gatsby-plugin-fastify now supports fallback-routes.

Abbey

gatsby-plugin-fastify 0.9.5 fixes most of the redirect issues – Corpus