diff --git a/issue-tracker-next-v13/app/MainViewClientComponent.tsx b/issue-tracker-next-v13/app/MainViewClientComponent.tsx
index 02fdc897..a79f827d 100644
--- a/issue-tracker-next-v13/app/MainViewClientComponent.tsx
+++ b/issue-tracker-next-v13/app/MainViewClientComponent.tsx
@@ -1,13 +1,11 @@
 "use client";
 
 import MainView from "src/components/MainView";
-import { Suspense } from "react";
+import { useRelayEnvironment } from "react-relay";
 import { SerializablePreloadedQuery } from "src/relay/loadSerializableQuery";
 import MainViewQueryNode, {
   MainViewQuery,
 } from "__generated__/MainViewQuery.graphql";
-import { getCurrentEnvironment } from "src/relay/environment";
-import { RelayEnvironmentProvider } from "react-relay";
 import useSerializablePreloadedQuery from "src/relay/useSerializablePreloadedQuery";
 
 const MainViewClientComponent = (props: {
@@ -16,19 +14,13 @@ const MainViewClientComponent = (props: {
     MainViewQuery
   >;
 }) => {
-  const environment = getCurrentEnvironment();
+  const environment = useRelayEnvironment();
   const queryRef = useSerializablePreloadedQuery(
     environment,
     props.preloadedQuery
   );
 
-  return (
-    <RelayEnvironmentProvider environment={environment}>
-      <Suspense fallback="Loading...">
-        <MainView queryRef={queryRef} />
-      </Suspense>
-    </RelayEnvironmentProvider>
-  );
+  return <MainView queryRef={queryRef} />;
 };
 
 export default MainViewClientComponent;
diff --git a/issue-tracker-next-v13/app/issues/[id]/IssueViewClientComponent.tsx b/issue-tracker-next-v13/app/issues/[id]/IssueViewClientComponent.tsx
index ab4e3ead..ae0bebc6 100644
--- a/issue-tracker-next-v13/app/issues/[id]/IssueViewClientComponent.tsx
+++ b/issue-tracker-next-v13/app/issues/[id]/IssueViewClientComponent.tsx
@@ -1,29 +1,21 @@
 "use client";
 
-import { RelayEnvironmentProvider } from "react-relay";
+import { useRelayEnvironment } from "react-relay";
 import Issue from "src/components/Issue";
-import { Suspense } from "react";
 import IssueQueryNode, { IssueQuery } from "__generated__/IssueQuery.graphql";
 import { SerializablePreloadedQuery } from "src/relay/loadSerializableQuery";
-import { getCurrentEnvironment } from "src/relay/environment";
 import useSerializablePreloadedQuery from "src/relay/useSerializablePreloadedQuery";
 
 const Root = (props: {
   preloadedQuery: SerializablePreloadedQuery<typeof IssueQueryNode, IssueQuery>;
 }) => {
-  const environment = getCurrentEnvironment();
+  const environment = useRelayEnvironment();
   const queryRef = useSerializablePreloadedQuery(
     environment,
     props.preloadedQuery
   );
 
-  return (
-    <RelayEnvironmentProvider environment={environment}>
-      <Suspense fallback="Loading...">
-        <Issue queryRef={queryRef} />
-      </Suspense>
-    </RelayEnvironmentProvider>
-  );
+  return <Issue queryRef={queryRef} />;
 };
 
 export default Root;
diff --git a/issue-tracker-next-v13/app/issues/[id]/page.tsx b/issue-tracker-next-v13/app/issues/[id]/page.tsx
index 99c644bc..eb05b145 100644
--- a/issue-tracker-next-v13/app/issues/[id]/page.tsx
+++ b/issue-tracker-next-v13/app/issues/[id]/page.tsx
@@ -1,7 +1,6 @@
 import loadSerializableQuery from "src/relay/loadSerializableQuery";
 import IssueQueryNode, { IssueQuery } from "__generated__/IssueQuery.graphql";
 import IssueViewClientComponent from "./IssueViewClientComponent";
-import styles from "styles/Issue.module.css";
 
 export default async function IssuePage({
   params,
@@ -17,9 +16,5 @@ export default async function IssuePage({
     issueNumber: parseInt(params.id, 10),
   });
 
-  return (
-    <div className={styles.issue}>
-      <IssueViewClientComponent preloadedQuery={preloadedQuery} />
-    </div>
-  );
+  return <IssueViewClientComponent preloadedQuery={preloadedQuery} />;
 }
diff --git a/issue-tracker-next-v13/app/layout.tsx b/issue-tracker-next-v13/app/layout.tsx
index 543a5950..604bfc1b 100644
--- a/issue-tracker-next-v13/app/layout.tsx
+++ b/issue-tracker-next-v13/app/layout.tsx
@@ -1,16 +1,26 @@
+"use client";
+
+import { RelayEnvironmentProvider } from "react-relay";
+import { getCurrentEnvironment } from "src/relay/environment";
 import "styles/globals.css";
 
+import styles from "styles/layout.module.css";
+
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const environment = getCurrentEnvironment();
+
   return (
     <html>
       <head>
         <title>Github Issues: Relay</title>
       </head>
-      <body>{children}</body>
+      <RelayEnvironmentProvider environment={environment}>
+        <body className={styles.layout}>{children}</body>
+      </RelayEnvironmentProvider>
     </html>
   );
 }
diff --git a/issue-tracker-next-v13/app/loading.tsx b/issue-tracker-next-v13/app/loading.tsx
new file mode 100644
index 00000000..cfb57d54
--- /dev/null
+++ b/issue-tracker-next-v13/app/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return "Loading (server side)...";
+}
diff --git a/issue-tracker-next-v13/app/page.tsx b/issue-tracker-next-v13/app/page.tsx
index e876dc24..a8909071 100644
--- a/issue-tracker-next-v13/app/page.tsx
+++ b/issue-tracker-next-v13/app/page.tsx
@@ -1,5 +1,4 @@
 import loadSerializableQuery from "src/relay/loadSerializableQuery";
-import styles from "styles/MainView.module.css";
 import MainViewQueryNode, {
   MainViewQuery,
 } from "__generated__/MainViewQuery.graphql";
@@ -14,11 +13,7 @@ const Page = async () => {
     name: "relay",
   });
 
