fix: Add SSR support by enforcing client-side rendering and using dynamic imports

.changeset/busy-pillows-taste.md

@@ -0,0 +1,5 @@
+---
+"@googleworkspace/drive-picker-react": minor
+---
+
+Add SSR support by enforcing client-side rendering and using dynamic imports.

.changeset/grumpy-coats-join.md

@@ -0,0 +1,5 @@
+---
+"@googleworkspace/drive-picker-element": patch
+---
+
+Update link to React component in README.

packages/drive-picker-element/README.md

@@ -10,10 +10,9 @@ The Google Picker API is a JavaScript API that allows users to select or upload
 
 Explore the [storybook demo](https://googleworkspace.github.io/drive-picker-element/?path=/docs/stories-drive-picker--docs) to see the component in action.
 
-See the framework specific demos:
+See the framework specific components:
 
-- [React](https://codesandbox.io/p/sandbox/xenodochial-leaf-j2xtdq)
-- [Svelte](https://codesandbox.io/p/sandbox/svelte-drive-picker-kd9swx)
+- [React](#react)
 
 ## Index
 

packages/drive-picker-react/README.md

@@ -71,3 +71,37 @@ For more details on the event payloads, see the [Event Details section of the `@
 ## Reference
 
 This component is a wrapper. For detailed information about the underlying web component's attributes, events, and slots, please refer to the [`@googleworkspace/drive-picker-element` README](https://github.com/googleworkspace/drive-picker-element/tree/main/packages/drive-picker-element).
+
+## Server-Side Rendering (SSR)
+
+This component is designed to work in client-side environments only, as it relies on browser-specific APIs (like `customElements`).
+
+The component includes the `"use client"` directive, which makes it compatible with React Server Components (RSC) in frameworks like Next.js.
+
+However, if you encounter issues with SSR or prefer to be explicit, you can use dynamic imports to disable SSR for this component.
+
+### Next.js Example
+
+Using `next/dynamic`:
+
+```tsx
+import dynamic from 'next/dynamic';
+
+const DrivePicker = dynamic(
+  () => import('@googleworkspace/drive-picker-react').then((mod) => mod.DrivePicker),
+  { ssr: false }
+);
+
+const DrivePickerDocsView = dynamic(
+  () => import('@googleworkspace/drive-picker-react').then((mod) => mod.DrivePickerDocsView),
+  { ssr: false }
+);
+
+function App() {
+  return (
+    <DrivePicker ...>
+      <DrivePickerDocsView ... />
+    </DrivePicker>
+  );
+}
+```

packages/drive-picker-react/src/DrivePicker.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 /**
  * Copyright 2025 Google LLC
  *
@@ -19,8 +21,7 @@ import type {
 	DrivePickerElementProps,
 } from "@googleworkspace/drive-picker-element";
 import type React from "react";
-import { useRef } from "react";
-import "@googleworkspace/drive-picker-element";
+import { useEffect, useRef } from "react";
 import type { DrivePickerDocsViewProps } from "./DrivePickerDocsView";
 import {
 	type DrivePickerEventHandlers,
@@ -80,6 +81,10 @@ export const DrivePicker: React.FC<DrivePickerProps> = (props) => {
 		onOauthResponse,
 	});
 
+	useEffect(() => {
+		import("@googleworkspace/drive-picker-element");
+	}, []);
+
 	return (
 		<drive-picker ref={ref} {...rest}>
 			{children}

packages/drive-picker-react/src/DrivePickerDocsView.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 /**
  * Copyright 2025 Google LLC
  *