netlify / netlify-plugin-gatsby

A build plugin to integrate Gatsby seamlessly with Netlify

Home Page:https://www.npmjs.com/package/@netlify/plugin-gatsby

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Bug]: Deploying an SSR powered Gatsby app via the Netlify CLI breaks SSR pages

timidak opened this issue · comments

Summary

I’m having issues with Gatsby SSR when I manually deploy the artifact to Netlify.
It seems that Netlify is not generating the __ssr function when I deploy manually via the CLI.
Steps I’ve taken:

  • Installing the @netlify/plugin-gatsby via the TOML
  • Installing the gatsby-plugin-netlify
  • Adding command and publish to the netlify.toml
  • Running the cli in a workflow via deploy --prod

The deployment happens and I can visit the site, but all the SSR pages are not available and redirect to the 404 page.

With automatic deployments (Git Bridge) it worked, but I need to get it running via the CLI.

Do you have any ideas what I’m doing wrong?

Gatsby Build Log:

> gatsby build

success compile gatsby files - 1.686s
success load gatsby config - 0.038s
success load plugins - 0.316s
success onPreInit - 0.001s
success initialize cache - 0.074s
success copy gatsby files - 0.166s
success Compiling Gatsby Functions - 0.244s
success onPreBootstrap - 0.269s
success createSchemaCustomization - 0.000s
success Checking for changed pages - 0.000s
success source and transform nodes - 0.046s
info Writing GraphQL type definitions to XXX
success building schema - 0.220s
success createPages - 0.002s
success createPagesStatefully - 0.073s
info Total nodes: 26, SitePage nodes: 4 (use --verbose for breakdown)
success Checking for changed pages - 0.000s
success onPreExtractQueries - 0.000s
success extract queries from components - 0.314s
success write out redirect data - 0.017s
success onPostBootstrap - 0.000s
info bootstrap finished - 5.995s
success write out requires - 0.006s
success Building production JavaScript and CSS bundles - 7.157s
success Building Rendering Engines - 40.032s
success Building HTML renderer - 8.055s
success Execute page configs - 0.056s
success Validating Rendering Engines - 1.835s
success Caching Webpack compilations - 0.001s
success run queries in workers - 0.020s - 3/3 147.77/s
success Merge worker state - 0.001s
success Rewriting compilation hashes - 0.001s
success Writing page-data.json and slice-data.json files to public directory - 0.008s - 3/4 524.83/s
success Building static HTML for pages - 2.466s - 3/3 1.22/s
info There are no new or changed slice html files to build.
success stitching slices - 0.004s
info [gatsby-plugin-netlify] Creating SSR/DSG redirects...
info [gatsby-plugin-netlify] Created 1 SSR/DSG redirect...
success onPostBuild - 0.007s

Pages

┌ src/pages/404.tsx
│ ├   /404/
│ └   /404.html
├ src/pages/index.tsx
│ └   /
└ src/pages/products.tsx
  └ ∞ /products/

  ╭────────────────────────────────────────────────────────────────────╮
  │                                                                    │
  │     (SSG) Generated at build time                                  │
  │   D (DSG) Deferred static generation - page generated at runtime   │
  │   ∞ (SSR) Server-side renders at runtime (uses getServerData)      │
  │   λ (Function) Gatsby function                                     │
  │                                                                    │
  ╰────────────────────────────────────────────────────────────────────╯
info Done building in 66.809144709 sec

Steps to reproduce

  1. Start a Gatsby Project
  2. Install the gastsby-plugin-netlify
  3. Prepare the toml (with the netlify-gatsby-plugin)
  4. Add SSG and SSR sites
  5. Deploy the site via the cli
  6. Try to access the SSR site -> see 404 page

A link to a reproduction repository

No response

Plugin version

Idk

More information about your build

  • I am building using the CLI
  • I am building using file-based configuration (netlify.toml)

What OS are you using?

Mac OS

Your netlify.toml file

`netlify.toml`
[build]
command = "npm run build"

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

Configuration

`gatsby-config.js` and options
import type { GatsbyConfig } from "gatsby"

const config: GatsbyConfig = {
  siteMetadata: {
    title: `Gatsby SSR Site`,
    siteUrl: `https://www.yourdomain.tld`,
  },
  graphqlTypegen: true,
  plugins: ['gatsby-plugin-netlify'],
}

export default config

Environment

Environment
# Paste output from `npx envinfo` here.

Gatsby info

gatsby info
# Paste output from `gatsby info` here.

Your _redirects file

`_redirects`
# Paste content of your `_redirects` file here

Builds logs (or link to your logs)

Build logs
# Paste logs here

Function logs

Function logs
# Paste logs here

I found a solution! 🎉

For anyone who has a similar problem and comes across this issue via Google. My main problem was that I built the app using gatsby build and not the netlfiy cli and the build command netlify build. After the modification, all the related functions (like __ssr) were generated. These were located in the .netlify folder. So when deploying the build now I had to deploy the public/ folder and also the functions under .netlify/functions and it worked!