Pages are Client Side Rendering #29478

xerenahmed · 2021-02-12T13:18:44Z

xerenahmed
Feb 12, 2021

Description

My post pages like CSR, no content without open browser (only <div id="___gatsby"></div>), no react-helmet tags in head.
It's not helpful for SEO.

Steps to reproduce

I use curl for reproduce. Like curl url

This page works: https://ulasimsaati.online/c/istanbul-iett
This page works: https://ulasimsaati.online/
Content pages doesn't works: https://ulasimsaati.online/p/1-kirazlitepe-acibadem-kadikoy-otobus-hatti-hareket-saatleri

Expected result

tags in head and content in body.

Actual result

Only responsed in body:

<body>
<div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"></div>
  <div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true">
  </div>
</div>
<script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/p/10-uckuyular-iskele-konak-otobus-hatti-hareket-saatleri";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-64a2a5ba1fc84f7adec6.js"],"app":["/app-e876b36d5e17f5afd208.js"],"component---cache-caches-gatsby-plugin-offline-app-shell-js":["/component---cache-caches-gatsby-plugin-offline-app-shell-js-ad6431e4664bcf916d19.js"],"component---src-pages-404-js":["/component---src-pages-404-js-7bd95d465f00aef1fee7.js"],"component---src-pages-ara-js":["/component---src-pages-ara-js-0e631b79654e1fee8a44.js"],"component---src-pages-category-js":["/component---src-pages-category-js-cdee42fe1116e7dc552c.js"],"component---src-pages-hakkimizda-js":["/component---src-pages-hakkimizda-js-61979a8daa8ef3dafae2.js"],"component---src-pages-iletisim-js":["/component---src-pages-iletisim-js-50ab1b31b352249b7137.js"],"component---src-pages-index-js":["/component---src-pages-index-js-d08c7cdea9219b85ca5f.js"],"component---src-pages-sitemap-js":["/component---src-pages-sitemap-js-b73b753dcde1413002c8.js"],"component---src-template-category-js":["/component---src-template-category-js-3d0b28642470149c39b3.js"],"component---src-template-content-js":["/component---src-template-content-js-22eb4b0548a5ab5b10c8.js"]};/*]]>*/</script><script src="/polyfill-64a2a5ba1fc84f7adec6.js" nomodule=""></script><script src="/component---src-template-content-js-22eb4b0548a5ab5b10c8.js" async=""></script><script src="/18aebf820960856b0a8c09dc2b9634c1a5413131-ee6a494ec11da6bae6c7.js" async=""></script><script src="/8ee3f836fe807ce8df926d2785fd1642ac15a4dc-249af3364b1892905291.js" async=""></script><script src="/styles-7d4153d260c0197f0043.js" async=""></script><script src="/app-e876b36d5e17f5afd208.js" async=""></script><script src="/framework-fc1db31f678bd7aa66d8.js" async=""></script><script src="/webpack-runtime-c6ac144383c278e349da.js" async=""></script></body>

Environment

System:
    OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Xeon(R) CPU           E5430  @ 2.66GHz
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v12.13.1/bin/yarn
    npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
  Browsers:
    Chrome: 88.0.4324.150
    Firefox: 85.0.1
  npmPackages:
    gatsby: ^2.32.3 => 2.32.3
    gatsby-image: ^2.5.0 => 2.11.0
    gatsby-plugin-manifest: ^2.6.1 => 2.12.0
    gatsby-plugin-material-ui: ^2.1.10 => 2.1.10
    gatsby-plugin-offline: ^3.4.0 => 3.10.0
    gatsby-plugin-react-helmet: ^3.10.0 => 3.10.0
    gatsby-plugin-sass: ^3.0.0 => 3.2.0
    gatsby-plugin-sharp: ^2.14.1 => 2.14.1
    gatsby-plugin-sitemap: ^2.8.0 => 2.12.0
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.20 => 1.1.20
    gatsby-remark-autolink-headers-turkish: 3.1.0 => 3.1.0
    gatsby-source-filesystem: ^2.5.0 => 2.11.0
    gatsby-transformer-remark: ^2.11.0 => 2.16.0
    gatsby-transformer-sharp: ^2.12.0 => 2.12.0

Answered by xerenahmed

Feb 17, 2021

Hi, I removed these codes, and the problem solved.

const ExampleComponent = ({ location }) => { // don't use location prop
   if (!location) return "" // remove these line

   return <p>{ location.href }</p>
}

View full answer

LekoArts · 2021-02-12T15:21:08Z

LekoArts
Feb 12, 2021

You're using a Service Worker, have you read this?
https://www.gatsbyjs.com/plugins/gatsby-plugin-offline/#empty-view-source-and-seo

1 reply

