Handling customer subdomains with middleware with NextJS but duplicate logs and requests

8 views Asked by At

This is my slightly modified middleware, inspired from https://github.com/vercel/platforms/blob/main/middleware.ts:

import { NextRequest, NextResponse } from "next/server";

export const config = {
  matcher: [
    "/((?!_next/|_static/|_vercel|[\\w-]+\\.\\w+).*)",
  ],
};

export default async function middleware(req: NextRequest) {
  const url = req.nextUrl;

  const host = req.headers.get("Host") || "";
  const domain = host.split(".")[0];

  const searchParams = req.nextUrl.searchParams.toString();
  const path = `${url.pathname}${searchParams.length > 0 ? `?${searchParams}` : ""}`;

  let a: URL;
  if (domain === "auth") {
    a = new URL(`/auth${path}`, req.url);
  } else {
    a = new URL(`/app/${domain}${path}`, req.url);
  }

  return NextResponse.rewrite(a);
}

And my file layout:

app/
   app/
       [domain]/
           dashboard/page.tsx
    auth
       login/page.tsx

When I increase the logging config with:

const nextConfig = {
  serverRuntimeConfig: {},
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
};

And go to auth/login page, and sign in which redirects me to /app/domain page, it looks like multiple logs with different times. Is this a problem?

✓ Ready in 3.4s
 ✓ Compiled /middleware in 66ms (54 modules)
 ○ Compiling /auth/login/page ...
 ✓ Compiled /auth/login/page in 749ms (503 modules)
 ✓ Compiled in 98ms (227 modules)
 GET /login 200 in 935ms
 GET /login 200 in 902ms
 GET /login 200 in 39ms
 GET /login 200 in 30ms
 ✓ Compiled /favicon.ico/route in 149ms (304 modules)
 GET /favicon.ico 200 in 184ms

 POST /login 200 in 2404ms
 POST /login 200 in 2388ms
 │ POST https://<external-service>/auth/login 200 in 1779ms (cache: SKIP)
 │  │  Cache missed reason: (cache: no-cache)
 │  │ GET https://<external-service>/auth/me 200 in 529ms (cache: SKIP)
 │  │  │  Cache missed reason: (cache: no-cache)
 ✓ Compiled /app/[domain]/saas/page in 150ms (574 modules)
 GET /saas 200 in 429ms
 GET /saas 200 in 414ms
 ✓ Compiled /app/[domain]/saas/apps/page in 95ms (588 modules)
 GET /saas/apps?_rsc=3a9p5 200 in 324ms
 GET /saas/apps?_rsc=3a9p5 200 in 303ms
 GET /saas/apps?_rsc=edk2q 200 in 18ms
 GET /saas/apps?_rsc=edk2q 200 in 15ms
 ✓ Compiled /app/[domain]/saas/apps/list/page in 76ms (594 modules)
 GET /saas/apps/list?_rsc=2h06e 200 in 263ms
 GET /saas/apps/list?_rsc=2h06e 200 in 259ms
 GET /saas/apps/list?_rsc=8hyri 200 in 15ms
 GET /saas/apps/list?_rsc=8hyri 200 in 13ms

The bad part is I see duplicate data fetches:

I visited the page twice but the data was fetched 4 times.

 ✓ Compiled /[domain]/api/[[...slug]]/route in 60ms (344 modules)
 GET /api/saas/app 200 in 1266ms
 GET /api/saas/app 200 in 1262ms
 │ GET https://<external-service>/api/saas/app 200 in 1035ms (cache: SKIP)
 │  │  Cache missed reason: (cache: no-cache)
 GET /api/saas/app 200 in 959ms
 GET /api/saas/app 200 in 956ms
 │ GET https://<external-service>/api/saas/app 200 in 936ms (cache: SKIP)
 │  │  Cache missed reason: (cache: no-cache)
 GET /api/saas/app 200 in 1200ms
 GET /api/saas/app 200 in 1189ms
 │ GET https://<external-service>/api/saas/app 200 in 1150ms (cache: SKIP)
 │  │  Cache missed reason: (cache: no-cache)
 GET /api/saas/app 200 in 1006ms
 GET /api/saas/app 200 in 1000ms
 │ GET https://<external-service>/api/saas/app 200 in 988ms (cache: SKIP)
 │  │  Cache missed reason: (cache: no-cache)
0

There are 0 answers