Rename utility isClient to isBrowser (#1389)

* Rename utility `isClient` to `isBrowser`

* Switch to document check instead of window

* Apply suggestions from code review

Co-authored-by: Michelle Vinci <michelle.vinci@shopify.com>

* Update docs/utilities/isserver.md

Co-authored-by: Michelle Vinci <michelle.vinci@shopify.com>

Co-authored-by: Michelle Vinci <michelle.vinci@shopify.com>

.changeset/chilled-baboons-deny.md

@@ -0,0 +1,9 @@
+---
+'@shopify/hydrogen': minor
+---
+
+**Breaking change**
+
+The utility `isClient` has been renamed to `isBrowser`. This is because the utility really checks if the running context is a browser, _not_ if the context is a client component.
+
+All client components by default also run on the server when they are server rendered. If you don't want that to happen, use the `isBrowser()` hook. Remember that anything not server rendered will be unavailable for SEO bots.

docs/utilities/isbrowser.md

@@ -0,0 +1,33 @@
+---
+gid: 232fa7f6-5c17-4659-b8c8-4466be88d602
+title: isBrowser
+description: The isBrowser utility is a function that returns a Boolean indicating if the code was run in the browser.
+---
+
+The `isBrowser` utility is a function that returns a Boolean indicating if the code was run in the browser. This is useful because client components are server-rendered. Use the `isBrowser` utility if you don't want logic within your client component to be rendered on the server.
+
+## Example code
+
+```tsx
+import {isBrowser} from '@shopify/hydrogen';
+
+export function MyComponent() {
+  if (isBrowser()) {
+    return <p>I ran in the browser</p>;
+  }
+
+  return <p>I ran on the server</p>;
+}
+```
+
+## Arguments
+
+None
+
+## Return type
+
+A Boolean indicating if the code was run in the browser.
+
+## Related utilities
+
+- [`isServer`](https://shopify.dev/api/hydrogen/utilities/isserver)

docs/utilities/isserver.md

@@ -31,4 +31,4 @@ A Boolean indicating if the code was run on the server.
 
 ## Related utilities
 
-- [`isClient`](api/hydrogen/utilities/isclient)
+- [`isBrowser`](https://shopify.dev/api/hydrogen/utilities/isbrowser)

packages/hydrogen/src/utilities/index.ts

@@ -12,7 +12,7 @@ export {
 export {loadScript} from './load_script';
 export {wrapPromise} from './suspense';
 export {flattenConnection} from './flattenConnection';
-export {isClient} from './isClient';
+export {isBrowser} from './isBrowser';
 export {isServer} from './isServer';
 export {getMeasurementAsParts, getMeasurementAsString} from './measurement';
 export {parseMetafieldValue} from './parseMetafieldValue';

packages/hydrogen/src/utilities/isBrowser/index.ts

@@ -0,0 +1 @@
+export {isBrowser} from './isBrowser';

packages/hydrogen/src/utilities/isBrowser/isBrowser.ts

@@ -0,0 +1,6 @@
+/** The `isClient` utility is a function that returns a boolean indicating
+ * if the code was run in the browser.
+ */
+export function isBrowser() {
+  return typeof document !== 'undefined';
+}

packages/hydrogen/src/utilities/isServer/isServer.ts

@@ -1,8 +1,8 @@
-import {isClient} from '../isClient';
+import {isBrowser} from '../isBrowser';
 
 /** The `isServer` utility is a function that returns a `boolean` indicating
  * if the code was run on the server.
  */
 export function isServer() {
-  return !isClient();
+  return !isBrowser();
 }