Emergency drastic changes to Lemmy, maybe hacking on lemmy-ui is easiest

[RocketDerp]

The front-page of a lemmy site is typically running lemmy-ui, maybe emergency performance changes are easiest done in that codebase.

For example, the "Trending" in the upper right is live-fetched from SQL via the Rust API on every front-page refresh. Caching this in lemmy-ui would be a start, and this data is not unique to the user:

Code:

https://github.com/LemmyNet/lemmy-ui/blob/1700476528d20ecbe68c7700c1cd097eb700b99a/src/shared/components/home/home.tsx#L360C1-L360C1

I've worked with https://github.com/jaredwray/keyv keyv library and SQLite module within it for caching.

Store two things, first the JSON that the Rust API returns, second a last-update time. Then add Javascript date comparison and if over 1 hour old, immediately set the update value (to prevent concurrency), then do the live API fetch. I would also add the same to the site /communities JSON results, by page.

[RocketDerp]

For non-logged in users, caching of the front page content also can be done, here is the place in the code:

https://github.com/LemmyNet/lemmy-ui/blob/1700476528d20ecbe68c7700c1cd097eb700b99a/src/shared/components/home/home.tsx#L323

[RocketDerp]

Proof of concept, not very pretty JavaScript/TypeScript code:

diff --git a/package.json b/package.json
index e9289746..a309add3 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "@babel/preset-typescript": "^7.21.5",
     "@babel/runtime": "^7.21.5",
     "@emoji-mart/data": "^1.1.0",
+    "@keyv/sqlite": "^3.6.5",
     "autosize": "^6.0.1",
     "babel-loader": "^9.1.2",
     "babel-plugin-inferno": "^6.6.0",
@@ -67,6 +68,7 @@
     "inferno-router": "^8.1.1",
     "inferno-server": "^8.1.1",
     "jwt-decode": "^3.1.2",
+    "keyv": "^4.5.2",
     "lemmy-js-client": "0.18.0-rc.2",
     "lodash.isequal": "^4.5.0",
     "lodash.merge": "^4.6.2",
diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 5e733674..2e463440 100644
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -97,6 +97,15 @@ import { SortSelect } from "../common/sort-select";
 import { CommunityLink } from "../community/community-link";
 import { PostListings } from "../post/post-listings";
 import { SiteSidebar } from "./site-sidebar";
+import Keyv from "keyv";
+
+  
+const frontpagecache = new Keyv(
+  'sqlite://frontpagecache0.sqlite', {
+    table: 'lemmyfront',
+    namespace: "lemmyfront",
+    busyTimeout: 10000
+  });
 
 interface HomeState {
   postsRes: RequestState<GetPostsResponse>;
@@ -335,7 +344,44 @@ export class Home extends Component<any, HomeState> {
         auth,
       };
 
-      postsRes = await client.getPosts(getPostsForm);
+      if (!auth) {
+        const key : string = "p" + type_ + ":" + page + ":" + sort;
+        const postsLast = await frontpagecache.get("pl" + key);
+        let postsData : RequestState<GetPostsResponse>  = await frontpagecache.get("pd" + key);
+        if (postsLast) {
+          // ToDo: clean up this mess of two date variables
+          const postsLastA = new Date(postsLast);
+          var TEN_MINUTES = 10 * 60 * 1000;
+          
+          const timeDiff0 = (new Date() - postsLastA);
+          if (timeDiff0 > TEN_MINUTES) {
+            console.log("cache STALE, postData key %s %s", key, timeDiff0);
+            postsData = null;
+          } else {
+            console.log("cache hit, postData key %s posts %d TTL %s", key, postsData.data?.posts.length, timeDiff0);
+          }
+        }
+        if (!postsData) {
+          // Note: there will be some client page hit concurrency here, but no worsre than if API fetch was done live every time.
+          const freshData : RequestState<GetPostsResponse> = await client.getPosts(getPostsForm);
+          console.log(freshData);
+          console.log("freshdata posts %d key %s %s", freshData.data?.posts.length, key, postsLast);
+          // WARNING: untested when zero records return, will this data structure be there?
+          if (freshData.data?.posts.length > 0) {
+              frontpagecache.set("pl" + key, new Date());
+              frontpagecache.set("pd" + key, freshData);
+          }
+          postsData = freshData;
+        }
+        postsRes = postsData;
+      } else {
+        // logged-in user live fetch
+        console.log("logged-in user, cache bypass for posts");
+        postsRes = await client.getPosts(getPostsForm);
+      }
+
+      console.log("getPosts");
+      // postsRes = await client.getPosts(getPostsForm);
     } else {
       const getCommentsForm: GetComments = {
         page,
@@ -346,6 +392,7 @@ export class Home extends Component<any, HomeState> {
         auth,
       };
 
+      console.log("getComments");
       commentsRes = await client.getComments(getCommentsForm);
     }
 
@@ -356,10 +403,37 @@ export class Home extends Component<any, HomeState> {
       auth,
     };
 
+    const trendingLast = await frontpagecache.get("trendlast");
+    let trendingData : ListCommunitiesResponse  = await frontpagecache.get("trenddata");
+    if (trendingLast) {
+      // ToDo: clean up this mess of two date variables
+      const trendingLastA = new Date(trendingLast);
+      console.log("trendingLast %s A %s", trendingLast, trendingLastA);
+      var ONE_HOUR = 60 * 60 * 1000;
+      
+      const timeDiff0 = (new Date() - trendingLastA);
+      if (timeDiff0 > ONE_HOUR) {
+        console.log("cache STALE, communities %s", timeDiff0);
+        trendingData = null;
+      } else {
+        console.log("cache hit, communities %d %s", trendingData.data?.communities.length, timeDiff0);
+      }
+    }
+    if (!trendingData) {
+      const freshData : ListCommunitiesResponse = await client.listCommunities(trendingCommunitiesForm);
+      console.log(freshData);
+      console.log("freshdata trending %d %s", freshData.data?.communities.length, trendingLast);
+      // WARNING: untested when zero records return, will this data structure be there?
+      if (freshData.data?.communities.length > 0) {
+         frontpagecache.set("trendlast", new Date());
+         frontpagecache.set("trenddata", freshData);
+      }
+      trendingData = freshData;
+    }
+
+    console.log("trending");
     return {
-      trendingCommunitiesRes: await client.listCommunities(
-        trendingCommunitiesForm
-      ),
+      trendingCommunitiesRes: trendingData,
       commentsRes,
       postsRes,
     };

also you need to do:

yarn add keyv
yarn add @keyv/sqlite

This could could be put into an independent file, use a common function with parameters. It also doesn't get called for users navigating within the page and not dong full page refreshes.