Server Side Rendering (SSR) NodeJS and SEO concerns

Hi all!

Is there a way to build full Server Side Rendering (SSR) NodeJS sites?

Right now I know how to do metadata on server side, but I want to do ALL the document with SSR.

Yes, it’s true Google it’s better at this now cause they have a Rendered Index, BUT, after every major update they disable the Rendered Index and they use a simpler one for a while, that means that roughly 25% of the time Google dosn’t render well pages with Client Side Rendering. Also, you spend faster your crawl budget if your page have to be rendered on client side, that’s another important factor to want the page SSR.

Maybe there is some alternative? I’m more a SEO guy than a programmer and maybe I’m gonna say stupid things now:

A) Cache the page? My project uses SQLITE and redis cache seems to not work, I need to use SQL? Would that work like some sort of SSR?

B) Server actions to create a .html or .ejs document page? For example blog posts, product pages, etc… This way you would have the actual document page rendered.

Does PHP on wappler support full SSR? Maybe I should switch?

Another great addition to Wappler would be a way to work like a static content generator.

Thanks all!

With both NodeJS and PHP you will need to add server-side code yourself, in Node we have some UI for the metadata and some variable support. In NodeJS we use EJS as template engine, with that you can generate all code server side if you want, with PHP you will need to use PHP directly in your code.

With NodeJS there is more possible, you can add a server flow to a route and use the output of that action as data for the server-side rendering.

Thanks @patrick!

Could you point me better to some documentation or example of a server flow? Want to explore that idea until we have more tools on wappler to make SSR. :slight_smile:

We have 2 tutorials for SSR in NodeJS.

Wappler Documentation - Sever Side Rendering with NodeJS

Wappler Documentation - Using Server Connect Data for Server Side Rendering in NodeJS

For the server-side rendering EJS templates are used, you can find documentation at EJS – Embedded JavaScript templates.

1 Like

Yeah thats exactly what I have done so far. I explained myself poorly.

Wanted to say where I can find out more about this:

“you can add a server flow to a route and use the output of that action as data for the server-side rendering.”.

I have no clue where to start, server flow to a route?

image

Something like this? If yes wich should be the next step?

Thank you very much for your patience.

You can set the server action in the App Properties on the page

image

Output of the server connect should be directly accessible like <%= $_POST.input1 %>, you can also use expressions with <%= _('$_POST.input1.lowercase()') %>.

EJS templates are just javascript, so looping over data could be done like:

<ul>
<% for (const item of query1.data) { %>
  <li><%= item.label %></li>
<% } %>
</ul>
3 Likes

There are 3 modules on Server side/ database driven meta info in this course which may help

1 Like

Oh, that makes it in deed quite powerfull.

This is basically a repeater-region, right? Are these custom code elements than editable with the UI later on? Or do I have do to everything by code within there?

This would be especially important for any app-connect features like onclick-events, building filters for the repeater-region and so on. If I would loose Visual Builder for all of this, the most of the power of wappler would be lost…

Could you do an example for me? I’m very bad at javascript but with an example that I can copy I would be able to do it! :pray:


Did this test, first one :heavy_check_mark: is working (i did it with that fabolous panel in wappler)
image

Second one :x: is a repeater but I think its not posible to do it with the panel, but obviously i’m doing it wrong, could you assist me with a real example?

Remove the .data on the for loop, and inside probably use item.title

1 Like

Awesome! Thank you very much @Apple, is working! Full SSR page is getting closer. Now I can dream of all that being possible through the Wappler UI.

1 Like

Maybe the next big thing in Wappler could be much better SSR support?

4 Likes