vercel · leerob · Apr 18, 2024 · Nov 8, 2023 · Nov 8, 2023 · Nov 10, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,8 +2,8 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true,
-    "source.organizeImports": true,
-    "source.sortMembers": true
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit",
+    "source.sortMembers": "explicit"
   }
 }
diff --git a/app/[page]/layout.tsx b/app/[page]/layout.tsx
@@ -1,15 +1,12 @@
 import Footer from 'components/layout/footer';
-import { Suspense } from 'react';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <Suspense>
+    <>
       <div className="w-full">
-        <div className="mx-8 max-w-2xl py-20 sm:mx-auto">
-          <Suspense>{children}</Suspense>
-        </div>
+        <div className="mx-8 max-w-2xl py-20 sm:mx-auto">{children}</div>
       </div>
       <Footer />
-    </Suspense>
+    </>
   );
 }
diff --git a/app/[page]/page.tsx b/app/[page]/page.tsx
@@ -4,10 +4,6 @@ import Prose from 'components/prose';
 import { getPage } from 'lib/shopify';
 import { notFound } from 'next/navigation';
 
-export const runtime = 'edge';
-
-export const revalidate = 43200; // 12 hours in seconds
-
 export async function generateMetadata({
   params
 }: {

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,7 +1,7 @@
 import Navbar from 'components/layout/navbar';
-import { GeistSans } from 'geist/font';
+import { GeistSans } from 'geist/font/sans';
 import { ensureStartsWith } from 'lib/utils';
-import { ReactNode, Suspense } from 'react';
+import { ReactNode } from 'react';
 import './globals.css';
 
 const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
@@ -36,9 +36,7 @@ export default async function RootLayout({ children }: { children: ReactNode })
     <html lang="en" className={GeistSans.variable}>
       <body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
         <Navbar />
-        <Suspense>
-          <main>{children}</main>
-        </Suspense>
+        <main>{children}</main>
       </body>
     </html>
   );

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,9 +1,6 @@
 import { Carousel } from 'components/carousel';
 import { ThreeItemGrid } from 'components/grid/three-items';
 import Footer from 'components/layout/footer';
-import { Suspense } from 'react';
-
-export const runtime = 'edge';
 
 export const metadata = {
   description: 'High-performance ecommerce store built with Next.js, Vercel, and Shopify.',
@@ -16,12 +13,8 @@ export default async function HomePage() {
   return (
     <>
       <ThreeItemGrid />
-      <Suspense>
-        <Carousel />
-        <Suspense>
-          <Footer />
-        </Suspense>
-      </Suspense>
+      <Carousel />
+      <Footer />
     </>
   );
 }
diff --git a/app/product/[handle]/page.tsx b/app/product/[handle]/page.tsx
@@ -1,6 +1,5 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { Suspense } from 'react';
 
 import { GridTileImage } from 'components/grid/tile';
 import Footer from 'components/layout/footer';
@@ -10,8 +9,7 @@ import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
 import { getProduct, getProductRecommendations } from 'lib/shopify';
 import { Image } from 'lib/shopify/types';
 import Link from 'next/link';
-
-export const runtime = 'edge';
+import { Suspense } from 'react';
 
 export async function generateMetadata({
   params
@@ -84,25 +82,27 @@ export default async function ProductPage({ params }: { params: { handle: string
       <div className="mx-auto max-w-screen-2xl px-4">
         <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8">
           <div className="h-full w-full basis-full lg:basis-4/6">
-            <Gallery
-              images={product.images.map((image: Image) => ({
-                src: image.url,
-                altText: image.altText
-              }))}
-            />
+            <Suspense
+              fallback={
+                <div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden" />
+              }
+            >
+              <Gallery
+                images={product.images.map((image: Image) => ({
+                  src: image.url,
+                  altText: image.altText
+                }))}
+              />
+            </Suspense>
           </div>
 
           <div className="basis-full lg:basis-2/6">
             <ProductDescription product={product} />
           </div>
         </div>
-        <Suspense>
-          <RelatedProducts id={product.id} />
-        </Suspense>
+        <RelatedProducts id={product.id} />
       </div>
-      <Suspense>
-        <Footer />
-      </Suspense>
+      <Footer />
     </>
   );
 }

diff --git a/app/search/[collection]/page.tsx b/app/search/[collection]/page.tsx
@@ -6,8 +6,6 @@ import Grid from 'components/grid';
 import ProductGridItems from 'components/layout/product-grid-items';
 import { defaultSort, sorting } from 'lib/constants';
 
-export const runtime = 'edge';
-
 export async function generateMetadata({
   params
 }: {

diff --git a/app/search/layout.tsx b/app/search/layout.tsx
@@ -2,11 +2,10 @@ import Footer from 'components/layout/footer';
 import Collections from 'components/layout/search/collections';
 import FilterList from 'components/layout/search/filter';
 import { sorting } from 'lib/constants';
-import { Suspense } from 'react';
 
 export default function SearchLayout({ children }: { children: React.ReactNode }) {
   return (
-    <Suspense>
+    <>
       <div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black dark:text-white md:flex-row">
         <div className="order-first w-full flex-none md:max-w-[125px]">
           <Collections />
@@ -17,6 +16,6 @@ export default function SearchLayout({ children }: { children: React.ReactNode }
         </div>
       </div>
       <Footer />
-    </Suspense>
+    </>
   );
 }
diff --git a/app/search/page.tsx b/app/search/page.tsx
@@ -3,8 +3,6 @@ import ProductGridItems from 'components/layout/product-grid-items';
 import { defaultSort, sorting } from 'lib/constants';
 import { getProducts } from 'lib/shopify';
 
-export const runtime = 'edge';
-
 export const metadata = {
   title: 'Search',
   description: 'Search for products in the store.'

diff --git a/components/layout/navbar/index.tsx b/components/layout/navbar/index.tsx
@@ -6,7 +6,7 @@ import { Menu } from 'lib/shopify/types';
 import Link from 'next/link';
 import { Suspense } from 'react';
 import MobileMenu from './mobile-menu';
-import Search from './search';
+import Search, { SearchSkeleton } from './search';
 const { SITE_NAME } = process.env;
 
 export default async function Navbar() {
@@ -15,7 +15,9 @@ export default async function Navbar() {
   return (
     <nav className="relative flex items-center justify-between p-4 lg:px-6">
       <div className="block flex-none md:hidden">
-        <MobileMenu menu={menu} />
+        <Suspense fallback={null}>
+          <MobileMenu menu={menu} />
+        </Suspense>
       </div>
       <div className="flex w-full items-center">
         <div className="flex w-full md:w-1/3">
@@ -41,7 +43,9 @@ export default async function Navbar() {
           ) : null}
         </div>
         <div className="hidden justify-center md:flex md:w-1/3">
-          <Search />
+          <Suspense fallback={<SearchSkeleton />}>
+            <Search />
+          </Suspense>
         </div>
         <div className="flex justify-end md:w-1/3">
           <Suspense fallback={<OpenCart />}>

diff --git a/components/layout/navbar/mobile-menu.tsx b/components/layout/navbar/mobile-menu.tsx
@@ -3,11 +3,11 @@
 import { Dialog, Transition } from '@headlessui/react';
 import Link from 'next/link';
 import { usePathname, useSearchParams } from 'next/navigation';
-import { Fragment, useEffect, useState } from 'react';
+import { Fragment, Suspense, useEffect, useState } from 'react';
 
 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
 import { Menu } from 'lib/shopify/types';
-import Search from './search';
+import Search, { SearchSkeleton } from './search';
 
 export default function MobileMenu({ menu }: { menu: Menu[] }) {
   const pathname = usePathname();
@@ -72,7 +72,9 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
                 </button>
 
                 <div className="mb-4 w-full">
-                  <Search />
+                  <Suspense fallback={<SearchSkeleton />}>
+                    <Search />
+                  </Suspense>
                 </div>
                 {menu.length ? (
                   <ul className="flex w-full flex-col">

diff --git a/components/layout/navbar/search.tsx b/components/layout/navbar/search.tsx
@@ -41,3 +41,17 @@ export default function Search() {
     </form>
   );
 }
+
+export function SearchSkeleton() {
+  return (
+    <form className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
+      <input
+        placeholder="Search for products..."
+        className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-neutral-500 dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400"
+      />
+      <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
+        <MagnifyingGlassIcon className="h-4" />
+      </div>
+    </form>
+  );
+}
diff --git a/components/layout/search/filter/index.tsx b/components/layout/search/filter/index.tsx
@@ -1,4 +1,5 @@
 import { SortFilterItem } from 'lib/constants';
+import { Suspense } from 'react';
 import FilterItemDropdown from './dropdown';
 import { FilterItem } from './item';
 
@@ -25,10 +26,14 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
           </h3>
         ) : null}
         <ul className="hidden md:block">
-          <FilterItemList list={list} />
+          <Suspense fallback={null}>
+            <FilterItemList list={list} />
+          </Suspense>
         </ul>
         <ul className="md:hidden">
-          <FilterItemDropdown list={list} />
+          <Suspense fallback={null}>
+            <FilterItemDropdown list={list} />
+          </Suspense>
         </ul>
       </nav>
     </>

diff --git a/components/product/product-description.tsx b/components/product/product-description.tsx
@@ -2,6 +2,7 @@ import { AddToCart } from 'components/cart/add-to-cart';
 import Price from 'components/price';
 import Prose from 'components/prose';
 import { Product } from 'lib/shopify/types';
+import { Suspense } from 'react';
 import { VariantSelector } from './variant-selector';
 
 export function ProductDescription({ product }: { product: Product }) {
@@ -16,7 +17,9 @@ export function ProductDescription({ product }: { product: Product }) {
           />
         </div>
       </div>
-      <VariantSelector options={product.options} variants={product.variants} />
+      <Suspense fallback={null}>
+        <VariantSelector options={product.options} variants={product.variants} />
+      </Suspense>
 
       {product.descriptionHtml ? (
         <Prose
@@ -25,7 +28,9 @@ export function ProductDescription({ product }: { product: Product }) {
         />
       ) : null}
 
-      <AddToCart variants={product.variants} availableForSale={product.availableForSale} />
+      <Suspense fallback={null}>
+        <AddToCart variants={product.variants} availableForSale={product.availableForSale} />
+      </Suspense>
     </>
   );
 }
diff --git a/lib/shopify/index.ts b/lib/shopify/index.ts
@@ -357,6 +357,7 @@ export async function getMenu(handle: string): Promise<Menu[]> {
 export async function getPage(handle: string): Promise<Page> {
   const res = await shopifyFetch<ShopifyPageOperation>({
     query: getPageQuery,
+    cache: 'no-store',
     variables: { handle }
   });
 
@@ -365,7 +366,8 @@ export async function getPage(handle: string): Promise<Page> {
 
 export async function getPages(): Promise<Page[]> {
   const res = await shopifyFetch<ShopifyPagesOperation>({
-    query: getPagesQuery
+    query: getPagesQuery,
+    cache: 'no-store'
   });
 
   return removeEdgesAndNodes(res.body.data.pages);

diff --git a/next.config.js b/next.config.js
@@ -4,6 +4,9 @@ module.exports = {
     // Disabling on production builds because we're running checks on PRs via GitHub Actions.
     ignoreDuringBuilds: true
   },
+  experimental: {
+    ppr: true
+  },
   images: {
     formats: ['image/avif', 'image/webp'],
     remotePatterns: [

diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "pnpm": ">=7"
   },
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -23,30 +23,30 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.17",
-    "@heroicons/react": "^2.0.18",
+    "@heroicons/react": "^2.1.1",
     "clsx": "^2.0.0",
-    "geist": "^1.0.0",
-    "next": "14.0.0",
+    "geist": "^1.2.0",
+    "next": "14.0.5-canary.23",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.10",
-    "@types/node": "20.8.9",
-    "@types/react": "18.2.33",
-    "@types/react-dom": "18.2.14",
+    "@types/node": "20.10.5",
+    "@types/react": "18.2.45",
+    "@types/react-dom": "18.2.18",
     "@vercel/git-hooks": "^1.0.0",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.52.0",
-    "eslint-config-next": "^14.0.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-unicorn": "^48.0.1",
-    "lint-staged": "^15.0.2",
-    "postcss": "^8.4.31",
-    "prettier": "3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.6",
-    "tailwindcss": "^3.3.5",
-    "typescript": "5.2.2"
+    "eslint": "^8.56.0",
+    "eslint-config-next": "^14.0.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-unicorn": "^50.0.1",
+    "lint-staged": "^15.2.0",
+    "postcss": "^8.4.32",
+    "prettier": "3.1.1",
+    "prettier-plugin-tailwindcss": "^0.5.9",
+    "tailwindcss": "^3.4.0",
+    "typescript": "5.3.3"
   }
 }