Reduce fetching during ssr (#1304)

* Reduce fetching during ssr

* Add a couple more withNoSsr calls

Author: nygrenh

frontend/lib/with-apollo-client/get-apollo.ts

@@ -75,6 +75,7 @@ function create(
   initialState: any,
   originalAccessToken?: string,
   locale?: string,
+  skipSsrFetch?: boolean,
 ) {
   const authLink = setContext((_, { headers }) => {
     // Always get the current access token from cookies in case it has changed
@@ -206,6 +207,13 @@ function create(
     })
   })
 
+  const skipSsrFetchLink = new ApolloLink(() => {
+    return new Observable((observer) => {
+      observer.next({ data: null })
+      observer.complete()
+    })
+  })
+
   const cache = createCache()
 
   return new ApolloClient<NormalizedCacheObject>({
@@ -215,6 +223,8 @@ function create(
             isDefinedAndNotEmpty,
           ),
         )
+      : skipSsrFetch
+      ? skipSsrFetchLink
       : ApolloLink.from(
           [
             development ? metricsLink : undefined,
@@ -246,6 +256,7 @@ export default function getApollo(
   initialState: any,
   accessToken?: string,
   locale?: string,
+  skipSsrFetch?: boolean,
 ) {
   const userChanged = accessToken !== previousAccessToken
   const localeChanged = locale !== previousLocale
@@ -256,7 +267,7 @@ export default function getApollo(
   const _apolloClient =
     !userChanged && !localeChanged && isBrowser
       ? apolloClient ?? create(initialState, accessToken, locale)
-      : create(undefined, accessToken, locale)
+      : create(undefined, accessToken, locale, skipSsrFetch)
 
   previousAccessToken = accessToken
   previousLocale = locale

frontend/lib/with-apollo-client/index.tsx

@@ -15,6 +15,7 @@ interface Props {
   apolloState: any
   accessToken?: string
   router?: Router
+  skipSsrFetch?: boolean
 }
 
 const isAppContext = (ctx: AppContext | NextPageContext): ctx is AppContext => {
@@ -27,12 +28,18 @@ const withApolloClient = (App: any) => {
     apollo,
     apolloState,
     accessToken,
+    skipSsrFetch,
     ...pageProps
   }: Props) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const router = useRouter()
     const locale = router.locale ?? pageProps?.router?.locale
-    const apolloClient = getApollo(apolloState, accessToken, locale)
+    const apolloClient = getApollo(
+      apolloState,
+      accessToken,
+      locale,
+      skipSsrFetch,
+    )
 
     return (
       <ApolloProvider client={apolloClient}>
@@ -62,7 +69,13 @@ const withApolloClient = (App: any) => {
         : ({} as any)
 
     if (!signedIn) {
-      const apollo = getApollo(apolloState, accessToken, ctx.locale)
+      const skipSsrFetch = typeof window === "undefined"
+      const apollo = getApollo(
+        apolloState,
+        accessToken,
+        ctx.locale,
+        skipSsrFetch,
+      )
 
       if (!pageProps.pageProps) {
         pageProps.pageProps = {}
@@ -79,6 +92,7 @@ const withApolloClient = (App: any) => {
         accessToken,
         apolloState,
         apollo,
+        skipSsrFetch,
       }
     }
 

frontend/pages/index.tsx

@@ -5,6 +5,7 @@ import Hype from "/components/NewLayout/Frontpage/Hype"
 import { ModuleNavigation } from "/components/NewLayout/Frontpage/Modules"
 // import News from "/components/NewLayout/Frontpage/News"
 import SelectedCourses from "/components/NewLayout/Frontpage/SelectedCourses"
+import withNoSsr from "/util/withNoSsr"
 
 // import UkraineInfo from "/components/NewLayout/Frontpage/UkraineInfo"
 
@@ -32,4 +33,4 @@ const Home = () => {
   )
 }
 
-export default Home
+export default withNoSsr(Home)

frontend/pages/study-modules/index.tsx

@@ -1,5 +1,6 @@
 import { StudyModuleList } from "/components/NewLayout/Modules"
 import { useBreadcrumbs } from "/hooks/useBreadcrumbs"
+import withNoSsr from "/util/withNoSsr"
 
 function StudyModules() {
   useBreadcrumbs([
@@ -16,4 +17,4 @@ function StudyModules() {
   )
 }
 
-export default StudyModules
+export default withNoSsr(StudyModules)