-  return (
-    <div className={styles.main}>
-      <MainViewClientComponent preloadedQuery={preloadedQuery} />
-    </div>
-  );
+  return <MainViewClientComponent preloadedQuery={preloadedQuery} />;
 };
 
 export default Page;
diff --git a/issue-tracker-next-v13/src/components/Issue.tsx b/issue-tracker-next-v13/src/components/Issue.tsx
index 897bb265..21352bd4 100644
--- a/issue-tracker-next-v13/src/components/Issue.tsx
+++ b/issue-tracker-next-v13/src/components/Issue.tsx
@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { graphql, PreloadedQuery, usePreloadedQuery } from "react-relay";
 import { IssueQuery } from "__generated__/IssueQuery.graphql";
 
@@ -20,10 +21,10 @@ export default function Issue(props: { queryRef: PreloadedQuery<IssueQuery> }) {
   );
 
   return (
-    <>
+    <Suspense fallback="Loading (client side)...">
       <h1>{data.repository?.issue?.title}</h1>
       <p>{data.repository?.issue?.bodyText}</p>
       <p>Author: {data.repository?.issue?.author?.login}</p>
-    </>
+    </Suspense>
   );
 }
diff --git a/issue-tracker-next-v13/src/components/Issues.tsx b/issue-tracker-next-v13/src/components/Issues.tsx
index f8471824..ad751ad6 100644
--- a/issue-tracker-next-v13/src/components/Issues.tsx
+++ b/issue-tracker-next-v13/src/components/Issues.tsx
@@ -8,7 +8,7 @@ import styles from "styles/Issues.module.css";
 export default function Issues(props: {
   repository: IssuesFragment$key | null;
 }) {
-  const { data, loadNext, isLoadingNext } = usePaginationFragment<
+  const { data, loadNext, isLoadingNext, refetch } = usePaginationFragment<
     IssuesPaginationQuery,
     IssuesFragment$key
   >(
@@ -67,6 +67,15 @@ export default function Issues(props: {
         <button onClick={loadMore} disabled={isLoadingNext}>
           {isLoadingNext ? "Loading..." : "Load More"}
         </button>
+        <button
+          onClick={() =>
+            refetch({
+              count: 20,
+            })
+          }
+        >
+          Refetch with 20 items
+        </button>
       </li>
     </ul>
   );
diff --git a/issue-tracker-next-v13/src/components/MainView.tsx b/issue-tracker-next-v13/src/components/MainView.tsx
index 3c5ab7c0..055f962d 100644
--- a/issue-tracker-next-v13/src/components/MainView.tsx
+++ b/issue-tracker-next-v13/src/components/MainView.tsx
@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { graphql, PreloadedQuery, usePreloadedQuery } from "react-relay";
 import { MainViewQuery } from "__generated__/MainViewQuery.graphql";
 import Issues from "./Issues";
@@ -21,11 +22,11 @@ export default function MainView(props: {
   );
 
   return (
-    <div>
+    <Suspense fallback="Loading (client side)...">
       <h1>
         {data.repository?.owner.login}/{data.repository?.name}
       </h1>
       <Issues repository={data.repository} />
-    </div>
+    </Suspense>
   );
 }
diff --git a/issue-tracker-next-v13/styles/MainView.module.css b/issue-tracker-next-v13/styles/MainView.module.css
deleted file mode 100644
index e3f329e4..00000000
--- a/issue-tracker-next-v13/styles/MainView.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.main {
-  padding: 4rem 0 0;
-  margin: 0 auto;
-  max-width: 800px;
-}
diff --git a/issue-tracker-next-v13/styles/Issue.module.css b/issue-tracker-next-v13/styles/layout.module.css
similarity index 85%
rename from issue-tracker-next-v13/styles/Issue.module.css
rename to issue-tracker-next-v13/styles/layout.module.css
index 1233df73..51a88686 100644
--- a/issue-tracker-next-v13/styles/Issue.module.css
+++ b/issue-tracker-next-v13/styles/layout.module.css
@@ -1,4 +1,4 @@
-.issue {
+.layout {
   padding: 4rem 0 0;
   margin: 0 auto;
   max-width: 800px;