@akinon/next 1.34.0-rc.7 → 1.34.0-rc.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @akinon/next
 
+## 1.34.0-rc.8
+
+### Minor Changes
+
+- 91265bb: ZERO-2551: Improve pretty url and caching performance
+
 ## 1.34.0-rc.7
 
 ## 1.34.0-rc.6

package/data/server/category.ts

@@ -8,7 +8,7 @@ import logger from '../../utils/log';
 
 function getCategoryDataHandler(
   pk: number,
-  searchParams?: URLSearchParams,
+  searchParams?: { [key: string]: string | string[] | undefined },
   headers?: Record<string, string>
 ) {
   return async function () {
@@ -78,7 +78,7 @@ export const getCategoryData = ({
   headers
 }: {
   pk: number;
-  searchParams?: URLSearchParams;
+  searchParams?: { [key: string]: string | string[] | undefined };
   headers?: Record<string, string>;
 }) => {
   return Cache.wrap(

package/data/server/list.ts

@@ -7,7 +7,7 @@ import { parse } from 'lossless-json';
 import logger from '../../utils/log';
 
 const getListDataHandler = (
-  searchParams: URLSearchParams,
+  searchParams: { [key: string]: string | string[] | undefined },
   headers?: Record<string, string>
 ) => {
   return async function () {
@@ -54,7 +54,7 @@ export const getListData = async ({
   searchParams,
   headers
 }: {
-  searchParams: URLSearchParams;
+  searchParams: { [key: string]: string | string[] | undefined };
   headers?: Record<string, string>;
 }) => {
   return Cache.wrap(

package/data/server/product.ts

@@ -9,7 +9,7 @@ import appFetch from '../../utils/app-fetch';
 
 type GetProduct = {
   pk: number;
-  searchParams?: URLSearchParams;
+  searchParams?: { [key: string]: string | string[] | undefined };
   groupProduct?: boolean;
 };
 
@@ -74,10 +74,7 @@ export const getProductData = async ({
   groupProduct
 }: GetProduct) => {
   return Cache.wrap(
-    CacheKey[groupProduct ? 'GroupProduct' : 'Product'](
-      pk,
-      searchParams ?? new URLSearchParams()
-    ),
+    CacheKey[groupProduct ? 'GroupProduct' : 'Product'](pk, searchParams ?? {}),
     getProductDataHandler({ pk, searchParams, groupProduct }),
     {
       expire: 300

package/data/server/special-page.ts

@@ -7,7 +7,7 @@ import header from '../../redux/reducers/header';
 
 const getSpecialPageDataHandler = (
   pk: number,
-  searchParams: URLSearchParams,
+  searchParams: { [key: string]: string | string[] | undefined },
   headers?: Record<string, string>
 ) => {
   return async function () {
@@ -34,7 +34,7 @@ export const getSpecialPageData = async ({
   headers
 }: {
   pk: number;
-  searchParams: URLSearchParams;
+  searchParams: { [key: string]: string | string[] | undefined };
   headers?: Record<string, string>;
 }) => {
   return Cache.wrap(

package/lib/cache-handler.mjs

@@ -0,0 +1,33 @@
+import { CacheHandler } from '@neshca/cache-handler';
+import createLruHandler from '@neshca/cache-handler/local-lru';
+import createRedisHandler from '@neshca/cache-handler/redis-stack';
+import { createClient } from 'redis';
+
+CacheHandler.onCreation(async () => {
+  const redisUrl = `redis://${process.env.CACHE_HOST}:${
+    process.env.CACHE_PORT
+  }/${process.env.CACHE_BUCKET ?? '0'}`;
+
+  const client = createClient({
+    url: redisUrl
+  });
+
+  client.on('error', (error) => {
+    console.error('Redis client error', { redisUrl, error });
+  });
+
+  await client.connect();
+
+  const redisHandler = await createRedisHandler({
+    client,
+    timeoutMs: 5000
+  });
+
+  const localHandler = createLruHandler();
+
+  return {
+    handlers: [redisHandler, localHandler]
+  };
+});
+
+export default CacheHandler;

package/lib/cache.ts

@@ -20,13 +20,16 @@ const hashCacheKey = (object?: Record<string, string>) => {
   return `_${encodeURIComponent(cacheKey)}`;
 };
 export const CacheKey = {
-  List: (searchParams: URLSearchParams, headers?: Record<string, string>) =>
+  List: (
+    searchParams: { [key: string]: string | string[] | undefined },
+    headers?: Record<string, string>
+  ) =>
     `list_${encodeURIComponent(JSON.stringify(searchParams))}${hashCacheKey(
       headers
     )}`,
   Category: (
     pk: number,
-    searchParams?: URLSearchParams,
+    searchParams?: { [key: string]: string | string[] | undefined },
     headers?: Record<string, string>
   ) =>
     `category_${pk}_${encodeURIComponent(
@@ -35,15 +38,20 @@ export const CacheKey = {
   CategorySlug: (slug: string) => `category_${slug}`,
   SpecialPage: (
     pk: number,
-    searchParams: URLSearchParams,
+    searchParams: { [key: string]: string | string[] | undefined },
     headers?: Record<string, string>
   ) =>
     `special_page_${pk}_${encodeURIComponent(
       JSON.stringify(searchParams)
     )}${hashCacheKey(headers)}`,
-  Product: (pk: number, searchParams: URLSearchParams) =>
-    `product_${pk}_${encodeURIComponent(JSON.stringify(searchParams))}`,
-  GroupProduct: (pk: number, searchParams: URLSearchParams) =>
+  Product: (
+    pk: number,
+    searchParams: { [key: string]: string | string[] | undefined }
+  ) => `product_${pk}_${encodeURIComponent(JSON.stringify(searchParams))}`,
+  GroupProduct: (
+    pk: number,
+    searchParams: { [key: string]: string | string[] | undefined }
+  ) =>
     `group_product_${pk}_${encodeURIComponent(JSON.stringify(searchParams))}`,
   FlatPage: (pk: number) => `flat_page_${pk}`,
   LandingPage: (pk: number) => `landing_page_${pk}`,
@@ -158,6 +166,10 @@ export class Cache {
     handler: () => Promise<T>,
     options?: CacheOptions
   ): Promise<T> {
+    if (Settings.usePrettyUrlRoute) {
+      return await handler();
+    }
+
     const requiredVariables = [
       process.env.CACHE_HOST,
       process.env.CACHE_PORT,

package/middlewares/default.ts

@@ -198,6 +198,13 @@ const withPzDefault =
                                 pathname.pop(),
                                 'pz-not-found'
                               );
+                            
+                            if(Settings.usePrettyUrlRoute &&
+                              url.searchParams.toString().length > 0
+                            ) {
+                              url.pathname =
+                                url.pathname +
+                                `searchparams|${url.searchParams.toString()}`;
                             }
 
                             Settings.rewrites.forEach((rewrite) => {

package/middlewares/pretty-url.ts

@@ -56,6 +56,10 @@ const resolvePrettyUrl = async (pathname: string, ip: string | null) => {
 const withPrettyUrl =
   (middleware: NextMiddleware) =>
   async (req: PzNextRequest, event: NextFetchEvent) => {
+    if (Settings.usePrettyUrlRoute) {
+      return middleware(req, event);
+    }
+
     const url = req.nextUrl.clone();
     const matchedLanguagePrefix = url.pathname.match(
       urlLocaleMatcherRegex

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.34.0-rc.7",
+  "version": "1.34.0-rc.8",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -20,11 +20,12 @@
     "@opentelemetry/sdk-trace-node": "1.19.0",
     "@opentelemetry/semantic-conventions": "1.19.0",
     "@reduxjs/toolkit": "1.9.7",
+    "@neshca/cache-handler": "1.0.7",
     "cross-spawn": "7.0.3",
     "generic-pool": "3.9.0",
     "react-redux": "8.1.3",
     "react-string-replace": "1.1.1",
-    "redis": "4.5.1",
+    "redis": "4.6.13",
     "semver": "7.5.4",
     "set-cookie-parser": "2.6.0"
   },
@@ -34,7 +35,7 @@
     "@typescript-eslint/eslint-plugin": "6.7.4",
     "@typescript-eslint/parser": "6.7.4",
     "eslint": "^8.14.0",
-    "@akinon/eslint-plugin-projectzero": "1.34.0-rc.7",
+    "@akinon/eslint-plugin-projectzero": "1.34.0-rc.8",
     "eslint-config-prettier": "8.5.0"
   }
 }

package/routes/pretty-url.tsx

@@ -0,0 +1,195 @@
+import { URLS } from '@akinon/next/data/urls';
+import { Metadata, PageProps } from '@akinon/next/types';
+import logger from '@akinon/next/utils/log';
+import { notFound } from 'next/navigation';
+
+type PrettyUrlResult = {
+  matched: boolean;
+  path?: string;
+  pk?: number;
+};
+
+const resolvePrettyUrlHandler =
+  (pathname: string, ip: string | null) => async () => {
+    let results = [] as { old_path: string }[];
+    let prettyUrlResult: PrettyUrlResult = {
+      matched: false
+    };
+
+    try {
+      const requestUrl = URLS.misc.prettyUrls(`/${pathname}/`);
+
+      logger.debug(`Resolving pretty url`, { pathname, requestUrl, ip });
+
+      const start = Date.now();
+      const apiResponse = await fetch(requestUrl, {
+        next: {
+          revalidate: 0
+        }
+      });
+      const data = await apiResponse.json();
+      ({ results } = data);
+      const end = Date.now();
+      console.warn('Pretty url response time', end - start, requestUrl);
+
+      const matched = results.length > 0;
+      const [{ old_path: path } = { old_path: '' }] = results;
+      let pk;
+
+      if (matched) {
+        const pkRegex = /\/(\d+)\/$/;
+        const match = path.match(pkRegex);
+        pk = match ? parseInt(match[1]) : undefined;
+      }
+
+      prettyUrlResult = {
+        matched,
+        path,
+        pk
+      };
+
+      logger.trace('Pretty url result', { prettyUrlResult, ip });
+    } catch (error) {
+      logger.error('Error resolving pretty url', { error, pathname, ip });
+    }
+
+    return prettyUrlResult;
+  };
+
+export async function generateMetadata({ params }: PageProps) {
+  let result: Metadata = {};
+  const { prettyurl } = params;
+  const pageSlug = prettyurl
+    .filter((x) => !x.startsWith('searchparams'))
+    .join('/');
+
+  const searchParams = Object.fromEntries(
+    new URLSearchParams(
+      decodeURIComponent(
+        prettyurl
+          .find((x) => x.startsWith('searchparams'))
+          ?.replace('searchparams%7C', '')
+      ) ?? {}
+    ).entries()
+  );
+
+  const prettyUrlResult = await resolvePrettyUrlHandler(pageSlug, null)();
+
+  if (!prettyUrlResult.matched) {
+    return notFound();
+  }
+
+  const commonProps = {
+    params: {
+      ...params,
+      pk: prettyUrlResult.pk
+    },
+    searchParams
+  };
+
+  try {
+    if (prettyUrlResult.path.startsWith('/product/')) {
+      await import('@root/product/[pk]/page').then(async (module) => {
+        result = await module['generateMetadata']?.(commonProps);
+      });
+    }
+
+    if (prettyUrlResult.path.startsWith('/group-product/')) {
+      await import('@root/group-product/[pk]/page').then(async (module) => {
+        result = await module['generateMetadata']?.(commonProps);
+      });
+    }
+
+    if (prettyUrlResult.path.startsWith('/category/')) {
+      await import('@root/category/[pk]/page').then(async (module) => {
+        result = await module['generateMetadata']?.(commonProps);
+      });
+    }
+
+    if (prettyUrlResult.path.startsWith('/special-page/')) {
+      await import('@root/special-page/[pk]/page').then(async (module) => {
+        result = await module['generateMetadata']?.(commonProps);
+      });
+    }
+
+    if (prettyUrlResult.path.startsWith('/flat-page/')) {
+      await import('@root/flat-page/[pk]/page').then(async (module) => {
+        result = await module['generateMetadata']?.(commonProps);
+      });
+    }
+    // eslint-disable-next-line no-empty
+  } catch (error) {}
+
+  return result;
+}
+
+export const dynamic = 'force-static';
+export const revalidate = 300;
+
+export default async function Page({ params }) {
+  const { prettyurl } = params;
+  const pageSlug = prettyurl
+    .filter((x) => !x.startsWith('searchparams'))
+    .join('/');
+
+  const urlSearchParams = new URLSearchParams(
+    decodeURIComponent(
+      prettyurl
+        .find((x) => x.startsWith('searchparams'))
+        ?.replace('searchparams%7C', '')
+    ) ?? {}
+  );
+
+  const searchParams = {};
+
+  for (const [key, value] of urlSearchParams.entries() as unknown as Array<
+    [string, string]
+  >) {
+    if (!searchParams[key]) {
+      searchParams[key] = [];
+    }
+    searchParams[key].push(value);
+  }
+
+  const result = await resolvePrettyUrlHandler(pageSlug, null)();
+
+  if (!result.matched) {
+    return notFound();
+  }
+
+  const commonProps = {
+    params: {
+      ...params,
+      pk: result.pk
+    },
+    searchParams
+  };
+
+  if (result.path.startsWith('/category/')) {
+    const CategoryPage = (await import('@root/category/[pk]/page')).default;
+    return <CategoryPage {...commonProps} />;
+  }
+
+  if (result.path.startsWith('/product/')) {
+    const ProductPage = (await import('@root/product/[pk]/page')).default;
+    return <ProductPage {...commonProps} />;
+  }
+
+  if (result.path.startsWith('/group-product/')) {
+    const GroupProduct = (await import('@root/group-product/[pk]/page'))
+      .default;
+    return <GroupProduct {...commonProps} />;
+  }
+
+  if (result.path.startsWith('/special-page/')) {
+    const SpecialPage = (await import('@root/special-page/[pk]/page')).default;
+    return <SpecialPage {...commonProps} />;
+  }
+
+  if (result.path.startsWith('/flat-page/')) {
+    const FlatPage = (await import('@root/flat-page/[pk]/page')).default;
+    return <FlatPage {...commonProps} />;
+  }
+
+  return null;
+}

package/types/index.ts

@@ -70,6 +70,7 @@ export interface Currency {
 }
 
 export interface Settings {
+  usePrettyUrlRoute?: boolean;
   commerceUrl: string;
   redis: {
     defaultExpirationTime: number;
@@ -214,7 +215,7 @@ export type Translations = { [key: string]: object };
 
 export interface PageProps<T = any> {
   params: T;
-  searchParams: URLSearchParams;
+  searchParams: { [key: string]: string | string[] | undefined };
 }
 
 export interface LayoutProps<T = any> extends PageProps<T> {

package/utils/app-fetch.ts

@@ -41,7 +41,7 @@ const appFetch = async <T>(
     };
 
     init.next = {
-      revalidate: 60
+      revalidate: Settings.usePrettyUrlRoute ? 0 : 60
     };
 
     logger.debug(`FETCH START ${url}`, { requestURL, init, ip });

package/utils/generate-commerce-search-params.ts

@@ -1,11 +1,15 @@
 import logger from './log';
 
-export const generateCommerceSearchParams = (searchParams?: URLSearchParams) => {
+export const generateCommerceSearchParams = (searchParams?: {
+  [key: string]: string | string[] | undefined;
+}) => {
   if (!searchParams) {
     return null;
   }
 
-  const urlSerchParams = new URLSearchParams(searchParams);
+  const urlSerchParams = new URLSearchParams(
+    searchParams as Record<string, string>
+  );
 
   Object.entries(searchParams).forEach(([key, value]) => {
     if (typeof value === 'object') {

package/with-pz-config.js

@@ -8,6 +8,7 @@ const defaultConfig = {
   transpilePackages: ['@akinon/next', ...pzPlugins.map((p) => `@akinon/${p}`)],
   skipTrailingSlashRedirect: true,
   poweredByHeader: false,
+  cacheMaxMemorySize: 0,
   env: {
     NEXT_PUBLIC_SENTRY_DSN: process.env.SENTRY_DSN
   },
@@ -65,7 +66,12 @@ const defaultConfig = {
   }
 };
 
-const withPzConfig = (myNextConfig = {}) => {
+const withPzConfig = (
+  myNextConfig = {},
+  options = {
+    useCacheHandler: false
+  }
+) => {
   let extendedConfig = deepMerge({}, defaultConfig, myNextConfig);
 
   const originalPzHeadersFunction = defaultConfig.headers;
@@ -91,6 +97,10 @@ const withPzConfig = (myNextConfig = {}) => {
     return [...pzRewrites, ...myRewrites];
   };
 
+  if (options.useCacheHandler) {
+    extendedConfig.cacheHandler = require.resolve('./lib/cache-handler.mjs');
+  }
+
   return extendedConfig;
 };