SSR Content Doesn't Match Content on Client

[atyantik]

SSR Content Doesn't Match Content on Client

[tirthbodawala]

@dav-is I must agree the link you provided above is really helpful, I changed from render to Hydrate and the performance increased by 8%. That's a biggie. Thanks again. Will update master soon.

[tirthbodawala]

Hi @dav-is thanks for reporting the updates regarding SSR in react 16. I am definitely going to address it today.
But regarding the issue "SSR content Doesn't Match Content on Client" well its Folding, its a provided feature with the framework very essential for SEO
Have a look at the following link:
https://seo-hacker.com/above-fold-affects-seo/
We need to only transmit data that is in view port other data can be loaded later, this is to improve server performance and load the data later till the user is looking at above the fold content.

The Fold component is located in
src/core/components/fold
And our home component is using the fold component as

....
<Fold>
    <p>Some other paragraph</p>
    <picture of mario />
</Fold>
....

But am definitely going to give a look into SSR with React 16. Thanks for reporting.

[dav-is]

That’s an interesting concept I’ve never heard of. Makes sense, although it’s fairly obvious to the user that this is occurring. Maybe you should add more content to the example site so the users don’t notice the page change for seemingly no reason? Also, search engines that do not support JavaScript can’t see the remainder of the page. Isn’t this one of the primary reasons SSR is used?

[tirthbodawala]

@dav-is Most of the search engines does support loading deferred JavaScripts, Thus it will wait till the JavaScript mentioned at bottom of page is loaded, but that is not the case with all Search Engines. So the folding of content is optional. If its really important to the user, then it should not be folded.

But I wanted this framework to offer most of the SEO tools easily available for best performance.
With the Fold component one can place a placeholder like "Loading fold content... Please wait..." or a simple loader so user knows that there is going to be more once the whole page is loaded.

As google says "Only the view port is important for indexing the whole site."

We are working on documentation and writing wiki, you can check out 2/3 pages we created. We are working a lot on this boilerplate to test it properly and provide end-users with best examples.

[tirthbodawala]

@dav-is for full performance of PWA please check that you are running on HTTPS and HTTP2 protocol.