search

gatsbyjs / gatsby-starter-shopify

A Gatsby starter using the latest Shopify plugin showcasing a store with product overview, individual product pages, and a cart
https://shopify-demo.gatsbyjs.com/
BSD Zero Clause License
311 stars 137 forks source link

"There's not a page or function yet at /search" #57

Open MaSchVam opened 2 years ago

MaSchVam commented 2 years ago

With the Gatsby 4.x update for this starter, the application now 404's in development mode if you press the back button in your browser after having submitted filters on the search archive page.

This is reproduced by:

1: Running gatsby develop

2: Selecting any method of filtering (so anything that adds URL parameters) on the archive at "/search".

3: Visiting a product page that is a result of this filtering.

4: Navigating back to the search archive with the browser back button.

This now gives you the Gatsby development 404 error message, which looks like this:

404

I noticed this, since I was trying to migrate a Gatsby 3.x.x Shopify application to v4 - and I can therefore confirm that this wasn't happening before the v4 update.

Tested with a clean clone of the main repo, with my own access tokens.

mikejw commented 2 years ago

My understanding is that '/search' is now server-side rendered. I'm curious to know how this should be deployed on a manual deployment and not using Gatsby cloud!

mikejw commented 2 years ago

Maybe gatsby serve

MaSchVam commented 2 years ago

My understanding is that '/search' is now server-side rendered.

Yes, I see that the approach towards fetching products has changed from the 3.x version (Understandably). I think the bug I describe, is somehow Gatsby related, though. If you simply resubmit a URL which makes your development server 404 under the conditions that I describe above - the correct view is actually rendered. So, if you simply hit enter after clicking in the address bar when you get this error, you are taken to the correct state of the application.

Whether or not this is related to the SSR that has been implemented - that I don't know enough about Gatsby to speak on.

I'm hoping that there are brighter minds here, who can provide some insight into why this might happen when a browser "back" button is clicked only. Could it perhaps be 'Back/forward cache' related?

MaSchVam commented 2 years ago

I will also just note, that the exact same thing happened in the application that I was trying to migrate, which was how I noticed. No SSR on any page there. Upgrading from Gatsby v3 to v4 seems to have caused this issue.

mikejw commented 2 years ago

I'm not having this issue with the back button (when using gatsby serve). However I've noticed that I can't use a frontend proxy (like nginx) it always returns a 404 when attempting to reach /search. If I run gatsby serve by itself and access via port 9000 in the browser the search page functions as it should.

mikejw commented 2 years ago

If I do a gatsby build and deploy those files then /search still 404s.

crock commented 2 years ago

If I do a gatsby build and deploy those files then /search still 404s.

Keep in mind, if you aren't deploying to Gatsby Cloud, you are going to need to either deploy to a provider that supports Gatsby's runtime SSR functionality that was introduced in v4 such as Netlify with the plugin @netlify/plugin-gatsby and gatsby-plugin-netlify. Make sure to get the beta version of each.

If you are deploying to a VPS, you'll need to run a node process via gatsby serve, which has been re-worked in v4 so now it is designed for production use.

MaSchVam commented 2 years ago

Before this issue gets derailed, I'd just like to reiterate that the 404 issues i describe in my OP occurs even though SSR functionality isn't implemented. Updating this starter to Gatsby V4, without implementing the SSR changes that were made to search.jsx in conjuction with the v4 update, still produces this behavior.

The question is, if this is actually a framework issue?

mikejw commented 2 years ago

If I do a gatsby build and deploy those files then /search still 404s.

Keep in mind, if you aren't deploying to Gatsby Cloud, you are going to need to either deploy to a provider that supports Gatsby's runtime SSR functionality that was introduced in v4 such as Netlify with the plugin @netlify/plugin-gatsby and gatsby-plugin-netlify. Make sure to get the beta version of each.

If you are deploying to a VPS, you'll need to run a node process via gatsby serve, which has been re-worked in v4 so now it is designed for production use.

thanks. It took a while to get that clarified regarding VPS use!

yohdev-von commented 2 years ago

I am also having this issue. Locally search page exists. After pushing to netlify, it builds but the search page comes back as a 404.

lambdadev007 commented 2 years ago

I am also having the same issue. search page works locally but gives me 404 page on Netlify.

lambdadev007 commented 2 years ago

@yohdev-von in my case, The server side rendered pages that use getServerData works fine locally. it only gives me 404 page on Netlify. I was able to address this issue by installing @netlify/plugin-gatsby (this one will be installed automatically for Gatsby sites on Netlify) and gatsby-plugin-netlify plugins. The reason why you get 404 on production is that for Server side rendering you need to have running NodeJS server(gatsby serve). FYI - https://github.com/netlify/netlify-plugin-gatsby/#readme