Merge pull request #284 from HerrBertling/revert-278-feat/274-better-caching

HerrBertling · web-flow · commit 06f4c5294b0f · 2024-10-12T17:18:33.000+02:00
Revert "Feat: better caching"
diff --git a/app/components/CleverLink.tsx b/app/components/CleverLink.tsx
@@ -1,7 +1,6 @@
 import { Link } from "@remix-run/react";
 import { type LinkProps } from "@remix-run/react";
 import type { ReactNode } from "react";
-import cx from 'classnames';
 
 interface CleverLinkProps extends LinkProps {
   to: string;
@@ -33,7 +32,7 @@ export default function CleverLink({
     const usedLink = to.replace("https://www.virtualsupporttalks.de", "");
     return (
       <Link
-        className={cx("text-vsp-500 hover:text-vsp-700 underline", className)}
+        className={`text-vsp-500 hover:text-vsp-700 underline ${className}`}
         to={usedLink}
         prefetch={prefetch}
       >
@@ -45,7 +44,7 @@ export default function CleverLink({
     <a
       href={to}
       target="_blank"
-      className={cx("text-vsp-500 hover:text-vsp-700 underline", className)}
+      className={`text-vsp-500 hover:text-vsp-700 underline ${className}`}
       rel="noopener noreferrer"
     >
       {children}
diff --git a/app/components/ContentBlocks/ImageBg.tsx b/app/components/ContentBlocks/ImageBg.tsx
@@ -17,7 +17,7 @@ export default function ContentBlockImageBg({
   children,
 }: ContentBlockImageBgProps) {
   const hasButton = buttonUrl && buttonText;
-  const usedBackgroundImage = `${backgroundImage?.fields?.file?.url}`;
+  const usedBackgroundImage = backgroundImage?.fields?.file?.url;
   const backgroundStyle = usedBackgroundImage
     ? { backgroundImage: `url(${usedBackgroundImage}?fm=avif&q=20)` }
     : {};
diff --git a/app/routes/$locale.$slug.tsx b/app/routes/$locale.$slug.tsx
@@ -1,4 +1,4 @@
-import type { HeadersFunction, LoaderFunction, MetaFunction } from "@remix-run/node";
+import type { LoaderFunction, MetaFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import BasicCatchBoundary from "~/components/BasicErrorBoundary";
 import ContentBlocks from "~/components/ContentBlocks";
@@ -31,13 +31,6 @@ export const meta: MetaFunction = ({ data }) => {
   ];
 };
 
-export const headers: HeadersFunction = () => ({
-  // Tell the browser to always check the freshness of the cache
-  "Cache-Control": "public, max-age=0, must-revalidate",
-  // Tell the CDN to treat it as fresh for 5 minutes, but for a day after that return a stale version while it revalidates
-  "Netlify-CDN-Cache-Control": "public, durable, s-maxage=300, stale-while-revalidate=86400",
-});
-
 export const loader: LoaderFunction = async ({ params }) => {
   const { slug, locale } = params;
   const page = await getPage(slug, locale as LOCALE_CODE);
diff --git a/app/routes/$locale._index.tsx b/app/routes/$locale._index.tsx
@@ -3,7 +3,7 @@ import type {
   IPage,
   LOCALE_CODE,
 } from "../../@types/generated/contentful";
-import type { HeadersFunction, LoaderFunction, MetaFunction } from "@remix-run/node";
+import type { LoaderFunction, MetaFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { getLatestBlogposts, getPageById } from "~/utils/contentful";
 import pageIds from "~/utils/pageIds";
@@ -31,13 +31,6 @@ export const meta: MetaFunction = ({ data }) => {
   ];
 };
 
-export const headers: HeadersFunction = () => ({
-  // Tell the browser to always check the freshness of the cache
-  "Cache-Control": "public, max-age=0, must-revalidate",
-  // Tell the CDN to treat it as fresh for 5 minutes, but for a day after that return a stale version while it revalidates
-  "Netlify-CDN-Cache-Control": "public, durable, s-maxage=300, stale-while-revalidate=86400",
-});
-
 export const loader: LoaderFunction = async ({
   params,
 }): Promise<PageProps> => {
diff --git a/app/routes/$locale.blog.$post.tsx b/app/routes/$locale.blog.$post.tsx
@@ -1,4 +1,4 @@
-import type { HeadersFunction, LoaderFunction, MetaFunction } from "@remix-run/node";
+import type { LoaderFunction, MetaFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import BasicCatchBoundary from "~/components/BasicErrorBoundary";
 import ContentBlocks from "~/components/ContentBlocks";
@@ -30,13 +30,6 @@ export const meta: MetaFunction = ({
   ];
 };
 
-export const headers: HeadersFunction = () => ({
-  // Tell the browser to always check the freshness of the cache
-  "Cache-Control": "public, max-age=0, must-revalidate",
-  // Tell the CDN to treat it as fresh for 5 minutes, but for a day after that return a stale version while it revalidates
-  "Netlify-CDN-Cache-Control": "public, durable, s-maxage=300, stale-while-revalidate=86400",
-});
-
 export const loader: LoaderFunction = async ({ params }) => {
   const { post, locale } = params;
 
diff --git a/app/routes/$locale.blog._index.tsx b/app/routes/$locale.blog._index.tsx
@@ -1,18 +1,11 @@
-import type { HeadersFunction, LoaderFunction } from "@remix-run/node";
+import type { LoaderFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { useTranslation } from "react-i18next";
 import BasicCatchBoundary from "~/components/BasicErrorBoundary";
 import BlogpostCard from "~/components/BlogpostCard";
 import { getBlogposts } from "~/utils/contentful";
 import type { IBlogpost, LOCALE_CODE } from "../../@types/generated/contentful";
 
-export const headers: HeadersFunction = () => ({
-  // Tell the browser to always check the freshness of the cache
-  "Cache-Control": "public, max-age=0, must-revalidate",
-  // Tell the CDN to treat it as fresh for 5 minutes, but for a day after that return a stale version while it revalidates
-  "Netlify-CDN-Cache-Control": "public, durable, s-maxage=300, stale-while-revalidate=86400",
-});
-
 export const loader: LoaderFunction = async ({ params }) => {
   const locale = (params.locale as string) || "de";
   const posts = await getBlogposts(locale as LOCALE_CODE);
diff --git a/app/routes/$locale.blog.tag.$tag.tsx b/app/routes/$locale.blog.tag.$tag.tsx
@@ -1,4 +1,4 @@
-import type { HeadersFunction, LoaderFunction } from "@remix-run/node";
+import type { LoaderFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { useTranslation } from "react-i18next";
 import BasicCatchBoundary from "~/components/BasicErrorBoundary";
@@ -10,13 +10,6 @@ import type {
   LOCALE_CODE,
 } from "../../@types/generated/contentful";
 
-export const headers: HeadersFunction = () => ({
-  // Tell the browser to always check the freshness of the cache
-  "Cache-Control": "public, max-age=0, must-revalidate",
-  // Tell the CDN to treat it as fresh for 5 minutes, but for a day after that return a stale version while it revalidates
-  "Netlify-CDN-Cache-Control": "public, durable, s-maxage=300, stale-while-revalidate=86400",
-});
-
 export const loader: LoaderFunction = async ({ params }) => {
   const tag = params.tag;
   const locale = (params.locale as string) || "de";
diff --git a/app/routes/de.ich-suche-redezeit.tsx b/app/routes/de.ich-suche-redezeit.tsx
@@ -1,21 +1,13 @@
-import type { HeadersFunction, LoaderFunction, MetaFunction } from "@remix-run/node";
+import type { LoaderFunction, MetaFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import BasicCatchBoundary from "~/components/BasicErrorBoundary";
 import BasicLayout from "~/components/layout/BasicLayout";
 import SpeakingTimeContent from "~/components/SpeakingTimeContent";
 import { getSeoMeta } from "~/seo";
 import { getSearchPageContents } from "~/utils/getSearchPageContents";
 
-export const headers: HeadersFunction = () => ({
-  // Tell the browser to always check the freshness of the cache
-  "Cache-Control": "public, max-age=0, must-revalidate",
-  // Tell the CDN to treat it as fresh for 5 minutes, but for a day after that return a stale version while it revalidates
-  "Netlify-CDN-Cache-Control": "public, durable, s-maxage=300, stale-while-revalidate=86400",
-});
-
 export const loader: LoaderFunction = async ({ request }) => {
-  const searchParams = new URL(request.url).searchParams;
-  const data = await getSearchPageContents({searchParams, locale: "de"});
+  const data = await getSearchPageContents(request, "de");
   return data;
 };
 
diff --git a/app/routes/de.netzwerk-partner-medien.tsx b/app/routes/de.netzwerk-partner-medien.tsx
@@ -1,4 +1,4 @@
-import type { HeadersFunction, LoaderFunction, MetaFunction } from "@remix-run/node";
+import type { LoaderFunction, MetaFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import NetworkPartnerMediaContent from "~/components/NetworkPartnerMediaContent";
 import { getSeoMeta } from "~/seo";
@@ -11,13 +11,6 @@ import {
 } from "~/utils/contentful";
 import pageIds from "~/utils/pageIds";
 
-export const headers: HeadersFunction = () => ({
-  // Tell the browser to always check the freshness of the cache
-  "Cache-Control": "public, max-age=0, must-revalidate",
-  // Tell the CDN to treat it as fresh for 5 minutes, but for a day after that return a stale version while it revalidates
-  "Netlify-CDN-Cache-Control": "public, durable, s-maxage=300, stale-while-revalidate=86400",
-});
-
 export const meta: MetaFunction = ({ data }) => {
   const { title, seo } = data?.page?.fields;
 
diff --git a/app/routes/en.i-need-speaking-time.tsx b/app/routes/en.i-need-speaking-time.tsx
@@ -1,21 +1,13 @@
-import type { HeadersFunction, LoaderFunction, MetaFunction } from "@remix-run/node";
+import type { LoaderFunction, MetaFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import BasicCatchBoundary from "~/components/BasicErrorBoundary";
 import BasicLayout from "~/components/layout/BasicLayout";
 import SpeakingTimeContent from "~/components/SpeakingTimeContent";
 import { getSeoMeta } from "~/seo";
 import { getSearchPageContents } from "~/utils/getSearchPageContents";
 
-export const headers: HeadersFunction = () => ({
-  // Tell the browser to always check the freshness of the cache
-  "Cache-Control": "public, max-age=0, must-revalidate",
-  // Tell the CDN to treat it as fresh for 5 minutes, but for a day after that return a stale version while it revalidates
-  "Netlify-CDN-Cache-Control": "public, durable, s-maxage=300, stale-while-revalidate=86400",
-});
-
 export const loader: LoaderFunction = async ({ request }) => {
-  const searchParams = new URL(request.url).searchParams;
-  const data = await getSearchPageContents({searchParams, locale: "en"});
+  const data = await getSearchPageContents(request, "en");
   return data;
 };
 
diff --git a/app/routes/en.network-partner-media.tsx b/app/routes/en.network-partner-media.tsx
@@ -1,4 +1,4 @@
-import type { HeadersFunction, LoaderFunction, MetaFunction } from "@remix-run/node";
+import type { LoaderFunction, MetaFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import NetworkPartnerMediaContent from "~/components/NetworkPartnerMediaContent";
 import { getSeoMeta } from "~/seo";
@@ -11,13 +11,6 @@ import {
 } from "~/utils/contentful";
 import pageIds from "~/utils/pageIds";
 
-export const headers: HeadersFunction = () => ({
-  // Tell the browser to always check the freshness of the cache
-  "Cache-Control": "public, max-age=0, must-revalidate",
-  // Tell the CDN to treat it as fresh for 5 minutes, but for a day after that return a stale version while it revalidates
-  "Netlify-CDN-Cache-Control": "public, durable, s-maxage=300, stale-while-revalidate=86400",
-});
-
 export const meta: MetaFunction = ({ data }) => {
   const { title, seo } = data?.page?.fields;
 
diff --git a/app/routes/ru.i-need-speaking-time.tsx b/app/routes/ru.i-need-speaking-time.tsx
@@ -1,22 +1,13 @@
-import type { HeadersFunction, LoaderFunction, MetaFunction } from "@remix-run/node";
+import type { LoaderFunction, MetaFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import BasicCatchBoundary from "~/components/BasicErrorBoundary";
 import BasicLayout from "~/components/layout/BasicLayout";
 import SpeakingTimeContent from "~/components/SpeakingTimeContent";
 import { getSeoMeta } from "~/seo";
 import { getSearchPageContents } from "~/utils/getSearchPageContents";
 
-export const headers: HeadersFunction = () => ({
-  // Tell the browser to always check the freshness of the cache
-  "Cache-Control": "public, max-age=0, must-revalidate",
-  // Tell the CDN to treat it as fresh for 5 minutes, but for a day after that return a stale version while it revalidates
-  "Netlify-CDN-Cache-Control": "public, durable, s-maxage=300, stale-while-revalidate=86400",
-});
-
 export const loader: LoaderFunction = async ({ request }) => {
-  const searchParams = new URL(request.url).searchParams;
-
-  const data = await getSearchPageContents({searchParams, locale: "ru"});
+  const data = await getSearchPageContents(request, "ru");
   return data;
 };
 
diff --git a/app/routes/ru.network-partner-media.tsx b/app/routes/ru.network-partner-media.tsx
@@ -1,4 +1,4 @@
-import type { HeadersFunction, LoaderFunction, MetaFunction } from "@remix-run/node";
+import type { LoaderFunction, MetaFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import NetworkPartnerMediaContent from "~/components/NetworkPartnerMediaContent";
 import { getSeoMeta } from "~/seo";
@@ -11,13 +11,6 @@ import {
 } from "~/utils/contentful";
 import pageIds from "~/utils/pageIds";
 
-export const headers: HeadersFunction = () => ({
-  // Tell the browser to always check the freshness of the cache
-  "Cache-Control": "public, max-age=0, must-revalidate",
-  // Tell the CDN to treat it as fresh for 5 minutes, but for a day after that return a stale version while it revalidates
-  "Netlify-CDN-Cache-Control": "public, durable, s-maxage=300, stale-while-revalidate=86400",
-});
-
 export const meta: MetaFunction = ({ data }) => {
   const { title, seo } = data?.page?.fields;
 
diff --git a/app/routes/uk.i-need-speaking-time.tsx b/app/routes/uk.i-need-speaking-time.tsx
@@ -1,22 +1,13 @@
-import type { HeadersFunction, LoaderFunction, MetaFunction } from "@remix-run/node";
+import type { LoaderFunction, MetaFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import BasicCatchBoundary from "~/components/BasicErrorBoundary";
 import BasicLayout from "~/components/layout/BasicLayout";
 import SpeakingTimeContent from "~/components/SpeakingTimeContent";
 import { getSeoMeta } from "~/seo";
 import { getSearchPageContents } from "~/utils/getSearchPageContents";
 
-export const headers: HeadersFunction = () => ({
-  // Tell the browser to always check the freshness of the cache
-  "Cache-Control": "public, max-age=0, must-revalidate",
-  // Tell the CDN to treat it as fresh for 5 minutes, but for a day after that return a stale version while it revalidates
-  "Netlify-CDN-Cache-Control": "public, durable, s-maxage=300, stale-while-revalidate=86400",
-});
-
 export const loader: LoaderFunction = async ({ request }) => {
-  const searchParams = new URL(request.url).searchParams;
-
-  const data = await getSearchPageContents({searchParams, locale: "uk"});
+  const data = await getSearchPageContents(request, "uk");
   return data;
 };
 
diff --git a/app/routes/uk.network-partner-media.tsx b/app/routes/uk.network-partner-media.tsx
@@ -1,4 +1,4 @@
-import type { HeadersFunction, LoaderFunction, MetaFunction } from "@remix-run/node";
+import type { LoaderFunction, MetaFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import NetworkPartnerMediaContent from "~/components/NetworkPartnerMediaContent";
 import { getSeoMeta } from "~/seo";
@@ -11,13 +11,6 @@ import {
 } from "~/utils/contentful";
 import pageIds from "~/utils/pageIds";
 
-export const headers: HeadersFunction = () => ({
-  // Tell the browser to always check the freshness of the cache
-  "Cache-Control": "public, max-age=0, must-revalidate",
-  // Tell the CDN to treat it as fresh for 5 minutes, but for a day after that return a stale version while it revalidates
-  "Netlify-CDN-Cache-Control": "public, durable, s-maxage=300, stale-while-revalidate=86400",
-});
-
 export const meta: MetaFunction = ({ data }) => {
   const { title, seo } = data?.page?.fields;
 
diff --git a/app/utils/getSearchPageContents.ts b/app/utils/getSearchPageContents.ts
@@ -10,13 +10,11 @@ import {
 import pageIds from "~/utils/pageIds";
 import type { ICoachtag, LOCALE_CODE } from "../../@types/generated/contentful";
 
-export const getSearchPageContents = async ({
-  searchParams,
-  locale
-} :{
-  searchParams: URLSearchParams,
+export const getSearchPageContents = async (
+  request: Request,
   locale: LOCALE_CODE,
-}) => {
+) => {
+  const searchParams = new URL(request.url).searchParams;
   const lang = searchParams.get("lang") || locale;
 
   const checkedTags = searchParams.getAll("tag");
diff --git a/app/utils/pageIds.ts b/app/utils/pageIds.ts
@@ -1,10 +1,10 @@
-const pageIds = {
+const pageIds: { [key: string]: string } = {
   STARTPAGE: "2W0lOJiaTbb5Dptc3mjRhN",
   SEARCH_HELP: "3tWiFBv2glxL9ouznQYrG5",
   GIVE_HELP: "2WBTRHlycqG57zkTI0G5K3",
   NETWORK: "25tWaqDQRtqkh9Bh2idI2A",
   DATA_PRIVACY: "5BfG20EiaYrSWfnsBQKmhd",
   DONATIONS: "3w6prXbEVMxtdD81saQoIT",
-} as const;
+};
 
 export default pageIds;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
