feat(frontend): server side rendering to improve performance

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,26 +63,35 @@ 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>
@@ -88,4 +99,33 @@ function App({ Component, pageProps }: AppProps) {
   );
 }
 
+// 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;