Discuss

Using Server Connect Data for Server Side Rendering in NodeJS

On this page

You already know how to setup your pages to use https://community.wappler.io/t/sever-side-rendering-with-nodejs/21650. 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|690x411

When the details button is clicked, the users will be redirected to a page showing the details for each of the products:

Screenshot_4|690x411

Setup Routing

We will use an URL parameter in order to filter our details page data. We first need to define this in the routing.

Open the Routing Panel:

Screenshot_5|690x411

Select the details page route, then edit the Path:

Screenshot_6|690x411

We add the following parameters there /:id/:product_name where id will be used to actually filter the data and product_name will be used just for SEO/Friendly URL purposes. The generated URL will be something like: myproducts.com/details/1/product-1-name-goes-here:

Screenshot_7|690x411

And we are done.

Setup the Server Action

Add URL Parameters

The next step is to setup the Server Action, which will be used to populate our page meta tags. Open the Server Connect Panel:

Screenshot_8|690x411

Create a new Server Action:

Screenshot_9|690x411

Then open Globals and right click $_PARAM, here we define the URL Parameters which are used on the page with this Server Action:

Screenshot_11|690x411

We only need the id parameter as it will be used to filter the database query, so create it here:

Screenshot_13|690x411

It is important to understand that the Server Connect used on the page inherits all the input query parameters or route path parameters of the current page, so it will automatically "see" them in the URL.

Create the Database Query

As we have our parameter created, now we can use it to filter a database query. Right click steps:

Screenshot_14|690x411

Add a database connection:

Screenshot_15|690x411

Then add a Single Database Query:

Screenshot_17|690x411

Open the query options:

Screenshot_18|690x411

Select your database table and add the columns to the selected columns list:

Screenshot_19|690x411

Open conditions:

Screenshot_20|690x411

Select the column you want to filter the data by. In our case this is the product id column. Then select the dynamic data picker to select a filter value:

Screenshot_21|690x411

Select the parameter we created and click the select button:

Screenshot_22|690x411

Click OK:

Screenshot_23|690x411

And save your server action:

Screenshot_24|690x411

Setup the Details Page

Add Details Server Action

Open the details page and under the Server Side Data click the Select Server Action button:

Screenshot_25|690x411

Select the details server action, which we just saved:

Screenshot_26|690x411

Bind Dynamic Data

The next step is to bind the title and description dynamic data from the server action which we selected. Click the dynamic data picker for title:

Screenshot_27|690x411

Select the binding which you want to appear in the page title. In our case this is the product name:

Screenshot_28|690x411

Do the same for the description:

Screenshot_29|690x411

This time we select the product description binding:

Screenshot_30|690x411

If you enter your page URL and inspect the source code, you can see the title and description returned by the server action, which is filtered by the URL parameter:

Screenshot_32|690x292

You can easily create SEO fiendly URLs, which send the users from the product list page to the details page.

We have a simple anchor button in the repeat on the list page:

Screenshot_33|690x408

Select it and add new dynamic attribute:

Screenshot_34|690x408

Select Link:

Screenshot_35|690x408

And then click the route picker icon:

Screenshot_36|690x408

Select the details page route and click the dynamic data picker for the id parameter:

Screenshot_37|690x408

Here we select the product id, which will be used by the Server Action and filter our database query:

Screenshot_38|690x408

Click the dynamic data picker for the product_name parameter. As we already explained it won't be used to filter the data, but only for SEO purposes:

Screenshot_39|690x408

Select the product name. We want to be sure our URLs don't have any spaces or special characters, so we will apply the Slugify formatter to it. It will turn Product Name Here to product-name-here, which is how your URLs should look like. Click the formatter icon:

Screenshot_40|690x408

Open Transform and select Slugify:

Screenshot_41|690x408

Click select:

Screenshot_42|690x408

And then click select once again:

Screenshot_44|690x408

Your dynamic URLs are now added on the page:

Screenshot_45|690x408