From a31777244236926f591fe3bc6c0c8e40a8e9642f Mon Sep 17 00:00:00 2001
From: jdecroock <decroockjovi@gmail.com>
Date: Sat, 2 Sep 2023 10:44:15 +0200
Subject: [PATCH] put the ssr and client creation inside of the React function
 body to avoid leaking ssr results

---
 docs/advanced/server-side-rendering.md    | 19 ++++++++++++-------
 examples/with-next/app/non-rsc/layout.tsx | 19 ++++++++++++-------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/docs/advanced/server-side-rendering.md b/docs/advanced/server-side-rendering.md
index 4893caf740..7fcfc54b8e 100644
--- a/docs/advanced/server-side-rendering.md
+++ b/docs/advanced/server-side-rendering.md
@@ -232,16 +232,21 @@ structure it as the following.
 // app/client/layout.tsx
 'use client';
 
+import { useMemo } from 'react';
 import { UrqlProvider, ssrExchange, cacheExchange, fetchExchange, createClient } from '@urql/next';
 
-const ssr = ssrExchange();
-const client = createClient({
-  url: 'https://trygql.formidable.dev/graphql/web-collections',
-  exchanges: [cacheExchange, ssr, fetchExchange],
-  suspense: true,
-});
-
 export default function Layout({ children }: React.PropsWithChildren) {
+  const [client, ssr] = useMemo(() => {
+    const ssr = ssrExchange();
+    const client = createClient({
+      url: 'https://trygql.formidable.dev/graphql/web-collections',
+      exchanges: [cacheExchange, ssr, fetchExchange],
+      suspense: true,
+    });
+
+    return [client, ssr];
+  }, []);
+
   return (
     <UrqlProvider client={client} ssr={ssr}>
       {children}
diff --git a/examples/with-next/app/non-rsc/layout.tsx b/examples/with-next/app/non-rsc/layout.tsx
index bfa02e222f..17fcda0e50 100644
--- a/examples/with-next/app/non-rsc/layout.tsx
+++ b/examples/with-next/app/non-rsc/layout.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useMemo } from 'react';
 import {
   UrqlProvider,
   ssrExchange,
@@ -8,14 +9,18 @@ import {
   createClient,
 } from '@urql/next';
 
-const ssr = ssrExchange();
-const client = createClient({
-  url: 'https://graphql-pokeapi.graphcdn.app/',
-  exchanges: [cacheExchange, ssr, fetchExchange],
-  suspense: true,
-});
-
 export default function Layout({ children }: React.PropsWithChildren) {
+  const [client, ssr] = useMemo(() => {
+    const ssr = ssrExchange();
+    const client = createClient({
+      url: 'https://trygql.formidable.dev/graphql/web-collections',
+      exchanges: [cacheExchange, ssr, fetchExchange],
+      suspense: true,
+    });
+
+    return [client, ssr];
+  }, []);
+
   return (
     <UrqlProvider client={client} ssr={ssr}>
       {children}