Turn on Remix v3_singleFetch future flag

docs/preview/app/root.tsx

@@ -1,4 +1,4 @@
-import {json, type LinksFunction} from '@remix-run/node';
+import {type LinksFunction} from '@remix-run/node';
 import {
   Links,
   Meta,
@@ -26,9 +26,7 @@ export async function loader() {
     }
   }
 
-  return json({
-    data,
-  });
+  return {data};
 }
 
 export default function App() {

docs/preview/app/routes/$doc.tsx

@@ -9,7 +9,7 @@ import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
 import {oneDark} from 'react-syntax-highlighter/dist/cjs/styles/prism/index.js';
 
 export async function loader({params}: LoaderFunctionArgs) {
-  return json({doc: params.doc});
+  return {doc: params.doc};
 }
 
 function getDefinition(definitions: any, type: string) {

docs/preview/vite.config.js

@@ -23,6 +23,7 @@ export default defineConfig({
         v3_fetcherPersist: false,
         v3_relativeSplatPath: false,
         v3_throwAbortReason: false,
+        v3_singleFetch: true,
       },
     }),
     tsconfigPaths(),

docs/shopify-dev/analytics-setup/js/app/entry-server.jsx

@@ -30,7 +30,7 @@ export default async function handleRequest(
 
   const body = await renderToReadableStream(
     <NonceProvider>
-      <RemixServer context={remixContext} url={request.url} />
+      <RemixServer context={remixContext} url={request.url} nonce={nonce} />
     </NonceProvider>,
     {
       nonce,

docs/shopify-dev/analytics-setup/js/app/root.jsx

@@ -5,7 +5,6 @@ import {
   Analytics,
   // [END import]
 } from '@shopify/hydrogen';
-import {defer} from '@shopify/remix-oxygen';
 import {
   Links,
   Meta,
@@ -83,7 +82,7 @@ export async function loader(args) {
   const {storefront, env} = args.context;
   // [END env]
 
-  return defer({
+  return {
     ...deferredData,
     ...criticalData,
     publicStoreDomain: env.PUBLIC_STORE_DOMAIN,
@@ -103,7 +102,7 @@ export async function loader(args) {
       language: args.context.storefront.i18n.language,
     },
      // [END consent]
-  });
+  };
 }
 
 /**

docs/shopify-dev/analytics-setup/js/app/routes/cart.jsx

@@ -1,6 +1,6 @@
 import {useLoaderData} from '@remix-run/react';
 import {CartForm, Analytics} from '@shopify/hydrogen';
-import {json} from '@shopify/remix-oxygen';
+import {data} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/CartMain';
 
 /**
@@ -81,7 +81,7 @@ export async function action({request, context}) {
     headers.set('Location', redirectTo);
   }
 
-  return json(
+  return data(
     {
       cart: cartResult,
       errors,
@@ -99,7 +99,7 @@ export async function action({request, context}) {
  */
 export async function loader({context}) {
   const {cart} = context;
-  return json(await cart.get());
+  return await cart.get();
 }
 
 export default function Cart() {

docs/shopify-dev/analytics-setup/js/app/routes/collections.$handle.jsx

@@ -26,7 +26,7 @@ export async function loader(args) {
   // Await the critical data required to render initial state of the page
   const criticalData = await loadCriticalData(args);
 
-  return defer({...deferredData, ...criticalData});
+  return {...deferredData, ...criticalData};
 }
 
 /**

docs/shopify-dev/analytics-setup/js/app/routes/products.$handle.jsx

@@ -32,7 +32,7 @@ export async function loader(args) {
   // Await the critical data required to render initial state of the page
   const criticalData = await loadCriticalData(args);
 
-  return defer({...deferredData, ...criticalData});
+  return {...deferredData, ...criticalData};
 }
 
 /**

docs/shopify-dev/analytics-setup/js/app/routes/search.jsx

@@ -1,4 +1,3 @@
-import {json} from '@shopify/remix-oxygen';
 import {useLoaderData} from '@remix-run/react';
 import {getPaginationVariables, Analytics} from '@shopify/hydrogen';
 import {SearchForm} from '~/components/SearchForm';
@@ -27,7 +26,7 @@ export async function loader({request, context}) {
     return {term: '', result: null, error: error.message};
   });
 
-  return json(await searchPromise);
+  return await searchPromise;
 }
 
 /**

docs/shopify-dev/analytics-setup/ts/app/entry-server.tsx

@@ -29,7 +29,7 @@ export default async function handleRequest(
 
   const body = await renderToReadableStream(
     <NonceProvider>
-      <RemixServer context={remixContext} url={request.url} />
+      <RemixServer context={remixContext} url={request.url} nonce={nonce} />
     </NonceProvider>,
     {
       nonce,

docs/shopify-dev/analytics-setup/ts/app/root.tsx

@@ -5,7 +5,7 @@ import {
   Analytics,
   // [END import]
 } from '@shopify/hydrogen';
-import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {
   Links,
   Meta,
@@ -83,7 +83,7 @@ export async function loader(args: LoaderFunctionArgs) {
   // Await the critical data required to render initial state of the page
   const criticalData = await loadCriticalData(args);
 
-  return defer({
+  return {
     ...deferredData,
     ...criticalData,
     publicStoreDomain: env.PUBLIC_STORE_DOMAIN,
@@ -103,7 +103,7 @@ export async function loader(args: LoaderFunctionArgs) {
       language: storefront.i18n.language,
     },
     // [END consent]
-  });
+  };
 }
 
 /**

docs/shopify-dev/analytics-setup/ts/app/routes/cart.tsx

@@ -1,7 +1,7 @@
 import {type MetaFunction, useLoaderData} from '@remix-run/react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm, Analytics} from '@shopify/hydrogen';
-import {json, type LoaderFunctionArgs, type ActionFunctionArgs} from '@shopify/remix-oxygen';
+import {data, type LoaderFunctionArgs, type ActionFunctionArgs} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/CartMain';
 
 export const meta: MetaFunction = () => {
@@ -80,7 +80,7 @@ export async function action({request, context}: ActionFunctionArgs) {
     headers.set('Location', redirectTo);
   }
 
-  return json(
+  return data(
     {
       cart: cartResult,
       errors,
@@ -95,7 +95,7 @@ export async function action({request, context}: ActionFunctionArgs) {
 
 export async function loader({context}: LoaderFunctionArgs) {
   const {cart} = context;
-  return json(await cart.get());
+  return await cart.get();
 }
 
 export default function Cart() {

docs/shopify-dev/analytics-setup/ts/app/routes/collections.$handle.tsx

@@ -1,4 +1,4 @@
-import {defer, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {useLoaderData, Link, type MetaFunction} from '@remix-run/react';
 import {
   getPaginationVariables,
@@ -21,7 +21,7 @@ export async function loader(args: LoaderFunctionArgs) {
   // Await the critical data required to render initial state of the page
   const criticalData = await loadCriticalData(args);
 
-  return defer({...deferredData, ...criticalData});
+  return {...deferredData, ...criticalData};
 }
 
 /**

docs/shopify-dev/analytics-setup/ts/app/routes/products.$handle.tsx

@@ -1,6 +1,5 @@
-import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {useLoaderData, type MetaFunction} from '@remix-run/react';
-import type {ProductFragment} from 'storefrontapi.generated';
 import {
   getSelectedProductOptions,
   // [START import]
@@ -11,8 +10,6 @@ import {
   getAdjacentAndFirstAvailableVariants,
   useSelectedOptionInUrlParam,
 } from '@shopify/hydrogen';
-import type {SelectedOption} from '@shopify/hydrogen/storefront-api-types';
-import {getVariantUrl} from '~/lib/variants';
 import {ProductPrice} from '~/components/ProductPrice';
 import {ProductImage} from '~/components/ProductImage';
 import {ProductForm} from '~/components/ProductForm';
@@ -28,7 +25,7 @@ export async function loader(args: LoaderFunctionArgs) {
   // Await the critical data required to render initial state of the page
   const criticalData = await loadCriticalData(args);
 
-  return defer({...deferredData, ...criticalData});
+  return {...deferredData, ...criticalData};
 }
 
 /**

docs/shopify-dev/analytics-setup/ts/app/routes/search.tsx

@@ -1,5 +1,4 @@
 import {
-  json,
   type LoaderFunctionArgs,
   type ActionFunctionArgs,
 } from '@shopify/remix-oxygen';
@@ -29,7 +28,7 @@ export async function loader({request, context}: LoaderFunctionArgs) {
     return {term: '', result: null, error: error.message};
   });
 
-  return json(await searchPromise);
+  return await searchPromise;
 }
 
 /**

examples/b2b/app/root.tsx

@@ -1,5 +1,5 @@
 import {useNonce, getShopAnalytics, Analytics} from '@shopify/hydrogen';
-import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {
   Links,
   Meta,
@@ -119,7 +119,7 @@ export async function loader({context}: LoaderFunctionArgs) {
     },
   });
 
-  return defer({
+  return {
     cart: cartPromise,
     footer: footerPromise,
     header: await headerPromise,
@@ -137,7 +137,7 @@ export async function loader({context}: LoaderFunctionArgs) {
       country: context.storefront.i18n.country,
       language: context.storefront.i18n.language,
     },
-  });
+  };
 }
 
 export function Layout({children}: {children?: React.ReactNode}) {

examples/b2b/app/routes/b2blocations.tsx

@@ -1,4 +1,4 @@
-import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {useLoaderData} from '@remix-run/react';
 import {B2BLocationSelector} from '../components/B2BLocationSelector';
 import {CUSTOMER_LOCATIONS_QUERY} from '~/graphql/customer-account/CustomerLocationsQuery';
@@ -30,7 +30,7 @@ export async function loader({context}: LoaderFunctionArgs) {
 
   const modalOpen = Boolean(company) && !companyLocationId;
 
-  return defer({company, companyLocationId, modalOpen});
+  return {company, companyLocationId, modalOpen};
 }
 
 export default function CartRoute() {

examples/b2b/app/routes/products.$handle.tsx

@@ -1,4 +1,4 @@
-import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {useLoaderData, type MetaFunction} from '@remix-run/react';
 import {
   getSelectedProductOptions,
@@ -53,7 +53,7 @@ export async function loader(args: LoaderFunctionArgs) {
   /**********   EXAMPLE UPDATE END   *************/
   /***********************************************/
 
-  return defer({...deferredData, ...criticalData});
+  return {...deferredData, ...criticalData};
 }
 
 /**

examples/b2b/tsconfig.json

@@ -4,7 +4,8 @@
     "./**/*.d.ts",
     "./**/*.ts",
     "./**/*.tsx",
-    "../../templates/skeleton/*.d.ts"
+    "../../templates/skeleton/*.d.ts",
+    "../../templates/skeleton/vite.config.ts"
   ],
   "compilerOptions": {
     "baseUrl": ".",

examples/classic-remix/app/root.tsx

@@ -1,5 +1,5 @@
 import {useNonce, getShopAnalytics, Analytics} from '@shopify/hydrogen';
-import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {
   Links,
   Meta,
@@ -72,7 +72,7 @@ export async function loader(args: LoaderFunctionArgs) {
 
   const {storefront, env} = args.context;
 
-  return defer({
+  return {
     ...criticalData,
     ...deferredData,
     publicStoreDomain: env.PUBLIC_STORE_DOMAIN,
@@ -84,7 +84,7 @@ export async function loader(args: LoaderFunctionArgs) {
       checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
       storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
     },
-  });
+  };
 }
 
 /**

examples/classic-remix/remix.config.js

@@ -21,5 +21,6 @@ module.exports = {
     v3_relativeSplatpath: true,
     v3_throwAbortReason: true,
     v3_lazyRouteDiscovery: true,
+    v3_singleFetch: true,
   },
 };

examples/classic-remix/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "../../templates/skeleton/tsconfig.json",
-  "include": ["./**/*.d.ts", "./**/*.ts", "./**/*.tsx"],
+  "include": ["./**/*.d.ts", "./**/*.ts", "./**/*.tsx", "../../templates/skeleton/vite.config.ts"],
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {

examples/custom-cart-method/app/routes/cart.tsx

@@ -1,7 +1,7 @@
 import {type MetaFunction, useLoaderData} from '@remix-run/react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
-import {json, type LoaderFunctionArgs, type ActionFunctionArgs} from '@shopify/remix-oxygen';
+import {data, type LoaderFunctionArgs, type ActionFunctionArgs} from '@shopify/remix-oxygen';
 import type {
   SelectedOptionInput,
   CartLineUpdateInput,
@@ -103,7 +103,7 @@ export async function action({request, context}: ActionFunctionArgs) {
     headers.set('Location', redirectTo);
   }
 
-  return json(
+  return data(
     {
       cart: cartResult,
       errors,
@@ -117,7 +117,7 @@ export async function action({request, context}: ActionFunctionArgs) {
 
 export async function loader({context}: LoaderFunctionArgs) {
   const {cart} = context;
-  return json(await cart.get());
+  return await cart.get();
 }
 
 export default function Cart() {

examples/custom-cart-method/tsconfig.json

@@ -4,7 +4,8 @@
     "./**/*.d.ts",
     "./**/*.ts",
     "./**/*.tsx",
-    "../../templates/skeleton/*.d.ts"
+    "../../templates/skeleton/*.d.ts",
+    "../../templates/skeleton/vite.config.ts"
   ],
   "compilerOptions": {
     "baseUrl": ".",