Is use client enough to prevent SSR?

[alamenai]

Summary

Hi, I have this component that use google maps api library

"use client"

import { defaultLocation } from "@/features/viewer/components"
import { cn } from "@/lib/utils"
import { GoogleMap, StreetViewPanorama } from "@react-google-maps/api"
import dynamic from "next/dynamic"
import { parseAsFloat, useQueryState } from "nuqs"

import { ViewProps } from "./google-view-card"

const GoogleMapViewComponent = ({ viewMode, options }: ViewProps) => {
  const [lng] = useQueryState("lng", parseAsFloat.withDefault(defaultLocation[0]))
  const [lat] = useQueryState("lat", parseAsFloat.withDefault(defaultLocation[1]))

  const isStreetView = viewMode === "street"
  const isFullScreen = viewMode !== "both"

  return (
    <GoogleMap
      mapContainerClassName={cn(
        "flex-1 w-full h-full rounded-t-none rounded-b-2xl",
        isFullScreen ? "min-h-[680px]" : "min-h-0"
      )}
      center={{ lat, lng }}
      options={{
        ...options,
        tilt: isStreetView ? 0 : 45,
        mapTypeId: isStreetView ? "roadmap" : "satellite",
        zoom: isStreetView ? 10 : 20,
        fullscreenControl: isFullScreen,
        zoomControl: isFullScreen,
        cameraControl: true,
      }}
    >
      <StreetViewPanorama
        options={{
          addressControl: false,
          fullscreenControl: isFullScreen,
          zoomControl: isFullScreen,
          position: { lat, lng },
          visible: isStreetView,
          motionTracking: false,
          motionTrackingControl: false,
        }}
      />
    </GoogleMap>
  )
}

// Export with dynamic import and ssr: false
// This prevents "google.maps.Map is not a constructor" errors by ensuring
// the component only renders on the client side where the Google Maps API is available
export const GoogleMapView = dynamic(() => Promise.resolve(GoogleMapViewComponent), { ssr: false })

I had an issue that happens sometimes when I refresh the page where it says: google.maps.Map is not a contrustor:

However, when I added this line based on this section from Next.js

export const GoogleMapView = dynamic(() => Promise.resolve(GoogleMapViewComponent), { ssr: false })

The issue went away, but I did not understand it well what happens behind the scenes.

Additional information

No response

Example

No response

[eddienubes]

No, use client and use server directives only define how the component should be bundled, with access to client or server APIs accordingly.
However, both of these will be SSR-ed nevertheless unless you apply that dynamic import with ssr: false

Also, in my experience dynamic(() => Promise.resolve(GoogleMapViewComponent)... sometimes may not be enough and you have to use an actual dynamic import('component_path').

Particularly, I had issues with a client component using Google Drive Picker. https://github.com/googleworkspace/drive-picker-element

[alamenai]

Thank you @eddiejaoude . Do you suggest to import the component dynamically and disabling the SSR, right?

[eddienubes]

@alamenai
I think you misspelled my username and tagged another person 😄
If the dynamic + Promise.resolve(YourComponent) works for you, then it's fine.

As I mentioned, my corner case involved something else and required dynamic import() as well, instead of a simple Promise.resolve().