Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Add support for revalidateTag #145

Merged
merged 13 commits into from
Sep 29, 2023
43 changes: 42 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -329,7 +329,35 @@ await invalidateCFPaths(["/page/a", "/page/b", "/page/c"]);
await invalidateCFPaths(["/page/*"]);
```

Please note that on-demand revalidation via the [`next/cache` module](https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating#using-on-demand-revalidation) (`revalidatePath` and `revalidateTag`) is not yet supported.
For on-demand revalidation via the [`next/cache` module](https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating#using-on-demand-revalidation), if you want to retrieve the associated paths for a given tag, you can use this function:

```ts
function getByTag(tag: string) {
try {
const { Items } = await this.dynamoClient.send(
new QueryCommand({
TableName: process.env.CACHE_DYNAMO_TABLE,
KeyConditionExpression: "#tag = :tag",
ExpressionAttributeNames: {
"#tag": "tag",
},
ExpressionAttributeValues: {
":tag": { S: `${process.env.NEXT_BUILD_ID}/${tag}` },
},
}),
);
return (
// We need to remove the buildId from the path
Items?.map(
({ path: { S: key } }) => key?.replace(`${process.env.NEXT_BUILD_ID}/`, "") ?? "",
) ?? []
);
} catch (e) {
error("Failed to get by tag", e);
return [];
}
}
```

## How warming works

Expand Down Expand Up @@ -383,6 +411,19 @@ This cost estimate is based on the `us-east-1` region pricing and does not consi

## Limitations and workarounds

#### WORKAROUND: Patch fetch behaviour for ISR. Only for next@13.5.1+

In order to make fetch work as expected with ISR, you need to patch the `fetch` function in your app. Just add this lines to your root layout component:

```ts
const asyncStorage = require("next/dist/client/components/static-generation-async-storage.external");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should include the function here to make it clear that this code should be inside the function, not at the top of the file.

//@ts-ignore
const staticStore = (fetch as any).__nextGetStaticStore?.() || asyncStorage.staticGenerationAsyncStorage;
const store = staticStore.getStore();
store.isOnDemandRevalidate = store.isOnDemandRevalidate && !(process.env.OPEN_NEXT_ISR === 'true');
```
Without this workaround, if you have 2 fetch calls in your page with different revalidate values, both will use the smallest value during ISR revalidation.

#### WORKAROUND: Create one cache behavior per top-level file and folder in `public/` (AWS specific)

As mentioned in the [Asset files](#asset-files) section, files in your app's `public/` folder are static and are uploaded to the S3 bucket. And requests for these files are handled by the S3 bucket, like so:
Expand Down
1 change: 1 addition & 0 deletions packages/open-next/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"README.md"
],
"dependencies": {
"@aws-sdk/client-dynamodb": "^3.398.0",
"@aws-sdk/client-lambda": "^3.398.0",
"@aws-sdk/client-s3": "^3.398.0",
"@aws-sdk/client-sqs": "^3.398.0",
Expand Down
Loading
Loading