perf(nextjs): Add SSR to project and executions page and imrpove SSR on results page

OliverDudgeon · OliverDudgeon · commit ac4ca514eeb8 · 2022-03-18T22:35:41.000Z
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useState } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { Hydrate } from 'react-query/hydration';
 
@@ -32,10 +32,7 @@ export default function App({ Component, pageProps }: AppProps) {
   // ! Need resolutions in monorepo package.json for <Theme></Theme> to not cause "invalid hooks usage" error
 
   // React-Query
-  const queryClientRef = useRef<QueryClient | null>(null);
-  if (!queryClientRef.current) {
-    queryClientRef.current = new QueryClient();
-  }
+  const [queryClient] = useState(() => new QueryClient());
 
   // Material UI for SSR
   useEffect(() => {
@@ -54,7 +51,7 @@ export default function App({ Component, pageProps }: AppProps) {
       <ColorSchemeProvider>
         <ThemeProviders>
           <UserProvider>
-            <QueryClientProvider client={queryClientRef.current}>
+            <QueryClientProvider client={queryClient}>
               <Hydrate state={pageProps.dehydratedState}>
                 <SnackbarProvider>
                   <SelectedFilesProvider>
diff --git a/pages/executions.tsx b/pages/executions.tsx
@@ -1,13 +1,21 @@
 import { useMemo } from 'react';
 import { useState } from 'react';
-
-import { useGetApplications } from '@squonk/data-manager-client/application';
-import { useGetJobs } from '@squonk/data-manager-client/job';
-
-import { withPageAuthRequired } from '@auth0/nextjs-auth0';
+import { QueryClient } from 'react-query';
+import { dehydrate } from 'react-query/hydration';
+
+import {
+  getApplications,
+  getGetApplicationsQueryKey,
+  useGetApplications,
+} from '@squonk/data-manager-client/application';
+import { getGetJobsQueryKey, getJobs, useGetJobs } from '@squonk/data-manager-client/job';
+import { getGetProjectsQueryKey, getProjects } from '@squonk/data-manager-client/project';
+
+import { getAccessToken, withPageAuthRequired } from '@auth0/nextjs-auth0';
 import { css } from '@emotion/react';
 import { Container, Grid, MenuItem, TextField, useTheme } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
+import type { GetServerSideProps } from 'next';
 import Head from 'next/head';
 
 import { CenterLoader } from '../components/CenterLoader';
@@ -18,6 +26,42 @@ import { SearchTextField } from '../components/SearchTextField';
 import { useCurrentProject } from '../hooks/projectHooks';
 import { RoleRequired } from '../utils/RoleRequired';
 import { search } from '../utils/search';
+import { options } from '../utils/ssrQueryOptions';
+
+export const getServerSideProps: GetServerSideProps = async ({ req, res, query }) => {
+  const queryClient = new QueryClient();
+
+  try {
+    const { accessToken } = await getAccessToken(req, res);
+
+    const projectId = query.project as string | undefined;
+
+    if (projectId && accessToken) {
+      // Prefetch some data
+      const queries = [
+        queryClient.prefetchQuery(getGetProjectsQueryKey(), () =>
+          getProjects(options(accessToken)),
+        ),
+        queryClient.prefetchQuery(getGetApplicationsQueryKey(), () =>
+          getApplications(options(accessToken)),
+        ),
+        queryClient.prefetchQuery(getGetJobsQueryKey(), () => getJobs(options(accessToken))),
+      ];
+
+      // Make the queries in parallel
+      await Promise.allSettled(queries);
+    }
+  } catch (error) {
+    // TODO: smarter handling
+    console.error(error);
+  }
+
+  return {
+    props: {
+      dehydratedState: dehydrate(queryClient),
+    },
+  };
+};
 
 /**
  * Page allowing the user to run jobs and applications
diff --git a/pages/project.tsx b/pages/project.tsx
@@ -1,47 +1,67 @@
-import { useGetProjects } from '@squonk/data-manager-client/project';
+import { QueryClient } from 'react-query';
+import { dehydrate } from 'react-query/hydration';
 
-import { withPageAuthRequired } from '@auth0/nextjs-auth0';
+import { getFiles, getGetFilesQueryKey } from '@squonk/data-manager-client/file';
+import { getGetProjectsQueryKey, getProjects } from '@squonk/data-manager-client/project';
+
+import { getAccessToken, withPageAuthRequired } from '@auth0/nextjs-auth0';
 import { css } from '@emotion/react';
 import { Box, Container, Grid, Typography } from '@material-ui/core';
-import dynamic from 'next/dynamic';
+import type { GetServerSideProps } from 'next';
 import Head from 'next/head';
 import Image from 'next/image';
 
-import { CenterLoader } from '../components/CenterLoader';
 import Layout from '../components/Layout';
-import type { ProjectTableProps } from '../components/ProjectTable';
-import type { ProjectFileUploadProps } from '../components/ProjectTable/ProjectFileUpload';
-import type { ProjectAutocompleteProps } from '../components/userContext/ProjectAutocomplete';
+import { ProjectSelection } from '../components/ProjectSelection';
+import { ProjectTable } from '../components/ProjectTable';
+import { ProjectFileUpload } from '../components/ProjectTable/ProjectFileUpload';
+import { ProjectAutocomplete } from '../components/userContext/ProjectAutocomplete';
 import { useCurrentProject } from '../hooks/projectHooks';
 import { RoleRequired } from '../utils/RoleRequired';
+import { options } from '../utils/ssrQueryOptions';
+
+export const getServerSideProps: GetServerSideProps = async ({ req, res, query }) => {
+  const queryClient = new QueryClient();
+
+  try {
+    const { accessToken } = await getAccessToken(req, res);
 
-const ProjectSelection = dynamic<unknown>(
-  () => import('../components/ProjectSelection').then((mod) => mod.ProjectSelection),
-  { loading: () => <CenterLoader /> },
-);
+    const projectId = query.project as string | undefined;
+    const path = query.path as string[] | undefined;
 
-const ProjectTable = dynamic<ProjectTableProps>(
-  () => import('../components/ProjectTable').then((mod) => mod.ProjectTable),
-  { loading: () => <CenterLoader /> },
-);
+    if (projectId && accessToken) {
+      const filesParam = { project_id: projectId, path: '/' + (path?.join('/') ?? '') };
 
-const ProjectFileUpload = dynamic<ProjectFileUploadProps>(
-  () => import('../components/ProjectTable/ProjectFileUpload').then((mod) => mod.ProjectFileUpload),
-  { loading: () => <CenterLoader /> },
-);
+      // Prefetch some data
+      const queries = [
+        queryClient.prefetchQuery(getGetProjectsQueryKey(), () =>
+          getProjects(options(accessToken)),
+        ),
+        queryClient.prefetchQuery(getGetFilesQueryKey(filesParam), () =>
+          getFiles(filesParam, options(accessToken)),
+        ),
+      ];
 
-const ProjectAutocomplete = dynamic<ProjectAutocompleteProps>(
-  () =>
-    import('../components/userContext/ProjectAutocomplete').then((mod) => mod.ProjectAutocomplete),
-  { loading: () => <CenterLoader /> },
-);
+      // Make the queries in parallel
+      await Promise.allSettled(queries);
+    }
+  } catch (error) {
+    // TODO: smarter handling
+    console.error(error);
+  }
+
+  return {
+    props: {
+      dehydratedState: dehydrate(queryClient),
+    },
+  };
+};
 
 /**
  * The project page display and allows the user to manage files inside a project.
  */
 const Project = () => {
   const currentProject = useCurrentProject();
-  const { isLoading } = useGetProjects();
 
   return (
     <>
@@ -51,9 +71,7 @@ const Project = () => {
       <RoleRequired roles={process.env.NEXT_PUBLIC_KEYCLOAK_DM_USER_ROLE?.split(' ')}>
         <Layout>
           <Container>
-            {isLoading ? (
-              <CenterLoader />
-            ) : currentProject ? (
+            {currentProject ? (
               <>
                 <Grid
                   container
diff --git a/pages/results.tsx b/pages/results.tsx
@@ -22,6 +22,7 @@ import { ResultCards } from '../components/results/ResultCards';
 import { ResultsToolbar } from '../components/results/ResultToolbar';
 import { useCurrentProjectId } from '../hooks/projectHooks';
 import { RoleRequired } from '../utils/RoleRequired';
+import { options } from '../utils/ssrQueryOptions';
 
 // This was a SSR test/example. Not sure if we want to do SSR everywhere but probably should.
 export const getServerSideProps: GetServerSideProps = async ({ req, res, query }) => {
@@ -32,34 +33,19 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res, query }
 
     const projectId = query.project as string | undefined;
 
-    if (projectId) {
+    if (projectId && accessToken) {
       // Prefetch some data
       const queries = [
         queryClient.prefetchQuery(getGetProjectsQueryKey(), () =>
-          getProjects({
-            baseURL: process.env.DATA_MANAGER_API_SERVER,
-            headers: { Authorization: `Bearer ${accessToken}` },
-          }),
+          getProjects(options(accessToken)),
         ),
 
         queryClient.prefetchQuery(getGetInstancesQueryKey({ project_id: projectId }), async () =>
-          getInstances(
-            { project_id: projectId },
-            {
-              baseURL: process.env.DATA_MANAGER_API_SERVER,
-              headers: { Authorization: `Bearer ${accessToken}` },
-            },
-          ),
+          getInstances({ project_id: projectId }, options(accessToken)),
         ),
 
         queryClient.prefetchQuery(getGetTasksQueryKey({ project_id: projectId }), () =>
-          getTasks(
-            { project_id: projectId },
-            {
-              baseURL: process.env.DATA_MANAGER_API_SERVER,
-              headers: { Authorization: `Bearer ${accessToken}` },
-            },
-          ),
+          getTasks({ project_id: projectId }, options(accessToken)),
         ),
       ];
 
diff --git a/utils/ssrQueryOptions.tsx b/utils/ssrQueryOptions.tsx
@@ -0,0 +1,6 @@
+import type { AxiosRequestConfig } from 'axios';
+
+export const options = (accessToken: string): AxiosRequestConfig => ({
+  baseURL: process.env.DATA_MANAGER_API_SERVER,
+  headers: { Authorization: `Bearer ${accessToken}` },
+});
