fix: use CSR for dev and prod, use localStorage as state storage

ui/packages/app/web/src/components/NoSSR.tsx

@@ -0,0 +1,5 @@
+// simple wrapper that needs to be imported via next/dynamic.
+// this way we CSR the app in dev like in prod (SSG'd).
+const NoSSR = ({ children }) => <>{children}</>
+
+export default NoSSR

ui/packages/app/web/src/pages/_app.tsx

@@ -1,3 +1,4 @@
+import dynamic from 'next/dynamic'
 import { Container } from 'react-bootstrap'
 import 'react-dates/lib/css/_datepicker.css'
 import { StoreProvider, useCreateStore } from 'store'
@@ -10,22 +11,22 @@ import './App.scss'
 import Header from './layouts/Header'
 import ThemeProvider from './layouts/ThemeProvider'
 
+const NoSSR = dynamic(() => import('../components/NoSSR'), { ssr: false })
+
 const App = ({ Component, pageProps }) => {
-  const { persistedState } = pageProps
-  // this is only point where persisted state can come in. it's either from:
-  // - cookies headers (server)
-  // - window.__NEXT_DATA__ (client)
-  const createStore = useCreateStore(persistedState?.state)
+  const createStore = useCreateStore()
 
   return (
-    <StoreProvider createStore={createStore}>
-      <ThemeProvider>
-        <Header />
-        <Container fluid>
-          <Component {...pageProps} />
-        </Container>
-      </ThemeProvider>
-    </StoreProvider>
+    <NoSSR>
+      <StoreProvider createStore={createStore}>
+        <ThemeProvider>
+          <Header />
+          <Container fluid>
+            <Component {...pageProps} />
+          </Container>
+        </ThemeProvider>
+      </StoreProvider>
+    </NoSSR>
   )
 }
 

ui/packages/app/web/src/pages/index.tsx

@@ -1,6 +1,6 @@
+import { QueryServiceClient } from '@parca/client'
 import ProfileExplorer from 'components/ProfileExplorer'
 import { NextRouter, withRouter } from 'next/router'
-import { QueryServiceClient } from '@parca/client'
 
 const apiEndpoint = process.env.NEXT_PUBLIC_API_ENDPOINT
 

ui/packages/app/web/src/store/index.ts

@@ -1,9 +1,6 @@
-import { useLayoutEffect } from 'react'
 import create from 'zustand'
 import createContext from 'zustand/context'
 import { persist } from 'zustand/middleware'
-import CookieStorage from './cookie-storage'
-import NoopStorage from './noop-storage'
 import createUiState from './ui.state'
 
 let store
@@ -23,40 +20,23 @@ export const StoreProvider = zustandContext.Provider
 
 export const useStore = zustandContext.useStore
 
-export const initializeStore = (initialState = {}) => {
+export const initializeStore = () => {
   return create(
-    persist(
-      (set, get) => ({
-        ...stateSlices(set, get),
-        ...initialState
-      }),
-      {
-        name: 'parca',
-        whitelist: whitelistPersist,
-        getStorage: () => (typeof document !== 'undefined' ? CookieStorage : NoopStorage)
-      }
-    )
+    persist((set, get) => stateSlices(set, get), {
+      name: 'parca',
+      whitelist: whitelistPersist
+    })
   )
 }
 
-export function useCreateStore(initialState) {
+export function useCreateStore() {
   // For SSR & SSG, always use a new store.
   if (typeof window === 'undefined') {
-    return () => initializeStore(initialState)
+    return () => initializeStore()
   }
 
   // For CSR, always re-use same store.
-  store = store ?? initializeStore(initialState)
-  // And if initialState changes, then merge states in the next render cycle.
-  // @todo does initialState ever change?
-  useLayoutEffect(() => {
-    if (initialState && store) {
-      store.setState({
-        ...store.getState(),
-        ...initialState
-      })
-    }
-  }, [initialState])
+  store = store ?? initializeStore()
 
   return () => store
 }