Simple server-cache solution

[EinfachChris]

I think that a server-cache solution is essential for every website and a good Google ranking.

Especially for beginners like me, working and learning with other tools like Docker and Redis is very difficult.

Why does it have to be so complicated?
In Wordpress, this is a simple plugin that checks in .htaccess whether a rendered version of the page is in the folder (cache) and then loads it. If none exists, it will be created.

I can’t imagine this being that complicated for experienced programmers.
But above all, I am convinced that a simple solution will help everyone here.

[Teodor]

Which part of your site/pages do you need to cache - server side data, css/js files, images?
When do you need the cache? For how long? When should the cache be reset?

It’s not very clear from your request what do you need exactly - you mention docker and redis? What server model are you using and what type of hosting?

[EinfachChris]

I use a shared host with Nodesj and Mysql.

The cache should include the rendered website with database content, so that only the images need to be loaded to optimize the loading time of the website.

[Teodor]

@EinfachChris

The cache should include the rendered website with database content

Well this means server-side rendering. This is not how App Connect works. App Connect is a front-end framework like vue.js that renders dynamic data on page load.

Are you aware you can cache your server action dynamic data easily?

Caching API Data

Sometimes data APIs have restrictions like limits for requests per IP or hourly request limits. In cases like these, it’s useful to have data cached for your user. You can do this by using the state management component in Wappler. In App Structure add new component: [Screenshot_1] Then open the State Management category. In this tutorial we will show you how to cache the data in the local storage, but you can also store it in a session if you like. So - we select local storage manager: [S…

Also your screenshots show some results of your page loading slowly, this doesn’t necessarily mean cache will solve your issues, you should look into optimizing your page/content/layout.

[Cheese]

May I add something. Lighthouse is for guidance. We see what we can only call scatty results in Lighthouse that in no way reflect our page speed (up and down like a yoyo and rarely give the same result). Too much focus is given to Lighthouse and improving scores. The proof is in the pudding. How does your page load for you? If you want to cache images (on your own server) use Cloudflare (the Free Tier will do everything you require). If you want to dive deeper you can enable Redis and use it to cache the page layout and not the data, or both data and layout. Then use Google Developer tools like Page Speed and Rich Results Test to check your page and forget about Lighthouse. Others will disagree with me on Lighthouse but I reiterate any page speed test (Lighthouse or Google) is to be taken with a very large pinch of salt!

[EinfachChris]

@Cheese

Then use Google Developer tools like Page Speed and Rich Results Test to check your page and forget about Lighthouse.

As you can see in my post above, I used Google PageSpeed

[EinfachChris]

@Teodor

Are you aware you can cache your server action dynamic data easily?

Isn’t this saved locally on the user PC?

[Teodor]

Well yes, is that not what you want - caching data for users for faster loading?

[EinfachChris]

That’s right, my main concern is a fast page loading time for Google.

Unfortunately, if the data is cached on the user PC, that doesn’t work here.

Or am I not understanding something here?

[Apple]

I thought this was server-side cache

I’ve given bad advice to someone last year due to my erroneous thought

[EinfachChris]

I really need a solution here.

[Hyperbytes]

Have you read this post?

Leveraging browser caching - node servers

With PHP running on Apache I have been accustomed to setting cache times via the .htaccess file like this: ## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 month" ExpiresByType image/jpeg "access 1 month" ExpiresByType image/gif "access 1 month" ExpiresByType image/png "access 1 month" ExpiresByType text/css "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType applicat…

[Hyperbytes]

This may also help
https://medium.com/the-node-js-collection/simple-server-side-cache-for-express-js-with-node-js-45ff296ca0f0

And
Caching Strategies in Node.js

Caching Strategies in Node.js

[Apple]

Your hosting provider has LSCache, I believe it’s your best solution available so far to achieve the equivalent of:

@EinfachChris

In Wordpress, this is a simple plugin that checks in .htaccess whether a rendered version of the page is in the folder (cache) and then loads it. If none exists, it will be created.

Because there’s no Wappler “plug-in” for LSCache, you must manually configure it in .htaccess.

However, I’m not sure if this will make it fast enough for your liking - you might also want is to minify the JS/CSS assets, and there’s no Wappler plug-in made for that yet, and doesn’t seem like there’s enough demand for it yet.

But, honestly, it seems these might only bring marginal improvements, there are a lot of images on your website, I think that’s why it’s so “slow” to load… Are you sure an equivalent Wordpress website with the same amount of images would be faster to load?

[dogpoint]

Hi Teodor,

Is that what the Reload option is for under Data Caching to force reload eg after an insert?

[Teodor]

Yes, reload will load the server action again, instead of loading the data from the cache.

[EinfachChris]

@Apple

Are you sure an equivalent Wordpress website with the same amount of images would be faster to load?

With Wordpress we were mobile 85% and desktop 98%

[EinfachChris]

@Hyperbytes

Have you read this post?

Thanks Ben for the information.
But I would like to work without external servers.
There has to be a solution here

[EinfachChris]

@Hyperbytes

This may also help
https://medium.com/the-node-js-collection/simple-server-side-cache-for-express-js-with-node-js-45ff296ca0f0

And
Caching Strategies in Node.js

For me, the “2. local file system caching” is the solution.
I just don’t know how to get this implemented on my server

[guptast]

Hi Christian,

I just browsed your website and noticed the link tags for the stylesheets are incorrect.

Currently this is on the website - <link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" as="style" onload="null;this.rel='stylesheet'">

I’m not sure how much this will improve the performance but it’s worth a try. The correct syntax for preloading the stylesheets is:

<link rel="preload" as="style" href="/bootstrap/5/css/bootstrap.min.css" onload="null;this.rel='stylesheet'">

I would also look at leaving this out and let it load normally (with defer attribute) <link rel="preload" as="script" href="/dmxAppConnect/dmxRouting/dmxRouting.js">