Sever Side Rendering with NodeJS

In this update you can use full Server Side data rendering for NodeJS!
Your NodeJS template based web sites can fully empower now Server Connect for dynamic Server Side Data Rendering!

What is Server Side Rendering

Server side rendering is great for sharing content on platforms like Facebook, Twitter, LinkedIn and others which can’t read dynamic javascript content. The specific meta tags for each platform, as well as the general ones like title, description, author etc. can be rendered on the servers side now, using NodeJS Layouts and Content Pages.

From our previous tutorials you already know how to create template based pages and layouts in Wappler with NodeJS so we won’t show this againg.

Now you can use the layouts as master pages for your content pages and define meta data to assign Server Side Data Bindings to them.

Layout Page Setup

First we need to setup the Layout Page used for your pages.
Open the Pages Manager and select layouts:

Select your Layout Page:

Defining Template Data

Then click the Define Template Data button:

Here, you define the variables which will be used for your meta tags:

So create a variable for each of the meta tags you’d like to add on your pages. Right click meta and add new variable:

First we add the title variable, which will be used in the page title:

Click Save when you create the variables for all of the meta tags you need:

Now we need to bind these variables on our layout page.

Binding Template Data to Meta Tags

We start with the page title. Click the dynamic data picker to select dynamic data for it:

Remove the default static value and select the title variable under globals:

Then add new Meta Tag:

Select General > Description:

And click the dynamic data picker button for the description meta tag:

Select the description variable under globals:

Do the same for all the meta tags you need to add on your pages.

Content Pages Setup

When you are done defining the template data and the meta tags you need, select Pages and open your Content Page, based on the Layout we were just working on:

You will see all the variables created on the Layout Page under the Server Side Data section. Here we bind the values which we want to use for them. They will be rendered on the Server Side:

Select your data source (Server Action), which provides the dynamic data:

We created a server action, which returns the data for our meta tags. Select it:

And then click the dynamic data picker icon for the title variable:

Select the data, which needs to be used for the page title:

Do the same for the description and the rest of the variables you defined in your layout page:

And you are done. When you run your page in your browser, the data will be rendered on the Server Side. You can check this by viewing the page source code in your browser:

That’s how you can setup your pages so that the meta tags can be ‘seen’ by platforms which can’t read dynamic javascript content.

7 Likes

this is wonderful :ok_hand: :heart_eyes: :heart_eyes: :beers:

2 Likes

9 posts were split to a new topic: Server connect action in NodeJS templates

image

After I performed this step the variables are not saved for some reason. I have set an App ID and followed the other steps from the tutorial exactly. Any reason what might cause this?

I have the same problem did you find a solution? When I view the sever binding panel the globals option is not available.

I think it’s because it was a layout page I was trying to add these parameters on, but I am not sure about that. Are you also trying this on a layout page?

1 Like

Thanks for the reply, yes it was a layout page. There’s something wrong with template configuration when converting the default index.ejs into a content page with layout.

how do I do this part of this tut…

https://community.wappler.io/uploads/default/original/3X/f/b/fb63edaac6fd1386e011ded82fbe95de579d8282.jpeg

I don’t understand your question.
The tutorial shows everything you need. Just follow it step by step!

how do I create the meta_tags server action… the steps… for this particular tutorial.

I know how to create a server action…

Everything is explained in the tutorial, please follow it from the beginning.