Prepare for using PPR (vercel#1236)

nikosantis · Apr 18, 2024 · 887d437 · 887d437
1 parent 610b0e8
commit 887d437
Show file tree

Hide file tree

Showing 16 changed files with 241 additions and 237 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -21,7 +21,7 @@ jobs:
         uses: pnpm/action-setup@v2
         with:
           run_install: false
-          version: 7
+          version: 8
       - name: Cache node_modules
         id: node-modules-cache
         uses: actions/cache@v3

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,8 +4,6 @@ import Prose from 'components/prose';
 import { getPage } from 'lib/shopify';
 import { notFound } from 'next/navigation';
 
-export const runtime = 'edge';
-
 export async function generateMetadata({
   params
 }: {

diff --git a/app/api/revalidate/route.ts b/app/api/revalidate/route.ts
@@ -1,8 +1,6 @@
 import { revalidate } from 'lib/shopify';
 import { NextRequest, NextResponse } from 'next/server';
 
-export const runtime = 'edge';
-
 export async function POST(req: NextRequest): Promise<NextResponse> {
   return revalidate(req);
 }
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
@@ -102,13 +100,9 @@ export default async function ProductPage({ params }: { params: { handle: string
             <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 md:flex-row dark:text-white">
         <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/app/sitemap.ts b/app/sitemap.ts
@@ -11,6 +11,8 @@ const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
   ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
   : 'http://localhost:3000';
 
+export const dynamic = 'force-dynamic';
+
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   validateEnvironmentVariables();
 

diff --git a/components/layout/search/filter/index.tsx b/components/layout/search/filter/index.tsx
@@ -28,12 +28,12 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
         <ul className="hidden md:block">
           <Suspense fallback={null}>
             <FilterItemList list={list} />
-          </Suspense>{' '}
+          </Suspense>
         </ul>
         <ul className="md:hidden">
           <Suspense fallback={null}>
             <FilterItemDropdown list={list} />
-          </Suspense>{' '}
+          </Suspense>
         </ul>
       </nav>
     </>

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/package.json b/package.json
@@ -3,7 +3,7 @@
   "packageManager": "[email protected]",
   "engines": {
     "node": ">=18",
-    "pnpm": ">=7"
+    "pnpm": ">=8"
   },
   "scripts": {
     "dev": "next dev --turbo",
@@ -22,31 +22,31 @@
     "*": "prettier --write --ignore-unknown"
   },
   "dependencies": {
-    "@headlessui/react": "^1.7.18",
+    "@headlessui/react": "^1.7.19",
     "@heroicons/react": "^2.1.3",
     "clsx": "^2.1.0",
     "geist": "^1.3.0",
-    "next": "14.1.4",
+    "next": "14.2.2",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/typography": "^0.5.11",
-    "@types/node": "20.11.30",
-    "@types/react": "18.2.72",
-    "@types/react-dom": "18.2.22",
+    "@tailwindcss/typography": "^0.5.12",
+    "@types/node": "20.12.7",
+    "@types/react": "18.2.79",
+    "@types/react-dom": "18.2.25",
     "@vercel/git-hooks": "^1.0.0",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.1.4",
+    "eslint-config-next": "^14.2.2",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-unicorn": "^51.0.1",
+    "eslint-plugin-unicorn": "^52.0.0",
     "lint-staged": "^15.2.2",
     "postcss": "^8.4.38",
     "prettier": "3.2.5",
-    "prettier-plugin-tailwindcss": "^0.5.12",
-    "tailwindcss": "^3.4.1",
-    "typescript": "5.4.3"
+    "prettier-plugin-tailwindcss": "^0.5.14",
+    "tailwindcss": "^3.4.3",
+    "typescript": "5.4.5"
   }
 }