feat(frontend): server side rendering to improve performance

stonith404 · Feb 7, 2023 · 38de022 · 38de022
1 parent 82f204e
commit 38de022
Show file tree

Hide file tree

Showing 14 changed files with 137 additions and 71 deletions.
diff --git a/frontend/src/components/Meta.tsx b/frontend/src/components/Meta.tsx
@@ -7,18 +7,20 @@ const Meta = ({
   title: string;
   description?: string;
 }) => {
+  const metaTitle = `${title} - Pingvin Share`;
+
   return (
     <Head>
-      {/* TODO: Doesn't work because script get only executed on client side */}
-      <title>{title} - Pingvin Share</title>
-      <meta name="og:title" content={`${title} - Pingvin Share`} />
+      <title>{metaTitle}</title>
+      <meta name="og:title" content={metaTitle} />
       <meta
         name="og:description"
         content={
           description ?? "An open-source and self-hosted sharing platform."
         }
       />
-      <meta name="twitter:title" content={`${title} - Pingvin Share`} />
+      <meta property="og:image" content="/img/opengraph-default.png" />
+      <meta name="twitter:title" content={metaTitle} />
       <meta name="twitter:description" content={description} />
     </Head>
   );

diff --git a/frontend/src/components/account/ThemeSwitcher.tsx b/frontend/src/components/account/ThemeSwitcher.tsx
@@ -18,7 +18,6 @@ const ThemeSwitcher = () => {
   );
   const { toggleColorScheme } = useMantineColorScheme();
   const systemColorScheme = useColorScheme();
-
   return (
     <Stack>
       <SegmentedControl

diff --git a/frontend/src/components/admin/configuration/AdminConfigTable.tsx b/frontend/src/components/admin/configuration/AdminConfigTable.tsx
@@ -82,6 +82,7 @@ const AdminConfigTable = () => {
         })
         .catch(toast.axiosError);
     }
+    config.refresh();
   };
 
   useEffect(() => {

diff --git a/frontend/src/components/auth/SignInForm.tsx b/frontend/src/components/auth/SignInForm.tsx
@@ -18,13 +18,12 @@ import * as yup from "yup";
 import useConfig from "../../hooks/config.hook";
 import useUser from "../../hooks/user.hook";
 import authService from "../../services/auth.service";
-import userService from "../../services/user.service";
 import toast from "../../utils/toast.util";
 
 const SignInForm = ({ redirectPath }: { redirectPath: string }) => {
   const config = useConfig();
   const router = useRouter();
-  const { setUser } = useUser();
+  const { refreshUser } = useUser();
 
   const [showTotp, setShowTotp] = React.useState(false);
   const [loginToken, setLoginToken] = React.useState("");
@@ -64,7 +63,7 @@ const SignInForm = ({ redirectPath }: { redirectPath: string }) => {
           });
           setLoginToken(response.data["loginToken"]);
         } else {
-          setUser(await userService.getCurrentUser());
+          await refreshUser();
           router.replace(redirectPath);
         }
       })
@@ -74,7 +73,10 @@ const SignInForm = ({ redirectPath }: { redirectPath: string }) => {
   const signInTotp = (email: string, password: string, totp: string) => {
     authService
       .signInTotp(email, password, totp, loginToken)
-      .then(() => window.location.replace("/"))
+      .then(async () => {
+        await refreshUser();
+        router.replace(redirectPath);
+      })
       .catch((error) => {
         if (error?.response?.data?.message == "Login token expired") {
           toast.error("Login token expired");

diff --git a/frontend/src/components/auth/SignUpForm.tsx b/frontend/src/components/auth/SignUpForm.tsx
@@ -15,13 +15,12 @@ import * as yup from "yup";
 import useConfig from "../../hooks/config.hook";
 import useUser from "../../hooks/user.hook";
 import authService from "../../services/auth.service";
-import userService from "../../services/user.service";
 import toast from "../../utils/toast.util";
 
 const SignUpForm = () => {
   const config = useConfig();
   const router = useRouter();
-  const { setUser } = useUser();
+  const { refreshUser } = useUser();
 
   const validationSchema = yup.object().shape({
     email: yup.string().email().required(),
@@ -42,8 +41,8 @@ const SignUpForm = () => {
     await authService
       .signUp(email, username, password)
       .then(async () => {
-        setUser(await userService.getCurrentUser());
-        router.replace("/");
+        await refreshUser();
+        router.replace("/upload");
       })
       .catch(toast.axiosError);
   };

diff --git a/frontend/src/components/navBar/NavBar.tsx b/frontend/src/components/navBar/NavBar.tsx
@@ -1,5 +1,4 @@
 import {
-  ActionIcon,
   Box,
   Burger,
   Container,
@@ -14,7 +13,6 @@ import {
 import { useDisclosure } from "@mantine/hooks";
 import Link from "next/link";
 import { ReactNode, useEffect, useState } from "react";
-import { TbPlus } from "react-icons/tb";
 import useConfig from "../../hooks/config.hook";
 import useUser from "../../hooks/user.hook";
 import Logo from "../Logo";
@@ -172,7 +170,9 @@ const NavBar = () => {
             href={link.link ?? ""}
             onClick={() => toggleOpened.toggle()}
             className={cx(classes.link, {
-              [classes.linkActive]: window.location.pathname == link.link,
+              [classes.linkActive]:
+                typeof window != "undefined" &&
+                window.location.pathname == link.link,
             })}
           >
             {link.label}

diff --git a/frontend/src/hooks/config.hook.ts b/frontend/src/hooks/config.hook.ts
@@ -1,13 +1,17 @@
 import { createContext, useContext } from "react";
 import configService from "../services/config.service";
-import Config from "../types/config.type";
+import { ConfigHook } from "../types/config.type";
 
-export const ConfigContext = createContext<Config[] | null>(null);
+export const ConfigContext = createContext<ConfigHook>({
+  configVariables: [],
+  refresh: () => {},
+});
 
 const useConfig = () => {
-  const configVariables = useContext(ConfigContext) as Config[];
+  const configContext = useContext(ConfigContext);
   return {
-    get: (key: string) => configService.get(key, configVariables),
+    get: (key: string) => configService.get(key, configContext.configVariables),
+    refresh: () => configContext.refresh(),
   };
 };
 

diff --git a/frontend/src/hooks/user.hook.ts b/frontend/src/hooks/user.hook.ts
@@ -3,7 +3,7 @@ import { UserHook } from "../types/user.type";
 
 export const UserContext = createContext<UserHook>({
   user: null,
-  setUser: () => {},
+  refreshUser: async () => null,
 });
 
 const useUser = () => {

diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
@@ -2,12 +2,14 @@ import {
   ColorScheme,
   ColorSchemeProvider,
   Container,
-  LoadingOverlay,
   MantineProvider,
 } from "@mantine/core";
 import { useColorScheme } from "@mantine/hooks";
 import { ModalsProvider } from "@mantine/modals";
 import { NotificationsProvider } from "@mantine/notifications";
+import axios from "axios";
+import { getCookie, setCookie } from "cookies-next";
+import { GetServerSidePropsContext } from "next";
 import type { AppProps } from "next/app";
 import { useEffect, useState } from "react";
 import Header from "../components/navBar/NavBar";
@@ -21,38 +23,38 @@ import GlobalStyle from "../styles/global.style";
 import globalStyle from "../styles/mantine.style";
 import Config from "../types/config.type";
 import { CurrentUser } from "../types/user.type";
-import { GlobalLoadingContext } from "../utils/loading.util";
 
 function App({ Component, pageProps }: AppProps) {
-  const systemTheme = useColorScheme();
-
+  const systemTheme = useColorScheme(pageProps.colorScheme);
+  const [colorScheme, setColorScheme] = useState<ColorScheme>(systemTheme);
   const preferences = usePreferences();
-  const [colorScheme, setColorScheme] = useState<ColorScheme>("light");
-  const [isLoading, setIsLoading] = useState(true);
-  const [user, setUser] = useState<CurrentUser | null>(null);
-  const [configVariables, setConfigVariables] = useState<Config[] | null>(null);
 
-  const getInitalData = async () => {
-    setIsLoading(true);
-    setConfigVariables(await configService.list());
-    await authService.refreshAccessToken();
-    setUser(await userService.getCurrentUser());
-    setIsLoading(false);
-  };
+  const [user, setUser] = useState<CurrentUser | null>(pageProps.user);
+
+  const [configVariables, setConfigVariables] = useState<Config[]>(
+    pageProps.configVariables
+  );
 
   useEffect(() => {
     setInterval(async () => await authService.refreshAccessToken(), 30 * 1000);
-    getInitalData();
   }, []);
 
   useEffect(() => {
-    setColorScheme(
+    const colorScheme =
       preferences.get("colorScheme") == "system"
         ? systemTheme
-        : preferences.get("colorScheme")
-    );
+        : preferences.get("colorScheme");
+
+    toggleColorScheme(colorScheme);
   }, [systemTheme]);
 
+  const toggleColorScheme = (value: ColorScheme) => {
+    setColorScheme(value ?? "light");
+    setCookie("mantine-color-scheme", value ?? "light", {
+      sameSite: "lax",
+    });
+  };
+
   return (
     <MantineProvider
       withGlobalStyles
@@ -61,31 +63,69 @@ function App({ Component, pageProps }: AppProps) {
     >
       <ColorSchemeProvider
         colorScheme={colorScheme}
-        toggleColorScheme={(value) => setColorScheme(value ?? "light")}
+        toggleColorScheme={toggleColorScheme}
       >
         <GlobalStyle />
         <NotificationsProvider>
           <ModalsProvider>
-            <GlobalLoadingContext.Provider value={{ isLoading, setIsLoading }}>
-              {isLoading ? (
-                <LoadingOverlay visible overlayOpacity={1} />
-              ) : (
-                <ConfigContext.Provider value={configVariables}>
-                  <UserContext.Provider value={{ user, setUser }}>
-                    <LoadingOverlay visible={isLoading} overlayOpacity={1} />
-                    <Header />
-                    <Container>
-                      <Component {...pageProps} />
-                    </Container>
-                  </UserContext.Provider>
-                </ConfigContext.Provider>
-              )}
-            </GlobalLoadingContext.Provider>
+            <ConfigContext.Provider
+              value={{
+                configVariables,
+                refresh: async () => {
+                  setConfigVariables(await configService.list());
+                },
+              }}
+            >
+              <UserContext.Provider
+                value={{
+                  user,
+                  refreshUser: async () => {
+                    const user = await userService.getCurrentUser();
+                    setUser(user);
+                    return user;
+                  },
+                }}
+              >
+                <Header />
+                <Container>
+                  <Component {...pageProps} />
+                </Container>
+              </UserContext.Provider>
+            </ConfigContext.Provider>
           </ModalsProvider>
         </NotificationsProvider>
       </ColorSchemeProvider>
     </MantineProvider>
   );
 }
 
+// Fetch user and config variables on server side when the first request is made
+// These will get passed as a page prop to the App component and stored in the contexts
+App.getInitialProps = async ({ ctx }: { ctx: GetServerSidePropsContext }) => {
+  let pageProps: {
+    user?: CurrentUser;
+    configVariables?: Config[];
+    colorScheme: ColorScheme;
+  } = {
+    colorScheme:
+      (getCookie("mantine-color-scheme", ctx) as ColorScheme) ?? "light",
+  };
+
+  if (ctx.req) {
+    const cookieHeader = ctx.req.headers.cookie;
+
+    pageProps.user = await axios(`http://localhost:8080/api/users/me`, {
+      headers: { cookie: cookieHeader },
+    })
+      .then((res) => res.data)
+      .catch(() => null);
+
+    pageProps.configVariables = (
+      await axios(`http://localhost:8080/api/configs`)
+    ).data;
+  }
+
+  return { pageProps };
+};
+
 export default App;
diff --git a/frontend/src/pages/account/index.tsx b/frontend/src/pages/account/index.tsx
@@ -24,7 +24,7 @@ import userService from "../../services/user.service";
 import toast from "../../utils/toast.util";
 
 const Account = () => {
-  const { user, setUser } = useUser();
+  const { user, refreshUser } = useUser();
   const modals = useModals();
 
   const accountForm = useForm({
@@ -81,8 +81,6 @@ const Account = () => {
     ),
   });
 
-  const refreshUser = async () => setUser(await userService.getCurrentUser());
-
   return (
     <>
       <Meta title="My account" />

diff --git a/frontend/src/pages/account/shares.tsx b/frontend/src/pages/account/shares.tsx
@@ -4,7 +4,6 @@ import {
   Button,
   Center,
   Group,
-  LoadingOverlay,
   Space,
   Stack,
   Table,
@@ -18,6 +17,7 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import { TbLink, TbTrash } from "react-icons/tb";
 import showShareLinkModal from "../../components/account/showShareLinkModal";
+import CenterLoader from "../../components/core/CenterLoader";
 import Meta from "../../components/Meta";
 import useConfig from "../../hooks/config.hook";
 import shareService from "../../services/share.service";
@@ -35,7 +35,8 @@ const MyShares = () => {
     shareService.getMyShares().then((shares) => setShares(shares));
   }, []);
 
-  if (!shares) return <LoadingOverlay visible />;
+  if (!shares) return <CenterLoader />;
+
   return (
     <>
       <Meta title="My shares" />