feat: cache resources (#5381)

Ref #4077

How it works

- Cache-Control opts in caching (Cache-Control: max-age=3600)
- cached response is matched by url, method and body
- cache is invalidated with Cache-Control change
- responses stored with the cache are not replicated across regions
- responses are not shared between projects

Link for testing
https://test-cache-hcevl.wstd.work/?message=hello

Author: TrySound

fixtures/react-router-cloudflare/app/routes/[another-page]._index.tsx

@@ -15,6 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
+  cachedFetch,
 } from "@webstudio-is/sdk/runtime";
 import {
   ReactSdkContext,
@@ -42,7 +43,7 @@ import { sitemap } from "../__generated__/$resources.sitemap.xml";
 
 const customFetch: typeof fetch = (input, init) => {
   if (typeof input !== "string") {
-    return fetch(input, init);
+    return cachedFetch(projectId, input, init);
   }
 
   if (isLocalResource(input, "sitemap.xml")) {
@@ -52,7 +53,7 @@ const customFetch: typeof fetch = (input, init) => {
     return Promise.resolve(response);
   }
 
-  return fetch(input, init);
+  return cachedFetch(projectId, input, init);
 };
 
 export const loader = async (arg: LoaderFunctionArgs) => {

fixtures/react-router-cloudflare/app/routes/_index.tsx

@@ -15,6 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
+  cachedFetch,
 } from "@webstudio-is/sdk/runtime";
 import {
   ReactSdkContext,
@@ -42,7 +43,7 @@ import { sitemap } from "../__generated__/$resources.sitemap.xml";
 
 const customFetch: typeof fetch = (input, init) => {
   if (typeof input !== "string") {
-    return fetch(input, init);
+    return cachedFetch(projectId, input, init);
   }
 
   if (isLocalResource(input, "sitemap.xml")) {
@@ -52,7 +53,7 @@ const customFetch: typeof fetch = (input, init) => {
     return Promise.resolve(response);
   }
 
-  return fetch(input, init);
+  return cachedFetch(projectId, input, init);
 };
 
 export const loader = async (arg: LoaderFunctionArgs) => {

fixtures/react-router-docker/app/routes/[another-page]._index.tsx

@@ -15,6 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
+  cachedFetch,
 } from "@webstudio-is/sdk/runtime";
 import {
   ReactSdkContext,
@@ -42,7 +43,7 @@ import { sitemap } from "../__generated__/$resources.sitemap.xml";
 
 const customFetch: typeof fetch = (input, init) => {
   if (typeof input !== "string") {
-    return fetch(input, init);
+    return cachedFetch(projectId, input, init);
   }
 
   if (isLocalResource(input, "sitemap.xml")) {
@@ -52,7 +53,7 @@ const customFetch: typeof fetch = (input, init) => {
     return Promise.resolve(response);
   }
 
-  return fetch(input, init);
+  return cachedFetch(projectId, input, init);
 };
 
 export const loader = async (arg: LoaderFunctionArgs) => {

fixtures/react-router-docker/app/routes/_index.tsx

@@ -15,6 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
+  cachedFetch,
 } from "@webstudio-is/sdk/runtime";
 import {
   ReactSdkContext,
@@ -42,7 +43,7 @@ import { sitemap } from "../__generated__/$resources.sitemap.xml";
 
 const customFetch: typeof fetch = (input, init) => {
   if (typeof input !== "string") {
-    return fetch(input, init);
+    return cachedFetch(projectId, input, init);
   }
 
   if (isLocalResource(input, "sitemap.xml")) {
@@ -52,7 +53,7 @@ const customFetch: typeof fetch = (input, init) => {
     return Promise.resolve(response);
   }
 
-  return fetch(input, init);
+  return cachedFetch(projectId, input, init);
 };
 
 export const loader = async (arg: LoaderFunctionArgs) => {

fixtures/react-router-netlify/app/routes/[another-page]._index.tsx

@@ -15,6 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
+  cachedFetch,
 } from "@webstudio-is/sdk/runtime";
 import {
   ReactSdkContext,
@@ -42,7 +43,7 @@ import { sitemap } from "../__generated__/$resources.sitemap.xml";
 
 const customFetch: typeof fetch = (input, init) => {
   if (typeof input !== "string") {
-    return fetch(input, init);
+    return cachedFetch(projectId, input, init);
   }
 
   if (isLocalResource(input, "sitemap.xml")) {
@@ -52,7 +53,7 @@ const customFetch: typeof fetch = (input, init) => {
     return Promise.resolve(response);
   }
 
-  return fetch(input, init);
+  return cachedFetch(projectId, input, init);
 };
 
 export const loader = async (arg: LoaderFunctionArgs) => {

fixtures/react-router-netlify/app/routes/_index.tsx

@@ -15,6 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
+  cachedFetch,
 } from "@webstudio-is/sdk/runtime";
 import {
   ReactSdkContext,
@@ -42,7 +43,7 @@ import { sitemap } from "../__generated__/$resources.sitemap.xml";
 
 const customFetch: typeof fetch = (input, init) => {
   if (typeof input !== "string") {
-    return fetch(input, init);
+    return cachedFetch(projectId, input, init);
   }
 
   if (isLocalResource(input, "sitemap.xml")) {
@@ -52,7 +53,7 @@ const customFetch: typeof fetch = (input, init) => {
     return Promise.resolve(response);
   }
 
-  return fetch(input, init);
+  return cachedFetch(projectId, input, init);
 };
 
 export const loader = async (arg: LoaderFunctionArgs) => {

fixtures/react-router-vercel/app/routes/[another-page]._index.tsx

@@ -15,6 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
+  cachedFetch,
 } from "@webstudio-is/sdk/runtime";
 import {
   ReactSdkContext,
@@ -42,7 +43,7 @@ import { sitemap } from "../__generated__/$resources.sitemap.xml";
 
 const customFetch: typeof fetch = (input, init) => {
   if (typeof input !== "string") {
-    return fetch(input, init);
+    return cachedFetch(projectId, input, init);
   }
 
   if (isLocalResource(input, "sitemap.xml")) {
@@ -52,7 +53,7 @@ const customFetch: typeof fetch = (input, init) => {
     return Promise.resolve(response);
   }
 
-  return fetch(input, init);
+  return cachedFetch(projectId, input, init);
 };
 
 export const loader = async (arg: LoaderFunctionArgs) => {

fixtures/react-router-vercel/app/routes/_index.tsx

@@ -15,6 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
+  cachedFetch,
 } from "@webstudio-is/sdk/runtime";
 import {
   ReactSdkContext,
@@ -42,7 +43,7 @@ import { sitemap } from "../__generated__/$resources.sitemap.xml";
 
 const customFetch: typeof fetch = (input, init) => {
   if (typeof input !== "string") {
-    return fetch(input, init);
+    return cachedFetch(projectId, input, init);
   }
 
   if (isLocalResource(input, "sitemap.xml")) {
@@ -52,7 +53,7 @@ const customFetch: typeof fetch = (input, init) => {
     return Promise.resolve(response);
   }
 
-  return fetch(input, init);
+  return cachedFetch(projectId, input, init);
 };
 
 export const loader = async (arg: LoaderFunctionArgs) => {

fixtures/webstudio-cloudflare-template/app/routes/[another-page]._index.tsx

@@ -13,6 +13,7 @@ import {
   isLocalResource,
   loadResource,
   loadResources,
+  cachedFetch,
   formIdFieldName,
   formBotFieldName,
 } from "@webstudio-is/sdk/runtime";
@@ -43,7 +44,7 @@ import { sitemap } from "../__generated__/$resources.sitemap.xml";
 
 const customFetch: typeof fetch = (input, init) => {
   if (typeof input !== "string") {
-    return fetch(input, init);
+    return cachedFetch(projectId, input, init);
   }
 
   if (isLocalResource(input, "sitemap.xml")) {
@@ -53,7 +54,7 @@ const customFetch: typeof fetch = (input, init) => {
     return Promise.resolve(response);
   }
 
-  return fetch(input, init);
+  return cachedFetch(projectId, input, init);
 };
 
 export const loader = async (arg: LoaderFunctionArgs) => {

fixtures/webstudio-cloudflare-template/app/routes/_index.tsx

@@ -13,6 +13,7 @@ import {
   isLocalResource,
   loadResource,
   loadResources,
+  cachedFetch,
   formIdFieldName,
   formBotFieldName,
 } from "@webstudio-is/sdk/runtime";
@@ -43,7 +44,7 @@ import { sitemap } from "../__generated__/$resources.sitemap.xml";
 
 const customFetch: typeof fetch = (input, init) => {
   if (typeof input !== "string") {
-    return fetch(input, init);
+    return cachedFetch(projectId, input, init);
   }
 
   if (isLocalResource(input, "sitemap.xml")) {
@@ -53,7 +54,7 @@ const customFetch: typeof fetch = (input, init) => {
     return Promise.resolve(response);
   }
 
-  return fetch(input, init);
+  return cachedFetch(projectId, input, init);
 };
 
 export const loader = async (arg: LoaderFunctionArgs) => {