xerenahmed Feb 12, 2021
Author

  System:
    OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Xeon(R) CPU           E5430  @ 2.66GHz
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v12.13.1/bin/yarn
    npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
  Browsers:
    Chrome: 88.0.4324.150
    Firefox: 85.0.1
  npmPackages:
    gatsby: ^2.32.3 => 2.32.3
    gatsby-image: ^2.5.0 => 2.11.0
    gatsby-plugin-manifest: ^2.6.1 => 2.12.0
    gatsby-plugin-material-ui: ^2.1.10 => 2.1.10
    gatsby-plugin-react-helmet: ^3.10.0 => 3.10.0
    gatsby-plugin-sass: ^3.0.0 => 3.2.0
    gatsby-plugin-sharp: ^2.14.1 => 2.14.1
    gatsby-plugin-sitemap: ^2.8.0 => 2.12.0
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.20 => 1.1.20
    gatsby-remark-autolink-headers-turkish: 3.1.0 => 3.1.0
    gatsby-source-filesystem: ^2.5.0 => 2.11.0
    gatsby-transformer-remark: ^2.11.0 => 2.16.0
    gatsby-transformer-sharp: ^2.12.0 => 2.12.0

I removed it now but nothing changed. Deploy link: https://ulasimsaati-dezfyma6i.vercel.app/p/10-uegtarshastanesi-atasehir-bostanci-otobus-hatti-hareket-saatleri

KyleAMathews · 2021-02-12T17:41:22Z

KyleAMathews
Feb 12, 2021

I don't see the service worker now but it's probably still running on your machine. To make sure it's removed from everywhere you'll want to add this plugin gatsby-plugin-remove-serviceworker

3 replies

xerenahmed Feb 12, 2021
Author

still same, packages are now

    gatsby: ^2.32.3 => 2.32.3
    gatsby-image: ^2.5.0 => 2.11.0
    gatsby-plugin-manifest: ^2.6.1 => 2.12.0
    gatsby-plugin-material-ui: ^2.1.10 => 2.1.10
    gatsby-plugin-react-helmet: ^3.10.0 => 3.10.0
    gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0
    gatsby-plugin-sass: ^3.0.0 => 3.2.0
    gatsby-plugin-sharp: ^2.14.1 => 2.14.1
    gatsby-plugin-sitemap: ^2.8.0 => 2.12.0
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.20 => 1.1.20
    gatsby-source-filesystem: ^2.5.0 => 2.11.0
    gatsby-transformer-remark: ^2.11.0 => 2.16.0
    gatsby-transformer-sharp: ^2.12.0 => 2.12.0

Deploy link (have issues in my local too): https://ulasimsaati-dl4qeulc3.vercel.app/p/10-uegtarshastanesi-atasehir-bostanci-otobus-hatti-hareket-saatleri

KyleAMathews Feb 12, 2021

Just to check, did you add it to your gatsby-config.js file?

Just to show what I'm seeing — there's no sw being registered. You can check in your devtools to see what sw was registered and when

xerenahmed Feb 12, 2021
Author

yes, I added it to the config. But I saw this link still respond worker: https://ulasimsaati-dl4qeulc3.vercel.app/sw.js

KyleAMathews · 2021-02-12T18:48:33Z

KyleAMathews
Feb 12, 2021

Yeah that's as expected — in order to remove an old sw, you have to add a new one which removes the old one — which is weird I agree 😂 -- Kyle Mathews Blog: *http://bricolage.io <http://bricolage.io>* Twitter: http://twitter.com/kylemathews

…

On Fri, Feb 12, 2021 at 10:46 AM Eren A. Akyol ***@***.***> wrote: yes, I added it to the config. But I saw this link still respond worker: https://ulasimsaati-dl4qeulc3.vercel.app/sw.js — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#29478 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAARLBYX27DVFNLXRCKPH23S6VZOTANCNFSM4XQ3LQUQ> .

0 replies

xerenahmed · 2021-02-15T08:07:27Z

xerenahmed
Feb 15, 2021
Author

The problem still continues :(

0 replies

xerenahmed · 2021-02-17T09:04:00Z

xerenahmed
Feb 17, 2021
Author

Hi, I removed these codes, and the problem solved.

const ExampleComponent = ({ location }) => { // don't use location prop
   if (!location) return "" // remove these line

   return <p>{ location.href }</p>
}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Pages are Client Side Rendering #29478

Uh oh!

{{title}}

Uh oh!

Replies: 5 comments 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Pages are Client Side Rendering #29478

Uh oh!

xerenahmed Feb 12, 2021

Description

Steps to reproduce

Expected result

Actual result

Environment

Replies: 5 comments · 4 replies

Uh oh!

LekoArts Feb 12, 2021

Uh oh!

xerenahmed Feb 12, 2021 Author

Uh oh!

KyleAMathews Feb 12, 2021

Uh oh!

xerenahmed Feb 12, 2021 Author

Uh oh!

KyleAMathews Feb 12, 2021

Uh oh!

xerenahmed Feb 12, 2021 Author

Uh oh!

KyleAMathews Feb 12, 2021

Uh oh!

xerenahmed Feb 15, 2021 Author

Uh oh!

xerenahmed Feb 17, 2021 Author

xerenahmed
Feb 12, 2021

Replies: 5 comments 4 replies

LekoArts
Feb 12, 2021

xerenahmed Feb 12, 2021
Author

KyleAMathews
Feb 12, 2021

xerenahmed Feb 12, 2021
Author

xerenahmed Feb 12, 2021
Author

KyleAMathews
Feb 12, 2021

xerenahmed
Feb 15, 2021
Author

xerenahmed
Feb 17, 2021
Author