Image blur server (#589)

* remove useclient on datafetch

* improve logging

Author: codercatdev

components/cover-image.tsx

@@ -1,19 +1,17 @@
-"use client";
 import { CloudinaryAsset } from "@/sanity.types";
 import CloudinaryImage from "@/components/cloudinary-image";
 import { getCldImageUrl } from "next-cloudinary";
-import { useEffect, useState } from "react";
 
 interface CoverImageProps {
   image: CloudinaryAsset | null | undefined;
   priority?: boolean;
   className?: string;
   width?: number;
   height?: number;
-  quality?: number;
+  quality?: number | `${number}`
 }
 
-export default function CoverImage(props: CoverImageProps) {
+export default async function CoverImage(props: CoverImageProps) {
   const {
     image: originalImage,
     priority,
@@ -22,12 +20,6 @@ export default function CoverImage(props: CoverImageProps) {
     height,
     quality,
   } = props;
-  const [dataUrl, setDataUrl] = useState("");
-
-  useEffect(() => {
-    if (!originalImage?.public_id) return;
-    getImageUrl(originalImage?.public_id);
-  }, [originalImage?.public_id]);
 
   const getImageUrl = async (src: string) => {
     const imageUrl = getCldImageUrl({
@@ -38,25 +30,23 @@ export default function CoverImage(props: CoverImageProps) {
     const arrayBuffer = await response.arrayBuffer();
     const buffer = Buffer.from(arrayBuffer);
     const base64 = buffer.toString("base64");
-    setDataUrl(`data:${response.type};base64,${base64}`);
+    return `data:${response.type};base64,${base64}`
   };
 
   let image;
-  if (originalImage?.public_id && dataUrl) {
+  if (originalImage?.public_id) {
     image = (
       <CloudinaryImage
         className={className || "w-full h-auto aspect-video"}
         width={width || 1920}
         height={height || 1080}
         priority={priority}
         quality={quality || "auto"}
-        sizes="(max-width: 768px) 100vw,
-          (max-width: 1200px) 50vw,
-          33vw"
+        sizes="(max-width: 768px) 100vw,(max-width: 1200px) 50vw, 33vw"
         alt={originalImage?.context?.custom?.alt || ""}
         src={originalImage?.public_id}
         placeholder="blur"
-        blurDataURL={dataUrl}
+        blurDataURL={await getImageUrl(originalImage.public_id)}
         config={{
           url: {
             secureDistribution: "media.codingcat.dev",

next.config.js

@@ -4,6 +4,11 @@ module.exports = {
     // Used to guard against accidentally leaking SANITY_API_READ_TOKEN to the browser
     taint: true,
   },
+  compiler: {
+    removeConsole: process.env.NODE_ENV === 'production' ? {
+      exclude: ['error'],
+    } : false,
+  },
 };
 
 

sanity/lib/fetch.ts

@@ -1,9 +1,8 @@
-import type { ClientPerspective, QueryParams } from "next-sanity";
+import type { ClientPerspective, FilteredResponseQueryOptions, QueryParams } from "next-sanity";
 import { draftMode } from "next/headers";
 
 import { client } from "@/sanity/lib/client";
 import { token } from "@/sanity/lib/token";
-console.debug('env', process.env.VERCEL_ENV)
 /**
  * Used to fetch data in Server Components, it has built in support for handling Draft Mode and perspectives.
  * When using the "published" perspective then time-based revalidation is used, set to match the time-to-live on Sanity's API CDN (60 seconds)
@@ -26,8 +25,19 @@ export async function sanityFetch<QueryResponse>({
   perspective?: Omit<ClientPerspective, "raw">;
   stega?: boolean;
 }) {
+
+  let config: FilteredResponseQueryOptions = {
+    stega,
+    perspective: "published",
+    // The `published` perspective is available on the API CDN
+    useCdn: true,
+    // Only enable Stega in production if it's a Vercel Preview Deployment, as the Vercel Toolbar supports Visual Editing
+    // When using the `published` perspective we use time-based revalidation to match the time-to-live on Sanity's API CDN (60 seconds)
+    next: { revalidate: 60 },
+  }
+
   if (perspective === "previewDrafts") {
-    return client.fetch<QueryResponse>(query, params, {
+    config = {
       stega,
       perspective: "previewDrafts",
       // The token is required to fetch draft content
@@ -36,15 +46,16 @@ export async function sanityFetch<QueryResponse>({
       useCdn: false,
       // And we can't cache the responses as it would slow down the live preview experience
       next: { revalidate: 0 },
-    });
+    }
   }
-  return client.fetch<QueryResponse>(query, params, {
-    stega,
-    perspective: "published",
-    // The `published` perspective is available on the API CDN
-    useCdn: true,
-    // Only enable Stega in production if it's a Vercel Preview Deployment, as the Vercel Toolbar supports Visual Editing
-    // When using the `published` perspective we use time-based revalidation to match the time-to-live on Sanity's API CDN (60 seconds)
-    next: { revalidate: 60 },
-  });
+
+
+  console.debug({
+    // replace "\n" with carriage return
+    query: query.replace(/\n/g, ""),
+    params,
+    config
+  })
+
+  return client.fetch<QueryResponse>(query, params, config);
 }