Discuss

Building SPA pages with NodeJS

On this page
A single page application (SPA) is a web site/app that re-renders its content in response to navigation actions like clicking a link, without reloading the whole page. It consists of main template and different views, which are rendered in the main template.

SPA for NodeJS

It's possible to build SPA pages and enable partial refresh thanks to NodeJS templating system. In our example we will show you a simple SPA page, containing of a main layout with navbar and two views, which will be loaded in the layout without reloading the page.

Disclaimer: Before we begin, make sure your site links are set to Site Root Relative in the project settings in order to prevent issues when working in subfolders:

Screenshot_3|690x385

Creating a Layout Page

First we need to create our layout page. Open the Pages Manager, select layouts and click the Create Page button:

Screenshot_1|690x385

Add a name for your layout page and click Save:

Screenshot_2|690x385

You can see a new element appears in the App Structure, this is the View component, which allows you to partially refresh the content loaded inside it:

Screenshot_3|690x385

Let's add a navigation on our page. Click the add new element button:

Screenshot_4|690x385

We use one of the available Navigation Blocks, but you can build your navbar from scratch if you prefer:

Screenshot_5|690x385

Save your layout page, we will return to it later to setup the links.

Creating Views

The next step is to create the two content pages (views) which we are going to load in our layout. Select Pages and click the Create Page button:

Screenshot_7|690x385

First we create our home page. We add home as name and select our layout page from the layout dropdown:

Screenshot_8|690x385

Add some content to your home page:

Screenshot_9|690x385

We added the content and we are done. Save your page:

Screenshot_11|690x385

Now we create another page (view), click the Create Page button:

Screenshot_12|690x385

This is our about page. We add about as name and select our layout page from the layout dropdown:

Screenshot_13|690x385

Again, add your content on the page:

Screenshot_14|690x385

And save your page when you are done:

Screenshot_1|690x385

Now as we are done creating our views, switch back to the layout page:

Screenshot_15|690x385

And select the Home menu item (or any link that will be used to target a specific view):

Screenshot_16|690x385

Remove the default link and click routing picker button:

Screenshot_17|690x385

Select the home page route and click the Select button:

Screenshot_18|690x385

Enable the Internal link option. This is really important if you want to load the SPA pages without reloading the page. If this link is not enabled, the link will be loaded like a regular external link, causing page reload.

Screenshot_19|690x385

Do the same for the About menu link:

Screenshot_20|690x385

Remove the default link and click routing picker button:

Screenshot_21|690x385

Select the about route and click the Select button:

Screenshot_22|690x385

Don't forget to enable the Internal link option:

Screenshot_23|690x385

And you are done! Your SPA page is finished. Your view reload without any page refresh inside the layout page:

spa|690x450

SEO For Single Page Apps

Great news for your SPA pages and SEO - thanks to the hybrid rendering*, your page meta tags change dynamically when a view is loaded in the SPA. So when you are https://community.wappler.io/t/using-server-connect-data-for-server-side-rendering-in-nodejs/24940 your meta tags will automatically change!

Hybrid rendering

The Hybrid Rendering allows you to partially load the content on the page, without reloading the page while the data for your meta tags is rendered on the server side. This ensures great results for SEO, as the Google crawler sees your links as separate full links and indexes them using each page's meta tags - title, description etc.

More about different types of rendering and hybrid rendering:

https://developers.google.com/web/updates/2019/02/rendering-on-the-web

https://www.deepcrawl.com/knowledge/white-papers/javascript-seo-guide/different-rendering-methods