Merge pull request #1711 from LemmyNet/cache-dev

Fix some issues

Dockerfile

@@ -27,7 +27,7 @@ COPY .git .git
 RUN echo "export const VERSION = '$(git describe --tag)';" > "src/shared/version.ts"
 
 RUN yarn --production --prefer-offline
-RUN yarn build:prod
+RUN NODE_OPTIONS="--max-old-space-size=8192" yarn build:prod
 
 # Prune the image
 RUN node-prune /usr/src/app/node_modules

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lemmy-ui",
-  "version": "0.18.1-rc.3",
+  "version": "0.18.1-rc.5",
   "description": "An isomorphic UI for lemmy",
   "repository": "https://github.com/LemmyNet/lemmy-ui",
   "license": "AGPL-3.0",
@@ -22,9 +22,16 @@
     "translations:update": "git submodule update --remote --recursive"
   },
   "lint-staged": {
-    "*.{ts,tsx,js}": ["prettier --write", "eslint --fix"],
+    "*.{ts,tsx,js}": [
-    "*.{css, scss}": ["prettier --write"],
+      "prettier --write",
-    "package.json": ["sortpack"]
+      "eslint --fix"
+    ],
+    "*.{css, scss}": [
+      "prettier --write"
+    ],
+    "package.json": [
+      "sortpack"
+    ]
   },
   "dependencies": {
     "@babel/plugin-proposal-decorators": "^7.21.0",

src/server/index.tsx

@@ -20,7 +20,13 @@ const [hostname, port] = process.env["LEMMY_UI_HOST"]
 
 server.use(express.json());
 server.use(express.urlencoded({ extended: false }));
-server.use(getStaticDir(), express.static(path.resolve("./dist")));
+server.use(
+  getStaticDir(),
+  express.static(path.resolve("./dist"), {
+    maxAge: 24 * 60 * 60 * 1000, // 1 day
+    immutable: true,
+  })
+);
 server.use(setCacheControl);
 
 if (!process.env["LEMMY_UI_DISABLE_CSP"] && !process.env["LEMMY_UI_DEBUG"]) {

src/server/middleware.ts

@@ -1,4 +1,4 @@
-import type { NextFunction, Response } from "express";
+import type { NextFunction, Request, Response } from "express";
 import { UserService } from "../shared/services";
 
 export function setDefaultCsp({
@@ -18,24 +18,33 @@ export function setDefaultCsp({
 
 // Set cache-control headers. If user is logged in, set `private` to prevent storing data in
 // shared caches (eg nginx) and leaking of private data. If user is not logged in, allow caching
-// all responses for 60 seconds to reduce load on backend and database. The specific cache
+// all responses for 5 seconds to reduce load on backend and database. The specific cache
 // interval is rather arbitrary and could be set higher (less server load) or lower (fresher data).
 //
 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
-export function setCacheControl({
+export function setCacheControl(
-  res,
+  req: Request,
-  next,
+  res: Response,
-}: {
+  next: NextFunction
-  res: Response;
+) {
-  next: NextFunction;
-}) {
   const user = UserService.Instance;
   let caching: string;
-  if (user.auth()) {
+
-    caching = "private";
+  if (
+    process.env.NODE_ENV === "production" &&
+    (req.path.match(/\.(js|css|txt|manifest\.webmanifest)\/?$/) ||
+      req.path.includes("/css/themelist"))
+  ) {
+    // Static content gets cached publicly for a day
+    caching = "public, max-age=86400";
   } else {
-    caching = "public, max-age=60";
+    if (user.auth()) {
+      caching = "private";
+    } else {
+      caching = "public, max-age=5";
+    }
   }
+
   res.setHeader("Cache-Control", caching);
 
   next();

src/server/utils/create-ssr-html.tsx

@@ -24,7 +24,7 @@ export async function createSsrHtml(
 
   if (!appleTouchIcon) {
     appleTouchIcon = site?.site_view.site.icon
-      ? `data:image/png;base64,${sharp(
+      ? `data:image/png;base64,${await sharp(
           await fetchIconPng(site.site_view.site.icon)
         )
           .resize(180, 180)

src/shared/components/home/home.tsx

@@ -279,13 +279,15 @@ export class Home extends Component<any, HomeState> {
         trendingCommunitiesRes,
         commentsRes,
         postsRes,
-        tagline: getRandomFromList(this.state?.siteRes?.taglines ?? [])
-          ?.content,
         isIsomorphic: true,
       };
 
       HomeCacheService.postsRes = postsRes;
     }
+
+    this.state.tagline = getRandomFromList(
+      this.state?.siteRes?.taglines ?? []
+    )?.content;
   }
 
   componentWillUnmount() {

src/shared/components/home/tagline-form.tsx

@@ -141,7 +141,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
 
   handleEditTaglineClick(d: { i: TaglineForm; index: number }, event: any) {
     event.preventDefault();
-    if (this.state.editingRow == d.index) {
+    if (d.i.state.editingRow == d.index) {
       d.i.setState({ editingRow: undefined });
     } else {
       d.i.setState({ editingRow: d.index });

src/shared/components/post/post-listing.tsx

@@ -403,8 +403,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
   createdLine() {
     const post_view = this.postView;
+
     return (
-      <div className="small">
+      <div className="small mb-1 mb-md-0">
         <span className="me-1">
           <PersonListing person={post_view.creator} />
         </span>

src/shared/utils/app/is-auth-path.ts

@@ -1,5 +1,5 @@
 export default function isAuthPath(pathname: string) {
-  return /create_.*|inbox|settings|admin|reports|registration_applications/g.test(
+  return /^\/create_.*|inbox|settings|admin|reports|registration_applications/g.test(
     pathname
   );
 }

webpack.config.js

@@ -14,7 +14,7 @@ const banner = `
   @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
   `;
 
-function getBase(env) {
+function getBase(env, mode) {
   return {
     output: {
       filename: "js/server.js",
@@ -54,6 +54,7 @@ function getBase(env) {
     plugins: [
       new webpack.DefinePlugin({
         "process.env.COMMIT_HASH": `"${env.COMMIT_HASH}"`,
+        "process.env.NODE_ENV": `"${mode}"`,
       }),
       new MiniCssExtractPlugin({
         filename: "styles/styles.css",
@@ -69,7 +70,7 @@ function getBase(env) {
 }
 
 const createServerConfig = (env, mode) => {
-  const base = getBase(env);
+  const base = getBase(env, mode);
   const config = merge({}, base, {
     mode,
     entry: "./src/server/index.tsx",
@@ -97,7 +98,7 @@ const createServerConfig = (env, mode) => {
 };
 
 const createClientConfig = (env, mode) => {
-  const base = getBase(env);
+  const base = getBase(env, mode);
   const config = merge({}, base, {
     mode,
     entry: "./src/client/index.tsx",