React-starter-kit: Whats the best way to update metas when route data takes too long to load?

[ImanMh]

First of all, I love the idea of putting metas and SEO stuff in routes index file, but there is one drawback with this approach and that's when your metas are dependent to api data that take too long to load. In order to avoid blocking route changes I have to return route immediately and update UI when api data came. Unfortunately with this approach I can not update meta tags and title in my route. Is there any solutions to keep these meta stuff in route and not use DOMUtils inside component?
The only thing that come to my mind is to pass some kind of promise to onRender complete and continue on from there. But I'm not sure that's a great idea.

[frenzzy]

If data is not ready, what you want to show on the page?

[ImanMh]

The best idea I came up with is that it must be like page content being loaded. First you show a placeholder or a loading state then you show the actual content. Since metas do not matter, we can skip them but for title there should be a good placeholder before data loads. How do u think these scenarios can be handled?
to be honest I'm thinking route is the best place to keep these logic but as you see it's not always possible (specially if these tags depend on some kind of user actions). I have also seen #412 and other helmet related issues.

[frenzzy]

There are no sense to display a page without any data. At least the basic page information (like title) must be loaded BEFORE displaying the page. It is also important for SEO because SSR should return html with proper title and meta tags but not only loader text. Meanwhile heavy page components could be lazy loadable and request its data asynchronously.

But if you just want to show page loading state for a user then it is better to use a common approach for all your pages, for example: https://github.com/kriasoft/react-starter-kit/issues/1033#issuecomment-267562514

[ImanMh]

this is the placeholder :

here is what user sees when page loads:

Before we start doing this, we use to take all page data and then navigate the user to the page, but what started to happen is that users often don't pay attention to loading bars and start clicking on links again and again and they end up with a bad experience, so what we did was to show them the page placeholder. Unfortunately doing this is against the practice of keeping SEO stuff in rout which I really liked. What I'm trying to conclude is that should we say goodbye to metas in routes and implement something that supports all scenarios?

[frenzzy]

You can try to show more notable page loader or even use page change animation which may wait in the middle state while data is loading. Somewhere was a research how placeholder pages affects users and if I remember right they are not so good in terms of conversion or something like that.

What I'm trying to conclude is that should we say goodbye to metas in routes and implement something that supports all scenarios?

You will lose some SEO score then, which may affect the site position in search engines. I would configure proper caching for SSR to improve score and first visit UX.

[ImanMh]

I've already fixed the SEO issue. If you refresh (browse like google bot), it will wait until all page data is loaded so SEO tags are successfully rendered. But if you start to navigate client side it will show you placeholder pages so you get immediate routing feedbacks when you click on links. I think as a boiler plate we should try to implement modules that can supports most scenarios. If you think it's the correct decision I can work on adding helmet to the project. If you think adding 20k helmet is not the right decision we can implement something inside this project and write some examples to make it clear for others as well.

[minhnguyenwp]

Could you explain how can [react-starter-kit] support SEO to main content, images, products ... articles. if they are loaded in DidMount, does SSR help that.
. I see in NEXT JS , it has getInitialProps to load data from server side and render from server also.
. I wonder how can [react-starter-kit] support SEO.

Please explain because i chose [react-starter-kit] and i really want to make my web app SEO friendly with all content. Google can index all my web's content.

[frenzzy]

@minhnguyenwp you must pass all necessary props to your component inside route's action method, see home route as an example

[ImanMh]

@minhnguyenwp React-starter-kit is one of the mos SEO friendly boilerplates and it has many features that can fix most of SEO concerns. We have improve it in Reyhoon.com and we were so satisfied with it until we decide to pre route before API responses. That's where things get a little hairy and that's why I opened up this issue. I'm still waiting for @frenzzy and other major developers to say their opinion about this issue. My opinion is that I we can do better than what we currently have.

[frenzzy]

@ImanMh I think the most important issue with meta tags is #1319. Changing meta tags in runtime (after route change) usually is unnecessary. But if we can solve both issues with one tool it would be great! Not sure about react-helmet because for me it looks like a bit overhead and I believe it could be solved by a custom few lines component with a new react 16 "return an array" feature. Anyway if you solved the problem with any tool, PR is welcome!

[ImanMh]

@frenzzy which branch should I send my PR to?

[frenzzy]

to master, btw from some time github allow us to change target branch later after creating a PR