diff --git a/.changeset/yellow-eyes-reflect.md b/.changeset/yellow-eyes-reflect.md new file mode 100644 index 000000000..fe35745be --- /dev/null +++ b/.changeset/yellow-eyes-reflect.md @@ -0,0 +1,5 @@ +--- +"@opennextjs/cloudflare": patch +--- + +feat: static assets incremental cache diff --git a/examples/common/apps.ts b/examples/common/apps.ts index d868bb154..919b45e53 100644 --- a/examples/common/apps.ts +++ b/examples/common/apps.ts @@ -15,6 +15,7 @@ const apps = [ "d1-tag-next", "memory-queue", "r2-incremental-cache", + "static-assets-incremental-cache", // bugs "gh-119", "gh-219", diff --git a/examples/overrides/static-assets-incremental-cache/.gitignore b/examples/overrides/static-assets-incremental-cache/.gitignore new file mode 100644 index 000000000..3f753f293 --- /dev/null +++ b/examples/overrides/static-assets-incremental-cache/.gitignore @@ -0,0 +1,47 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.* +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/versions + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files (can opt-in for committing if needed) +.env* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts + +# playwright +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ diff --git a/examples/overrides/static-assets-incremental-cache/app/action.ts b/examples/overrides/static-assets-incremental-cache/app/action.ts new file mode 100644 index 000000000..76441c9a4 --- /dev/null +++ b/examples/overrides/static-assets-incremental-cache/app/action.ts @@ -0,0 +1,11 @@ +"use server"; + +import { revalidatePath, revalidateTag } from "next/cache"; + +export async function revalidateTagAction() { + revalidateTag("date"); +} + +export async function revalidatePathAction() { + revalidatePath("/"); +} diff --git a/examples/overrides/static-assets-incremental-cache/app/components/revalidationButtons.tsx b/examples/overrides/static-assets-incremental-cache/app/components/revalidationButtons.tsx new file mode 100644 index 000000000..a84652a4c --- /dev/null +++ b/examples/overrides/static-assets-incremental-cache/app/components/revalidationButtons.tsx @@ -0,0 +1,27 @@ +"use client"; + +import { revalidateTagAction, revalidatePathAction } from "../action"; + +export default function RevalidationButtons() { + return ( +
+ + + +
+ ); +} diff --git a/examples/overrides/static-assets-incremental-cache/app/favicon.ico b/examples/overrides/static-assets-incremental-cache/app/favicon.ico new file mode 100644 index 000000000..718d6fea4 Binary files /dev/null and b/examples/overrides/static-assets-incremental-cache/app/favicon.ico differ diff --git a/examples/overrides/static-assets-incremental-cache/app/globals.css b/examples/overrides/static-assets-incremental-cache/app/globals.css new file mode 100644 index 000000000..6e6f12f33 --- /dev/null +++ b/examples/overrides/static-assets-incremental-cache/app/globals.css @@ -0,0 +1,14 @@ +html, +body { + max-width: 100vw; + overflow-x: hidden; + height: 100vh; + display: flex; + flex-direction: column; +} + +footer { + padding: 1rem; + display: flex; + justify-content: end; +} diff --git a/examples/overrides/static-assets-incremental-cache/app/layout.tsx b/examples/overrides/static-assets-incremental-cache/app/layout.tsx new file mode 100644 index 000000000..d3d960b2f --- /dev/null +++ b/examples/overrides/static-assets-incremental-cache/app/layout.tsx @@ -0,0 +1,28 @@ +import type { Metadata } from "next"; +import "./globals.css"; + +import { getCloudflareContext } from "@opennextjs/cloudflare"; + +export const metadata: Metadata = { + title: "SSG App", + description: "An app in which all the routes are SSG'd", +}; + +export default async function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + const cloudflareContext = await getCloudflareContext({ + async: true, + }); + + return ( + + + {children} + + + + ); +} diff --git a/examples/overrides/static-assets-incremental-cache/app/page.module.css b/examples/overrides/static-assets-incremental-cache/app/page.module.css new file mode 100644 index 000000000..1217984e8 --- /dev/null +++ b/examples/overrides/static-assets-incremental-cache/app/page.module.css @@ -0,0 +1,17 @@ +.page { + display: grid; + grid-template-rows: 20px 1fr 20px; + align-items: center; + justify-items: center; + flex: 1; + border: 3px solid gray; + margin: 1rem; + margin-block-end: 0; +} + +.main { + display: flex; + flex-direction: column; + gap: 32px; + grid-row-start: 2; +} diff --git a/examples/overrides/static-assets-incremental-cache/app/page.tsx b/examples/overrides/static-assets-incremental-cache/app/page.tsx new file mode 100644 index 000000000..19ff70ad8 --- /dev/null +++ b/examples/overrides/static-assets-incremental-cache/app/page.tsx @@ -0,0 +1,26 @@ +import { unstable_cache } from "next/cache"; +import styles from "./page.module.css"; +import RevalidationButtons from "./components/revalidationButtons"; + +const fetchedDateCb = unstable_cache( + async () => { + return Date.now(); + }, + ["date"], + { tags: ["date"] } +); + +export default async function Home() { + const fetchedDate = await fetchedDateCb(); + return ( +
+
+

Hello from a Statically generated page

+

{Date.now()}

+

{fetchedDate}

+ + +
+
+ ); +} diff --git a/examples/overrides/static-assets-incremental-cache/e2e/base.spec.ts b/examples/overrides/static-assets-incremental-cache/e2e/base.spec.ts new file mode 100644 index 000000000..6903a630b --- /dev/null +++ b/examples/overrides/static-assets-incremental-cache/e2e/base.spec.ts @@ -0,0 +1,41 @@ +import { test, expect } from "@playwright/test"; + +test.describe("static-assets-incremental-cache", () => { + test("the index page should work", async ({ page }) => { + await page.goto("/"); + await expect(page.getByText("Hello from a Statically generated page")).toBeVisible(); + }); + + test("the index page should keep the same date on reload", async ({ page }) => { + await page.goto("/"); + const date = await page.getByTestId("date-local").textContent(); + expect(date).not.toBeNull(); + await page.reload(); + const newDate = await page.getByTestId("date-local").textContent(); + expect(date).toEqual(newDate); + }); + + test("the index page should keep the same data on reload when trying to use revalidateTag", async ({ + page, + }) => { + await page.goto("/"); + const date = await page.getByTestId("date-fetched").textContent(); + await page.getByTestId("revalidate-tag").click(); + await page.waitForTimeout(100); + await page.reload(); + const newDate = await page.getByTestId("date-fetched").textContent(); + expect(date).toEqual(newDate); + }); + + test("the index page should keep the same data on reload when trying to use revalidatePath", async ({ + page, + }) => { + await page.goto("/"); + const date = await page.getByTestId("date-fetched").textContent(); + await page.getByTestId("revalidate-path").click(); + await page.waitForTimeout(100); + await page.reload(); + const newDate = await page.getByTestId("date-fetched").textContent(); + expect(date).toEqual(newDate); + }); +}); diff --git a/examples/overrides/static-assets-incremental-cache/e2e/playwright.config.ts b/examples/overrides/static-assets-incremental-cache/e2e/playwright.config.ts new file mode 100644 index 000000000..932475617 --- /dev/null +++ b/examples/overrides/static-assets-incremental-cache/e2e/playwright.config.ts @@ -0,0 +1,7 @@ +import { configurePlaywright } from "../../../common/config-e2e"; + +// Here we don't want to run the tests in parallel +export default configurePlaywright("static-assets-incremental-cache", { + isCI: !!process.env.CI, + parallel: false, +}); diff --git a/examples/overrides/static-assets-incremental-cache/next-env.d.ts b/examples/overrides/static-assets-incremental-cache/next-env.d.ts new file mode 100644 index 000000000..1b3be0840 --- /dev/null +++ b/examples/overrides/static-assets-incremental-cache/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/examples/overrides/static-assets-incremental-cache/next.config.ts b/examples/overrides/static-assets-incremental-cache/next.config.ts new file mode 100644 index 000000000..4b075e442 --- /dev/null +++ b/examples/overrides/static-assets-incremental-cache/next.config.ts @@ -0,0 +1,11 @@ +import type { NextConfig } from "next"; +import { initOpenNextCloudflareForDev } from "@opennextjs/cloudflare"; + +initOpenNextCloudflareForDev(); + +const nextConfig: NextConfig = { + typescript: { ignoreBuildErrors: true }, + eslint: { ignoreDuringBuilds: true }, +}; + +export default nextConfig; diff --git a/examples/overrides/static-assets-incremental-cache/open-next.config.ts b/examples/overrides/static-assets-incremental-cache/open-next.config.ts new file mode 100644 index 000000000..6fc7f9421 --- /dev/null +++ b/examples/overrides/static-assets-incremental-cache/open-next.config.ts @@ -0,0 +1,6 @@ +import { defineCloudflareConfig } from "@opennextjs/cloudflare"; +import staticAssetsIncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/static-assets-incremental-cache"; + +export default defineCloudflareConfig({ + incrementalCache: staticAssetsIncrementalCache, +}); diff --git a/examples/overrides/static-assets-incremental-cache/package.json b/examples/overrides/static-assets-incremental-cache/package.json new file mode 100644 index 000000000..e9c59000d --- /dev/null +++ b/examples/overrides/static-assets-incremental-cache/package.json @@ -0,0 +1,29 @@ +{ + "name": "static-assets-incremental-cache", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint", + "build:worker": "pnpm opennextjs-cloudflare build", + "preview:worker": "pnpm opennextjs-cloudflare preview", + "preview": "pnpm build:worker && pnpm preview:worker", + "e2e": "playwright test -c e2e/playwright.config.ts" + }, + "dependencies": { + "react": "catalog:e2e", + "react-dom": "catalog:e2e", + "next": "catalog:e2e" + }, + "devDependencies": { + "@opennextjs/cloudflare": "workspace:*", + "@playwright/test": "catalog:", + "@types/node": "catalog:", + "@types/react": "catalog:e2e", + "@types/react-dom": "catalog:e2e", + "typescript": "catalog:", + "wrangler": "catalog:" + } +} diff --git a/examples/overrides/static-assets-incremental-cache/tsconfig.json b/examples/overrides/static-assets-incremental-cache/tsconfig.json new file mode 100644 index 000000000..d8b93235f --- /dev/null +++ b/examples/overrides/static-assets-incremental-cache/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "target": "ES2017", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +} diff --git a/examples/overrides/static-assets-incremental-cache/wrangler.jsonc b/examples/overrides/static-assets-incremental-cache/wrangler.jsonc new file mode 100644 index 000000000..0c075e6de --- /dev/null +++ b/examples/overrides/static-assets-incremental-cache/wrangler.jsonc @@ -0,0 +1,11 @@ +{ + "$schema": "node_modules/wrangler/config-schema.json", + "main": ".open-next/worker.js", + "name": "static-assets-incremental-cache", + "compatibility_date": "2025-02-04", + "compatibility_flags": ["nodejs_compat"], + "assets": { + "directory": ".open-next/assets", + "binding": "ASSETS" + } +} diff --git a/examples/ssg-app/open-next.config.ts b/examples/ssg-app/open-next.config.ts index 0f15d5304..6fc7f9421 100644 --- a/examples/ssg-app/open-next.config.ts +++ b/examples/ssg-app/open-next.config.ts @@ -1,6 +1,6 @@ import { defineCloudflareConfig } from "@opennextjs/cloudflare"; -import kvIncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/kv-incremental-cache"; +import staticAssetsIncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/static-assets-incremental-cache"; export default defineCloudflareConfig({ - incrementalCache: kvIncrementalCache, + incrementalCache: staticAssetsIncrementalCache, }); diff --git a/examples/ssg-app/wrangler.jsonc b/examples/ssg-app/wrangler.jsonc index 0b9c532a1..bb008505f 100644 --- a/examples/ssg-app/wrangler.jsonc +++ b/examples/ssg-app/wrangler.jsonc @@ -8,12 +8,6 @@ "directory": ".open-next/assets", "binding": "ASSETS" }, - "kv_namespaces": [ - { - "binding": "NEXT_INC_CACHE_KV", - "id": "" - } - ], "vars": { "APP_VERSION": "1.2.345" } diff --git a/packages/cloudflare/src/api/overrides/incremental-cache/static-assets-incremental-cache.ts b/packages/cloudflare/src/api/overrides/incremental-cache/static-assets-incremental-cache.ts new file mode 100644 index 000000000..155b94730 --- /dev/null +++ b/packages/cloudflare/src/api/overrides/incremental-cache/static-assets-incremental-cache.ts @@ -0,0 +1,62 @@ +import { error } from "@opennextjs/aws/adapters/logger.js"; +import type { CacheValue, IncrementalCache, WithLastModified } from "@opennextjs/aws/types/overrides.js"; +import { IgnorableError } from "@opennextjs/aws/utils/error.js"; + +import { getCloudflareContext } from "../../cloudflare-context.js"; +import { debugCache, FALLBACK_BUILD_ID } from "../internal.js"; + +// Assets inside `cdn-cgi/...` are only accessible by the worker. +export const CACHE_DIR = "cdn-cgi/_next_cache"; + +export const NAME = "cf-static-assets-incremental-cache"; + +/** + * This cache uses Workers static assets. + * + * It should only be used for applications that do NOT want revalidation and ONLY want to serve prerendered data. + */ +class StaticAssetsIncrementalCache implements IncrementalCache { + readonly name = NAME; + + async get( + key: string, + isFetch?: IsFetch + ): Promise> | null> { + const assets = getCloudflareContext().env.ASSETS; + if (!assets) throw new IgnorableError("No Static Assets"); + + debugCache(`Get ${key}`); + + try { + const response = await assets.fetch(this.getAssetUrl(key, isFetch)); + if (!response.ok) return null; + + return { + value: await response.json(), + // __BUILD_TIMESTAMP_MS__ is injected by ESBuild. + lastModified: (globalThis as { __BUILD_TIMESTAMP_MS__?: number }).__BUILD_TIMESTAMP_MS__, + }; + } catch (e) { + error("Failed to get from cache", e); + return null; + } + } + + async set(): Promise { + error("Failed to set to read-only cache"); + } + + async delete(): Promise { + error("Failed to delete from read-only cache"); + } + + protected getAssetUrl(key: string, isFetch?: boolean): string { + const buildId = process.env.NEXT_BUILD_ID ?? FALLBACK_BUILD_ID; + const name = ( + isFetch ? `${CACHE_DIR}/__fetch/${buildId}/${key}` : `${CACHE_DIR}/${buildId}/${key}.cache` + ).replace(/\/+/g, "/"); + return `http://assets.local/${name}`; + } +} + +export default new StaticAssetsIncrementalCache(); diff --git a/packages/cloudflare/src/cli/commands/populate-cache.ts b/packages/cloudflare/src/cli/commands/populate-cache.ts index 6a9b6f28b..2d6e3e2db 100644 --- a/packages/cloudflare/src/cli/commands/populate-cache.ts +++ b/packages/cloudflare/src/cli/commands/populate-cache.ts @@ -1,4 +1,4 @@ -import { existsSync } from "node:fs"; +import { cpSync, existsSync } from "node:fs"; import path from "node:path"; import type { BuildOptions } from "@opennextjs/aws/build/helper.js"; @@ -24,6 +24,10 @@ import { NAME as R2_CACHE_NAME, PREFIX_ENV_NAME as R2_CACHE_PREFIX_ENV_NAME, } from "../../api/overrides/incremental-cache/r2-incremental-cache.js"; +import { + CACHE_DIR as STATIC_ASSETS_CACHE_DIR, + NAME as STATIC_ASSETS_CACHE_NAME, +} from "../../api/overrides/incremental-cache/static-assets-incremental-cache.js"; import { BINDING_NAME as D1_TAG_BINDING_NAME, NAME as D1_TAG_NAME, @@ -151,6 +155,18 @@ function populateD1TagCache( logger.info("\nSuccessfully created D1 table"); } +function populateStaticAssetsIncrementalCache(options: BuildOptions) { + logger.info("\nPopulating Workers static assets..."); + + cpSync( + path.join(options.outputDir, "cache"), + path.join(options.outputDir, "assets", STATIC_ASSETS_CACHE_DIR), + { recursive: true } + ); + + logger.info(`Successfully populated static assets cache`); +} + export async function populateCache( options: BuildOptions, config: OpenNextConfig, @@ -172,6 +188,9 @@ export async function populateCache( case KV_CACHE_NAME: populateKVIncrementalCache(options, populateCacheOptions); break; + case STATIC_ASSETS_CACHE_NAME: + populateStaticAssetsIncrementalCache(options); + break; default: logger.info("Incremental cache does not need populating"); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 32151319d..3ff6b97c4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -785,6 +785,40 @@ importers: specifier: 'catalog:' version: 4.7.0(@cloudflare/workers-types@4.20250321.0) + examples/overrides/static-assets-incremental-cache: + dependencies: + next: + specifier: catalog:e2e + version: 15.2.2(@opentelemetry/api@1.9.0)(@playwright/test@1.51.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + react: + specifier: catalog:e2e + version: 19.0.0 + react-dom: + specifier: catalog:e2e + version: 19.0.0(react@19.0.0) + devDependencies: + '@opennextjs/cloudflare': + specifier: workspace:* + version: link:../../../packages/cloudflare + '@playwright/test': + specifier: 'catalog:' + version: 1.51.1 + '@types/node': + specifier: 'catalog:' + version: 22.2.0 + '@types/react': + specifier: catalog:e2e + version: 19.0.0 + '@types/react-dom': + specifier: catalog:e2e + version: 19.0.0 + typescript: + specifier: 'catalog:' + version: 5.7.3 + wrangler: + specifier: 'catalog:' + version: 4.7.0(@cloudflare/workers-types@4.20250321.0) + examples/playground14: dependencies: next: