Question Regarding Server-Side Rendering

Wappler General How To
#1

I was adding a simple blog to a Wappler site but ran into some issues with how it loaded.

If you have a super simple setup of Header - Page Content - Footer and the page content is all dynamic when the page loads, you can see the footer for a split second before the content is loaded and shoves the footer down. It looks bad and causes a bunch of layout shift.

And for something like a navbar, if you have it fetch the nav items via a database query they will just pop onto the page a tiny bit after the static content loads.

I know you can add things like a pre-loader or placeholders, but the content loads really quick so it just ends up flashing the placeholders/pre-loader on the screen for a split second and almost looks worse than not having it. I would prefer to be able to just have the data ahead of time.

When I looked into how it works with things like WordPress, I saw it uses server-side rendering.

So, I know you can add things like meta tags via server-side rendering but is it possible to use it for page content?

Or is that not how server-side rendering works/is intended to be used?

If that’s the case, is there any other way to setup a page that loads data from the database but isn’t dynamic in terms of user interaction?

Simple server-cache solution
#2

You could use CSS to set a minimum height for various elements. For example: set a min-height for the page content element.

One option for the time it takes to fetch data. You could do a whole page loading overlay, or a more specific loading overlay over one of the elements. If you use gmail, load it in your desktop/laptop browser to see the loading overlay.

image
image2048×1365 113 KB

#3

In regard to the min height, I had tried that but ran into some problems.

Setting a min height to the whole body solved the footer getting moved around but for example if you have 2 sections like a hero section with the heading and an image and below you have the main content of the page, when the title and image get loaded it will push down the main content part. I tried to set a min height on the hero section too but then if the title was long and took 2 lines it would be greater than the min height and still push the main content down.

And the min height for desktop and mobile are different, it might take up half the screen on desktop but the full screen on mobile and I don’t really want to have to go setting min heights on each section for each breakpoint.

Is there an easier way to do this?

And for the overlay, I tried using Wappler’s pre-loader but if I checked any page speed things it would still say there was a ton of layout shift which I think can negatively impact SEO?

#4

Yeah, CSS is amazing and frustrating. Learning how to wield it properly takes time. It would be really difficult to give you all of the steps necessary to have the perfect layout, but hopefully giving some pointers will send you in the right direction.

For the desktop vs mobile, this is where media queries and breakpoints come in.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries

Frameworks like BootStrap already define common breakpoints into CSS classes making it easy to add consistently across your HTML.

#5

I got it working pretty good with the media breakpoints, thanks.

I’m still wondering though if it is possible to fetch page content via the server-side data and if that would be another solution? Like mentioned here

Either way I got it working so thanks again!

#6

I’m not too familiar with SSR rendering. It does look like Wappler could be capable of enabling it since it uses Express and EJS for node.js server projects.

You might be able to use the renderFile method that’s mentioned in this example on your project.