Nov 22, 20224:25 AM - edited Nov 22, 20224:26 AM
Contributor
HubDB dynamic rows generating
SOLVE
Hello,
I am wondering if it would be possible to generate items from my HubDB table after certain button being clicked. To be more specific - I do not want to generate all the items rightaway and display/hide them w css class but dynamically generate them after button being clicked. This way my webpage is optimized.
I built a blog with categories once but all the thumbnails are generated immediately and being shown/hidden after filtering. I am looking for more optimal way to build such blog/resources page https://www.ziflow.com/blog
Another example is here https://www.toriihq.com/resources but again - elements are loaded just after DOM is loaded and I want them to load dynamically.
This requires no authentication if the table is set to public. If it's not public, it will require a key, in which case you will need a serverless function to make the call as you will need to hide your authentication key
Once you get the data via the call, just append HTML to the parent container. something like:
html = "<div>" + data.columns['name'] + "</div>";
parent_container.insertAdjacentHTML('beforeend', html)
Before looking at a JS solution my first thought would be to look into lazy loading or potentially just off loading all of the concern to the browser!
What I mean by that is that most modern browsers will actually lazy load an image if its parent container is hidden! So you can hide the content and this tells the browser "this is a non-blocking resource" and should be deprioritized in the critical rendering path.
I already implemented similar solution here https://www.ziflow.com/blog Where we had about 150+ blog posts available but it is causing to render tremendously (in my opinion) long HTML code - even if content is lazy loaded. This page have 400 inbound links as the final outcome which apparently may cause its SEO being not optimal.
Note from Hubspot while examining above page with Optimize tab: "Page has less than 300 outbound links
Too many outbound links creates a bad experience for your visitors and may cause search engines to view your page as low-quality or as spam. Your page has 401 links (including your navigation menus, for example). Aim for less than 300 outbound links."
I think your solution is great for pages with less content, what do you think? Or shouldn't I care that much about it? Much thanks for helping me!! 🙂
This requires no authentication if the table is set to public. If it's not public, it will require a key, in which case you will need a serverless function to make the call as you will need to hide your authentication key
Once you get the data via the call, just append HTML to the parent container. something like:
html = "<div>" + data.columns['name'] + "</div>";
parent_container.insertAdjacentHTML('beforeend', html)
Nov 23, 20224:00 AM - edited Nov 23, 20224:52 AM
Contributor
HubDB dynamic rows generating
SOLVE
Thank you for response @dannio This looks like the way to go but my another question would be - Is it possible to parametrize these HubDB requests? For example if I had table columns such as ID, Name and Category of item. I would like only grab items of "Tech" Category and Name containing f.e "ex" letters. I know I could filter all the JSON data once I request rows but more optimal would be adding parameters to request itself.
@VoytechMedia I see you found the answer already. Yes, it's basically the same as how you query when using hubl functions. Just add the query to the end of the request and it should work the same way.