nextjs - ✅(Solved) Fix Docs: Use Cache + Supabase [1 pull requests, 10 comments, 3 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#86760Fetched 2026-04-08 02:09:25
View on GitHub
Comments
10
Participants
3
Timeline
25
Reactions
0
Assignees
Timeline (top)
commented ×10subscribed ×4labeled ×3cross-referenced ×2

Error Message

const { data, error } = await query; if ( error ) console.error( error );

Fix Action

Fixed

PR fix notes

PR #80: perf(records): 기록 페이지 캐싱 최적화 및 UTMB 함수 분리

Description (problem / solution / changelog)

Summary

  • fetchUtmbRecentRaceapp/actions/utmb.ts에서 lib/utmb.ts로 분리하여 서버 액션 의존성 제거
  • 기록 페이지에 "use cache" + cacheLife("days") 적용으로 일 단위 캐싱 도입
  • createAdminClient로 전환하여 캐시 컨텍스트에서 안정적으로 동작하도록 변경
  • UTMB 최근 대회 조회 루프 단순화

Closes #79

Test plan

  • 기록 페이지 정상 로딩 확인
  • 마라톤/철인3종/UTMB 탭 전환 및 데이터 표시 확인
  • UTMB 최근 대회 기록이 정상 표시되는지 확인
  • 캐싱 동작 확인 (재방문 시 빠른 로딩)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

Summary by CodeRabbit

릴리스 노트

  • Performance

    • 기록 페이지 데이터 캐싱 정책을 개선해 응답 일관성과 성능을 향상시켰습니다.
    • UTMB 경기 데이터 로딩 방식을 변경해 안정성과 예측 가능성을 높였습니다.
  • Refactor

    • 클라이언트 컴포넌트의 동적 로딩을 도입해 초기 로드 성능과 렌더 유연성을 개선했습니다.
    • UTMB 최근 경기 조회 로직을 라이브러리로 옮겨 유지보수성을 향상시켰습니다.
  • Chores

    • 브라우저 호환성 설정을 추가했습니다 (Chrome 100, Safari 15, Firefox 100).
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Changed files

  • app/(main)/records/page.tsx (modified, +20/-23)
  • app/actions/utmb.ts (modified, +0/-66)
  • lib/utmb.ts (added, +69/-0)
  • package.json (modified, +5/-0)

Code Example

"use server";

import { cacheLife } from "next/cache";

import { createADMINClient } from "../tests-cache/database/utility";

export type AssistantRole = {
    assistant_id: string;
    role_name: string;
};

//Passing the accountId "separate" as useCache cannot get the "getCurrrentUser"
export async function getRoleName ( accountId: number ): Promise<AssistantRole[] | null>
{
    "use cache";
    cacheLife( "hours" );

    console.log( 'cache' );

    const supabase = createADMINClient();
    const query = supabase
        .from( "assistants" )
        .select( "assistant_id, role_name" )
        .eq( "account_id", accountId );

    const { data, error } = await query;

    if ( error )
    {
        console.error( error );
        return null;
    }

    return data;
}

---

const currentUser = await getCurrentUser();
  if ( !currentUser?.account_id )
  {
      return null;
  }
  
  const roles = await getRoleName(currentUser.account_id);

---

cache => Not cached
Cache  cache => Cached
RAW_BUFFERClick to expand / collapse

What is the documentation issue?

Could we have a full example where a database connection is needed, and also where we want to check if the user is really who he is?

At this stage everything i've saw is splitting the "currentUser" from the call to the database. However that is quite risky, as the security is completely bypassed by whoever know the serverAction to be called.

I may be not understanding the different "use cache", however the use cache: private seems the perfect case I need, but on server-side!

Example:

"use server";

import { cacheLife } from "next/cache";

import { createADMINClient } from "../tests-cache/database/utility";

export type AssistantRole = {
    assistant_id: string;
    role_name: string;
};

//Passing the accountId "separate" as useCache cannot get the "getCurrrentUser"
export async function getRoleName ( accountId: number ): Promise<AssistantRole[] | null>
{
    "use cache";
    cacheLife( "hours" );

    console.log( 'cache' );

    const supabase = createADMINClient();
    const query = supabase
        .from( "assistants" )
        .select( "assistant_id, role_name" )
        .eq( "account_id", accountId );

    const { data, error } = await query;

    if ( error )
    {
        console.error( error );
        return null;
    }

    return data;
}

Calling function


  const currentUser = await getCurrentUser();
  if ( !currentUser?.account_id )
  {
      return null;
  }
  
  const roles = await getRoleName(currentUser.account_id);

How do I cache this function for an hour?

The console.log is getting cached most of the time right now, however if there is a save from the database the cache is getting refreshed... WHY?

Console.log

cache => Not cached
Cache  cache => Cached

However if i go in a page that doesn't do updates, everything works fine.

Is there any context that might help us understand?

Does the docs page already exist? Please link to it.

No response

extent analysis

TL;DR

To cache the getRoleName function for an hour while ensuring the cache is not bypassed by unauthorized users, consider using a cache key that includes the user's account ID and implementing authentication checks within the cached function.

Guidance

  • Use a cache key that incorporates the accountId to ensure cache separation between users, preventing unauthorized access to cached data.
  • Implement authentication checks within the getRoleName function to verify the user's identity before executing the database query, ensuring that only authorized users can access the cached data.
  • Investigate the createADMINClient function to ensure it is properly authenticated and authorized for the database operations being performed.
  • Review the caching mechanism to understand why the cache is being refreshed after a database save, potentially due to cache invalidation mechanisms or cache key changes.

Example

// Example of using a cache key with the user's account ID
export async function getRoleName(accountId: number): Promise<AssistantRole[] | null> {
  "use cache";
  cacheLife("hours");
  const cacheKey = `roles-${accountId}`;
  // Use the cacheKey to store and retrieve cached data
}

Notes

The provided example code and guidance assume that the createADMINClient function and the caching mechanism are properly implemented and secured. However, without further information about these components, it is difficult to provide a more detailed solution.

Recommendation

Apply a workaround by using a cache key that includes the user's account ID and implementing authentication checks within the cached function to ensure secure and authorized access to cached data. This approach helps mitigate potential security risks associated with caching sensitive data.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING