Meta tags not updated on internal link

[mebeingken]

Wappler Version : 5.5.3
Operating System : mac
Server Model: node
Database Type:
Hosting Type:

Expected behavior

When navigating to a new page using an internal link, the meta tags should be updated

Actual behavior

The meta tags do not update. If the page is refreshed and loaded along with the layout, the meta tags are properly inserted.

How to reproduce

Layout template data

Content page server side rendering:

:

The title tag is empty if the page is reached via a nav link with internal true:

<a class="nav-item nav-link " dmx-text="navigation_label.capitalize()" dmx-bind:href="'/'+type" dmx-class:active="browser1.location.pathname.contains(type) " internal="true">CMS page(s)</a>

If the page is hard loaded or the internal parameter is removed, then the title tag is filled in properly:

[sid]

From what I recollect from a community discussion, its not a bug.
This is how SPA works. The crawlers from search engines go to each URL as a new page load, which would populate the correct meta data for them.
On page, you just need to ensure to set the tab title when calling browser.goto as param & via title attribute in href with internal.

[mebeingken]

That’s not what I’m reading

[sid]

That looks like a mistake. @Teodor
The first para says meta tags change on load of content page - which is incorrect from what I know.

And second para says that because crawler see links as separate full links SEO would be great - which is the correct part.

[Sorry_Duh]

I believe @mebeingken is correct on this been a bug im pretty sure in the past I had this working in Node Js without having to hard refresh the page just clicking the link to partial refresh also changed the title.

Another reason I think it is probably a bug is if you use a on click event and trigger a browser goto, setting the title here along with internal works as expected

[sid]

@Sorry_Duh

past I had this working in Node Js without having to hard refresh the page just clicking the link to partial refresh also changed the title.

If by link you mean an anchor tag, then it still works. All you need to do is set the title attribute to what you want the tab title to be on click of the link.

[Sorry_Duh]

Yeah I was referring to an anchor tag looks like adding the title attribute to it does indeed work to change the title. Looks like its just something to do with the template data / server side data which aren’t updating like they used to.

[sid]

@Sorry_Duh

template data / server side data which aren’t updating like they used to.

They never used to update, since I started using NodeJS with Wappler. It has always been like it is right now.

In the very initial versions, there used to be content pages without layout pages - which was the way to build regular apps. And using layout/content page setup for regular & SPA both.
Later, standalone content pages were removed. You probably remember the content page setup where server side data bindings would update, and not SPA?

[patrick]

You have SSR (Server-Side Rendering) and CSR (Client-Side Rendering). The Server-Side Data is rendered on the server when a page is requested, it will retrieve the data on the server-side and insert it in the generated html that is being send to the client. On the client when you follow a link with the internal attribute on it, it will do a partial page load. The partial page only contains the part of the view on your page, it doesn’t update the head (meta data) of your page. For the client this doesn’t matter since the meta data normally isn’t used here, if you want the full page to update with metadata then remove the internal attribute.

[patrick]

We will update the docs to make the difference clearer. The term Hybrid also changed over time, when we implemented it, the term was used for sites that combined SSR and CSR. Now it is explained a pre-render of client-side components that render both on server and client.

[AdrianoLuiz]

hello @patrick does this mean that we will be able to use SSR in more parts of the project? as well as next.js? this would be wonderful for performance and also to decrease the amount of javascript generated on the screen.

[patrick]

You can’t compare it with since the used Frameworks are very different. In React is used as a Framework. With React a webpage is empty and the whole UI is generated by the Framework, Next.js prerenders the HTML on the server so that the app shows faster to the user. It does some more optimizations, but in general it’s like that. With Wappler you just generate your HTML, it is not generated on the client by a Framework. App Connect makes your page interactive and handles data bindings. So the prerendering is not needed with Wappler websites. The SSR part is like in the early days with PHP and ASP, you can insert dynamic data into your page, and it is rendered on the server before sending it to the client. This is useful for static data that comes from your database, like the metadata, but you can also use it to generate content on your page. The advantage is that you don’t have to do a request from the client after the page is loaded to request that data but directly generate it on the server before the page is being send to the client. Another advantage is that not all search engines can execute JavaScript and will be able to read the content that was generated on the server (The reason why sites like Facebook is not able to read the metadata when you have it dynamic generated on the client).