4

My site deployed is deployed on Netlify and when clicking on any link on the landing page, the url updates but the content does not show unless i refresh the page. note on my local development server this is not an issue. Its only an issue on the live site

Note: there is not much literature on this. On the https://github.com/gridsome/gridsome/issues , Issue #324 and issue #337 both raised the same issue though the answers are not applicable in my project.

1)check out the live site at ezrasnashim.netlify.com. Try click on any links on the landing page

Environment

@gridsome/cli v0.3.1 gridsome v0.7.12

browser: firefox developer browser, google chrome browser

Edward S
  • 820
  • 1
  • 7
  • 12

1 Answers1

4

After going through the site, I found the issue was some invalid HTML, which the browser fixes [changes around], which changed the actual DOM from the virtual DOM, which caused the Vue hydration to break.

See Vue SSR hydration caveats

yiddishe-kop
  • 558
  • 1
  • 7
  • 11
  • you are a genius. thanks. though i dont understand why there were no hydration issues in development. On my local server the site was running fine – Edward S Apr 02 '20 at 12:35
  • I think "gridsome development" runs stuff in memory/on the fly so there are no hydration issues. You can simulate netlify by using "gridsome build" and then serve the dist folder locally, with, for example "http-server". – TomHells Jun 01 '20 at 10:54