Full Server Side Rendering in nodeJS

[master_of_web]

Hi

I’m not sure if I’m looking for the wrong thing or just too unexperienced in nodeJS to understand it, but I can’t wrap my head around how to build website in nodeJS that is fully rendered serverside.

I’m trying to build a very simple website (like a wordpress blog) with post-lists and post-detail pages. The goal is to have to whole html served serverside, just like a php website. It’s mainly because of SEO and accessibility.

I have read the documentation https://docs.wappler.io/t/sever-side-rendering-with-nodejs/21650
But this only shows the process for meta-data. But how do I do this for all the other things in the template that are normally pulled by server connect components?

Am I also doing this with the server side data section? But how? I can only select one Server Connect, and I already use this for meta data or login-verification.

Is there even a straight forward way to do this in nodeJS? Or would I be better of to stick to PHP for this little project, since there is almost no clientside interaction anyway?

[Apple]

I just came to say I’m experiencing exactly the same struggles as you. It seems Wappler’s designed to work over API requests/client-side rendering instead of full server-side rendering. You can use EJS template functions but it’s not as intuitive. And that server side data limitation for just one server action is mad!

Hopefully someone more experienced can chime in

[sid]

You can actually send anything you want from server side SA, and use a Server Side Binding on the page to render it.
But, you will loose all client side App Connect UI-based functionality. You can use App Connect stuff, but it will have to be coded in your server side HTML string that you send in the response of server side SA… And it should render fine on client side.

You can also take a look at one of the examples here on how you can modify NodeJS Wappler app to work as you need: MODULE: Generate PDF from EJS Template with Puppeteer

[karh]

Perhaps this helps? With these steps you should be able to server side render anything.

I do wish the wappler devs start supporting it more in the UI though!

How to send a query parameter to a (server side data) server action and use the output through EJS

It took some time to understand server side data, I figured I’d share my documentation to help others In this example I’m loading the server action on a content page. I want 2 things: to have the output of a particular server action available even before the page is loaded. (In my example, the output is an account_id of a stripe connected account. But you can use this flow for any data that you want from the database BEFORE the page is rendered.) to use the query parameter of t…

[George]

Maybe this will help:

Using Server Connect Data for Server Side Rendering in NodeJS

You already know how to setup your pages to use Sever Side Rendering with NodeJS. In this tutorial we will show you how to use Server Connect data in your page meta tags, such as page title and description. Overview In our example we will show you a dynamic product details page, where the product title will be displayed as page title and product description will be added to the description meta tag. We have a page listing our products: [Screenshot_3] When the details button is clicked, th…

You can also add server side data bindings from the server action assigned to the page’s route.

You can add the server binding from the property inspector when you select a text place in code view.

[master_of_web]

Oh, now I see.

So I create a Server Action for every Page Type (like single, archive etc). Then I just query all the Data that is necessary for that page type. If I need more than just one simple data list (eg single post data + related post data + sidebar + current user info), I just append all of these queries to the one Server Action.
The combined result of the Server Action can than be passed on via the “server side data” field so all the queried results are available for use on site elements (or meta data or whatever).

Right?

[George]

Exactly!

[master_of_web]

I must be still missing something:

On my page I set my server side data to a server action

That action returns a simple list of keywords from my DB for now.

If I define template Data on my layout page, I get the SSD-binding option (green thunderbolt) on my page and can select the data from my DB-query.

So far so good. But I don’t just want to pass template data to the layout. I want to use the data in page elements like headline or build a repeating list over my keyword-array. But I can only find the client side data binding option (orange thunderbolt)there

How can this be done?

[Teodor]

Click inside code view and Insert Server Data Binding button will appear in the right panel.

[master_of_web]

Wow, never heard of that…

It actually works for something like putting the query-total in the headline with

  <%=_('keywords.total',locals)%>

How do I do this for repeater or anything more complex? This is not working:

 <div class="col" id="test_list" dmx-repeat:keywords="<%=_('keywords.data',locals)%>">

[George]

Server side rendering is done only server side for data that you really can’t render client side. Like some important SEO tags for the search engines.

All other data should be done client side, like repeat regions and regular data population with Server Connect for fetching and App Connect for binding on the page.

[master_of_web]

Well, but that was what I was trying to do. I want the project the work like a regular static (but DB-driven) Website - not an interactive, dynamic app.

I know that google got better with understanding JS based sites - but it’s still far from being as pain-free as an old server side page. And I think if I don’t need any client side interaction, I could just stick to what works and render the whole thing server side.

Would it make any difference if I switch the server model to php? Or is wappler also just using php for the background stuff (routes, DB-queries) and page skeleton and all the template-logic must use client side JS?

edit:
I just set up a test php project and it looks like if I have even less options, since even the “Insert Server Data Binding” is only working in nodeJS.

I mean it would be no problem for me with my php experience to code some template logic right into the code view like a little for-loop. But I would need an easy way to access the data from the backend workflows that i set up. Its this possible? Or is wappler just the wrong tool for this kind of projects.

[sid]

We have tested the repeat stuff via server side data binding. It can be made to work.
I don’t have any code to share at this time, unfortunately.

[Teodor]

@master_of_web

I know that google got better with understanding JS based sites - but it’s still far from being as pain-free as an old server side page.

If that is the only reason for adding server side data bindings on the page, it’s been years already Google and other search engines are perfectly fine with js expressions on the page. The crawlers are smart enough to render the pages and get the data from them.