Cant generate Static pages because navbar uses SSR for user

[zaynelovecraft]

trafficstars

I want to extend this app to include some Static pages that's use ISR for product pages. However due to the navbar using SSR to get the user and the nav bar is in the root layout. It is causing all my pages to be SSR pages. How can I fix this? Thanks for your time and help.

[ajayvignesh01]

If that's the only component that's causing it, you can change that part to use either SWR or useEffect like this:

SWR

  const supabase = createClientComponentClient()
  
  const getUser = async () => {
    const { data: { user } } = await supabase.auth.getUser()
    return user
  }

  const { data: user } = useSWRImmutable('getUser', getUser)

useEffect

const [user, setUser] = useState<User>()

useEffect(() => {
  const supabase = createClientComponentClient()

  async function getUser() {
    const { data: { user } } = await supabase.auth.getUser()
    return user
  }

  getUser().then((user) => setUser(user))
}, [])

Make sure you 'use client' at top of page and import the necessary modules.

[zaynelovecraft]

Thank you for your prompt reply. I was wondering if there is a way to retain the supabase request for user information on the server, while also being able to statically generate or cache the rest of the page. I believed that Next.js 13 made this possible. Can I keep the navbar as it is, but use generateStaticParams for multiple static pages to be pre-built beforehand?

[chriscarrollsmith]

Thank you for your prompt reply. I was wondering if there is a way to retain the supabase request for user information on the server, while also being able to statically generate or cache the rest of the page. I believed that Next.js 13 made this possible. Can I keep the navbar as it is, but use generateStaticParams for multiple static pages to be pre-built beforehand?

At the top of each page or component, you can add 'use client' or 'use server' as desired. Typically you want server components to be above client components in the tree, but technically I believe you can chain them however you want.

But for static content, why wouldn't you want them to be rendered server-side? Rendering static content is, like, one of the main use cases for SSR.