Reactã®å®éšçããã¯experimental_useCacheãæ·±æãããã¯ã©ã€ã¢ã³ããµã€ãã®ããŒã¿ååŸãšãã£ãã·ã¥ãæé©åããããã®å©ç¹ããŠãŒã¹ã±ãŒã¹ãå®è£ æŠç¥ãæ¢ããŸãã
React experimental_useCache: ããã©ãŒãã³ã¹åäžã®ããã®ã¯ã©ã€ã¢ã³ããµã€ããã£ãã·ã¥ããã¹ã¿ãŒãã
ããã³ããšã³ãéçºã®äž»èŠãªåã§ããReactã¯ãçŸä»£ã®Webã¢ããªã±ãŒã·ã§ã³ã®å¢å€§ããèŠæ±ã«å¿ããããã«çµ¶ããé²åããŠããŸãããã®æŠåšåº«ã«æè¿å ãã£ãããšããµã€ãã£ã³ã°ãªå®éšçæ©èœã®äžã€ããã¯ã©ã€ã¢ã³ããµã€ããã£ãã·ã¥ãå¹çåããããã«èšèšãããããã¯experimental_useCacheã§ãããã®ããã¯ã¯ãç¹ã«React Server Components (RSC) ãšããŒã¿ååŸã®æèã§éèŠã§ãããããã©ãŒãã³ã¹ãšãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæé©åããããã®åŒ·åãªã¡ã«ããºã ãæäŸããŸãããã®å
æ¬çãªã¬ã€ãã§ã¯ãexperimental_useCacheãè©³çŽ°ã«æ¢ãããã®å©ç¹ããŠãŒã¹ã±ãŒã¹ãå®è£
æŠç¥ãããã³å°å
¥ã«é¢ããèæ
®äºé
ãã«ããŒããŸãã
ã¯ã©ã€ã¢ã³ããµã€ããã£ãã·ã¥ãçè§£ãã
experimental_useCacheã®è©³çްã«èžã¿èŸŒãåã«ãã¯ã©ã€ã¢ã³ããµã€ããã£ãã·ã¥ãšãã®Webéçºã«ãããéèŠæ§ã«ã€ããŠç¢ºããªçè§£ã確ç«ããŸãããã
ã¯ã©ã€ã¢ã³ããµã€ããã£ãã·ã¥ãšã¯ïŒ
ã¯ã©ã€ã¢ã³ããµã€ããã£ãã·ã¥ãšã¯ããŠãŒã¶ãŒã®ãã©ãŠã¶ãããã€ã¹ã«ããŒã¿ãçŽæ¥ä¿åããããšã§ãããã®ãã£ãã·ã¥ãããããŒã¿ã¯ããµãŒããŒã«ç¹°ãè¿ããªã¯ãšã¹ããéãããšãªãè¿ éã«ååŸã§ããŸããããã«ãããé å»¶ãå€§å¹ ã«æžå°ããã¢ããªã±ãŒã·ã§ã³ã®å¿çæ§ãåäžãããµãŒããŒã®è² è·ã軜æžãããŸãã
ã¯ã©ã€ã¢ã³ããµã€ããã£ãã·ã¥ã®å©ç¹
- ããã©ãŒãã³ã¹ã®åäžïŒ ãããã¯ãŒã¯ãªã¯ãšã¹ãã®åæžã¯ãèªã¿èŸŒã¿æéã®ççž®ãšã¹ã ãŒãºãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ã€ãªãããŸãã
- ãµãŒããŒè² è·ã®è»œæžïŒ ãã£ãã·ã¥ã«ãããµãŒããŒããã®ããŒã¿ååŸããªãããŒããããä»ã®ã¿ã¹ã¯ã®ããã«ãªãœãŒã¹ãè§£æŸãããŸãã
- ãªãã©ã€ã³æ©èœïŒ å Žåã«ãã£ãŠã¯ããã£ãã·ã¥ãããããŒã¿ã«ãã£ãŠéå®çãªãªãã©ã€ã³æ©èœãå¯èœã«ãªãããŠãŒã¶ãŒã¯ã€ã³ã¿ãŒãããæ¥ç¶ããªããŠãã¢ããªã±ãŒã·ã§ã³ãæäœã§ããŸãã
- ã³ã¹ãåæžïŒ ãµãŒããŒè² è·ã®è»œæžã¯ãç¹ã«ãã©ãã£ãã¯ã®å€ãã¢ããªã±ãŒã·ã§ã³ã«ãããŠãã€ã³ãã©ã³ã¹ãã®åæžã«ã€ãªããå¯èœæ§ããããŸãã
React experimental_useCacheã®ç޹ä»
experimental_useCacheã¯ãç¹ã«React Server Componentså
ã§ã¯ã©ã€ã¢ã³ããµã€ããã£ãã·ã¥ãç°¡çŽ åãã匷åããããã«ç¹å¥ã«èšèšãããReactããã¯ã§ããããŒã¿ååŸãªã©ã®é«ã³ã¹ããªæäœã®çµæããã£ãã·ã¥ãã䟿å©ã§å¹ççãªæ¹æ³ãæäŸããåãå
¥åã«å¯ŸããŠåãããŒã¿ãç¹°ãè¿ãååŸãããªãããã«ããŸãã
experimental_useCacheã®äž»ãªæ©èœãšå©ç¹
- èªåãã£ãã·ã¥ïŒ ãã®ããã¯ã¯ãæž¡ããã颿°ã®åŒæ°ã«åºã¥ããŠãã®çµæãèªåçã«ãã£ãã·ã¥ããŸãã
- ãã£ãã·ã¥ã®ç¡å¹åïŒ ã³ã¢ã®
useCacheããã¯èªäœã«ã¯çµã¿èŸŒã¿ã®ãã£ãã·ã¥ç¡å¹åæ©èœã¯ãããŸããããä»ã®æŠç¥ïŒåŸè¿°ïŒãšçµã¿åãããããšã§ãã£ãã·ã¥ã®æŽæ°ã管çã§ããŸãã - React Server Componentsãšã®çµ±åïŒ
useCacheã¯React Server Componentsãšã·ãŒã ã¬ã¹ã«é£æºããããã«èšèšãããŠããããµãŒããŒã§ååŸãããããŒã¿ã®ãã£ãã·ã¥ãå¯èœã«ããŸãã - ããŒã¿ååŸã®ç°¡çŽ åïŒ ãã£ãã·ã¥ããŒãšã¹ãã¬ãŒãžã®ç®¡çã®è€éããæœè±¡åããããšã§ãããŒã¿ååŸããžãã¯ãç°¡çŽ åããŸãã
experimental_useCacheã®ä»çµã¿
experimental_useCacheããã¯ã¯ãåŒæ°ãšããŠé¢æ°ãåãåããŸãããã®é¢æ°ã¯éåžžãäœããã®ããŒã¿ãååŸãŸãã¯èšç®ãã圹å²ãæ
ããŸããããã¯ãåãåŒæ°ã§åŒã³åºããããšããŸã颿°ã®çµæããã§ã«ãã£ãã·ã¥ãããŠãããã©ããã確èªããŸãããã£ãã·ã¥ãããŠããã°ããã£ãã·ã¥ãããå€ãè¿ãããŸããããã§ãªããã°ã颿°ãå®è¡ããããã®çµæããã£ãã·ã¥ãããŠããããã®çµæãè¿ãããŸãã
experimental_useCacheã®åºæ¬çãªäœ¿çšæ³
APIãããŠãŒã¶ãŒããŒã¿ãååŸããç°¡åãªäŸã䜿ã£ãŠãexperimental_useCacheã®åºæ¬çãªäœ¿çšæ³ã説æããŸãã
import { experimental_useCache as useCache } from 'react';
async function fetchUserData(userId: string): Promise<{ id: string; name: string }> {
// APIåŒã³åºããã·ãã¥ã¬ãŒã
await new Promise(resolve => setTimeout(resolve, 500)); // é
å»¶ãã·ãã¥ã¬ãŒã
return { id: userId, name: `User ${userId}` };
}
function UserProfile({ userId }: { userId: string }) {
const userData = useCache(fetchUserData, userId);
if (!userData) {
return <p>ãŠãŒã¶ãŒããŒã¿ãèªã¿èŸŒã¿äž...</p>;
}
return (
<div>
<h2>ãŠãŒã¶ãŒãããã£ãŒã«</h2>
<p><strong>ID:</strong> {userData.id}</p>
<p><strong>åå:</strong> {userData.name}</p>
</div>
);
}
export default UserProfile;
ãã®äŸã§ã¯ïŒ
reactããã±ãŒãžããexperimental_useCacheãã€ã³ããŒãããŸãã- APIãããŠãŒã¶ãŒããŒã¿ãååŸããã®ãã·ãã¥ã¬ãŒãããéåæé¢æ°
fetchUserDataãå®çŸ©ããŸãïŒäººçºçãªé å»¶ããïŒã UserProfileã³ã³ããŒãã³ãå ã§ãuserIdããããã£ã«åºã¥ããŠãŠãŒã¶ãŒããŒã¿ãååŸãããã£ãã·ã¥ããããã«useCacheã䜿çšããŸãã- ã³ã³ããŒãã³ããç¹å®ã®
userIdã§åããŠã¬ã³ããªã³ã°ããããšããfetchUserDataãåŒã³åºãããŸããåãuserIdã§ã®åŸç¶ã®ã¬ã³ããªã³ã°ã§ã¯ããã£ãã·ã¥ããããŒã¿ãååŸãããå¥ã®APIåŒã³åºããåé¿ãããŸãã
é«åºŠãªãŠãŒã¹ã±ãŒã¹ãšèæ ®äºé
åºæ¬çãªäœ¿çšæ³ã¯ç°¡åã§ãããexperimental_useCacheã¯ããè€éãªã·ããªãªã«ãé©çšã§ããŸãã以äžã«ãããã€ãã®é«åºŠãªãŠãŒã¹ã±ãŒã¹ãšéèŠãªèæ
®äºé
ã瀺ããŸãã
è€éãªããŒã¿æ§é ã®ãã£ãã·ã¥
experimental_useCacheã¯ãé
åããªããžã§ã¯ããªã©ã®è€éãªããŒã¿æ§é ã广çã«ãã£ãã·ã¥ã§ããŸãããã ãããã£ãã·ã¥ããã颿°ã«æž¡ãããåŒæ°ããã£ãã·ã¥ããŒçæã®ããã«é©åã«ã·ãªã¢ã©ã€ãºãããŠããããšã確èªããããšãéèŠã§ããåŒæ°ã«å¯å€ãªããžã§ã¯ããå«ãŸããŠããå Žåããããã®ãªããžã§ã¯ããžã®å€æŽã¯ãã£ãã·ã¥ããŒã«åæ ããããå€ãããŒã¿ãååŸããå¯èœæ§ããããŸãã
ããŒã¿å€æã®ãã£ãã·ã¥
APIããååŸããããŒã¿ãã¬ã³ããªã³ã°ããåã«å€æããå¿
èŠãããããšããããããŸããexperimental_useCacheã䜿çšããŠå€æåŸã®ããŒã¿ããã£ãã·ã¥ããããšã§ãåŸç¶ã®ã¬ã³ããªã³ã°ã§ã®åé·ãªå€æãé²ãããšãã§ããŸããäŸãã°ïŒ
import { experimental_useCache as useCache } from 'react';
async function fetchProducts(): Promise<{ id: string; name: string; price: number }[]> {
// APIããååãååŸããã®ãã·ãã¥ã¬ãŒã
await new Promise(resolve => setTimeout(resolve, 300));
return [
{ id: '1', name: 'Product A', price: 20 },
{ id: '2', name: 'Product B', price: 30 },
];
}
function formatCurrency(price: number, currency: string = 'USD'): string {
return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(price);
}
function ProductList() {
const products = useCache(fetchProducts);
const formattedProducts = useCache(
(prods: { id: string; name: string; price: number }[]) => {
return prods.map(product => ({
...product,
formattedPrice: formatCurrency(product.price),
}));
},
products || [] // productsãåŒæ°ãšããŠæž¡ã
);
if (!formattedProducts) {
return <p>ååãèªã¿èŸŒã¿äž...</p>;
}
return (
<ul>
{formattedProducts.map(product => (
<li key={product.id}>
<strong>{product.name}</strong> - {product.formattedPrice}
</li>
))}
</ul>
);
}
export default ProductList;
ãã®äŸã§ã¯ãååãªã¹ããååŸããåååã®äŸ¡æ ŒãformatCurrency颿°ã䜿çšããŠãã©ãŒãããããŸããçã®è£œåããŒã¿ãšãã©ãŒãããããã補åããŒã¿ã®äž¡æ¹ããã£ãã·ã¥ããããã«useCacheã䜿çšããåé·ãªAPIåŒã³åºããšäŸ¡æ Œãã©ãŒããããé²ããŸãã
ãã£ãã·ã¥ç¡å¹åæŠç¥
experimental_useCacheã«ã¯ãçµã¿èŸŒã¿ã®ãã£ãã·ã¥ç¡å¹åã¡ã«ããºã ã¯ãããŸããããããã£ãŠãåºã«ãªãããŒã¿ã倿Žããããšãã«ãã£ãã·ã¥ãæŽæ°ãããããã«ãç¬èªã®æŠç¥ãå®è£
ããå¿
èŠããããŸãã以äžã«ããã€ãã®äžè¬çãªã¢ãããŒãã瀺ããŸãã
- æåã§ã®ãã£ãã·ã¥ç¡å¹åïŒ state倿°ãã³ã³ããã¹ãã䜿çšããŠåºã«ãªãããŒã¿ã®å€æŽã远跡ããããšã§ãæåã§ãã£ãã·ã¥ãç¡å¹åã§ããŸããããŒã¿ã倿Žããããšãã«state倿°ãã³ã³ããã¹ããæŽæ°ãããšãåã¬ã³ããªã³ã°ãããªã¬ãŒããã
useCacheãããŒã¿ãåååŸããŸãã - æéããŒã¹ã®æå¹æéïŒ ãã£ãã·ã¥ãããããŒã¿ãšäžç·ã«ã¿ã€ã ã¹ã¿ã³ããä¿åããããšã§ãæéããŒã¹ã®æå¹æéæŠç¥ãå®è£ ã§ããŸãããã£ãã·ã¥ã«ã¢ã¯ã»ã¹ãããšãã«ãã¿ã€ã ã¹ã¿ã³ããç¹å®ã®ãããå€ãããå€ããã©ããã確èªã§ããŸããå€ãå Žåã¯ããã£ãã·ã¥ãç¡å¹åããŠããŒã¿ãåååŸã§ããŸãã
- ã€ãã³ãããŒã¹ã®ç¡å¹åïŒ ã¢ããªã±ãŒã·ã§ã³ãpub/subã·ã¹ãã ãåæ§ã®ã¡ã«ããºã ã䜿çšããŠããå Žåãé¢é£ããã€ãã³ããçºè¡ããããšãã«ãã£ãã·ã¥ãç¡å¹åã§ããŸããäŸãã°ããŠãŒã¶ãŒããããã£ãŒã«æ å ±ãæŽæ°ããå ŽåããŠãŒã¶ãŒãããã£ãŒã«ãã£ãã·ã¥ãç¡å¹åããã€ãã³ããçºè¡ã§ããŸãã
ãšã©ãŒãã³ããªã³ã°
ããŒã¿ååŸã«experimental_useCacheã䜿çšããå Žåãæœåšçãªãšã©ãŒãé©åã«åŠçããããšãäžå¯æ¬ ã§ããtry...catchãããã¯ã䜿çšããŠãããŒã¿ååŸäžã«çºçãããšã©ãŒããã£ãããããŠãŒã¶ãŒã«é©åãªãšã©ãŒã¡ãã»ãŒãžã衚瀺ã§ããŸãã`fetchUserData`ãåæ§ã®é¢æ°ãtry/catchã§ã©ããããããšãæ€èšããŠãã ããã
React Server Components (RSC) ãšã®çµ±å
experimental_useCacheã¯ãReact Server Components (RSC)å
ã§äœ¿çšãããšç䟡ãçºæ®ããŸããRSCã¯ãµãŒããŒäžã§å®è¡ããããããã¯ã©ã€ã¢ã³ãã«éä¿¡ããåã«ããŒã¿ãååŸããŠã³ã³ããŒãã³ããã¬ã³ããªã³ã°ã§ããŸããRSCã§experimental_useCacheã䜿çšãããšããµãŒããŒäžã®ããŒã¿ååŸæäœã®çµæããã£ãã·ã¥ã§ããã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ã倧å¹
ã«åäžãããããšãã§ããŸããçµæã¯ã¯ã©ã€ã¢ã³ãã«ã¹ããªãŒãã³ã°ã§ããŸãã
以äžã¯ãRSCã§experimental_useCacheã䜿çšããäŸã§ãã
// app/components/ServerComponent.tsx (ããã¯RSCã§ã)
import { experimental_useCache as useCache } from 'react';
import { cookies } from 'next/headers'
async function getSessionData() {
// ããŒã¿ããŒã¹ãå€éšãµãŒãã¹ããã»ãã·ã§ã³ãèªã¿åãã®ãã·ãã¥ã¬ãŒã
const cookieStore = cookies()
const token = cookieStore.get('sessionToken')
await new Promise((resolve) => setTimeout(resolve, 100));
return { user: 'authenticatedUser', token: token?.value };
}
export default async function ServerComponent() {
const session = await useCache(getSessionData);
return (
<div>
<h2>ãµãŒããŒã³ã³ããŒãã³ã</h2>
<p>ãŠãŒã¶ãŒ: {session?.user}</p>
<p>ã»ãã·ã§ã³ããŒã¯ã³: {session?.token}</p>
</div>
);
}
ãã®äŸã§ã¯ãgetSessionData颿°ããµãŒããŒã³ã³ããŒãã³ãå
ã§åŒã³åºããããã®çµæãuseCacheã䜿çšããŠãã£ãã·ã¥ãããŸããåŸç¶ã®ãªã¯ãšã¹ãã§ã¯ãã£ãã·ã¥ãããã»ãã·ã§ã³ããŒã¿ã掻çšããããµãŒããŒã®è² è·ã軜æžãããŸããã³ã³ããŒãã³ãèªäœã®`async`ããŒã¯ãŒãã«æ³šæããŠãã ããã
ããã©ãŒãã³ã¹ã«é¢ããèæ ®äºé ãšãã¬ãŒããªã
experimental_useCacheã¯å€§ããªããã©ãŒãã³ã¹äžã®å©ç¹ãæäŸããŸãããæœåšçãªãã¬ãŒããªãã«æ³šæããããšãéèŠã§ãã
- ãã£ãã·ã¥ãµã€ãºïŒ ãã£ãã·ã¥ã®ãµã€ãºã¯æéãšãšãã«å¢å ããããªãã®éã®ã¡ã¢ãªãæ¶è²»ããå¯èœæ§ããããŸãããã£ãã·ã¥ãµã€ãºãç£èŠããé »ç¹ã«äœ¿çšãããªãããŒã¿ãåé€ããæŠç¥ãå®è£ ããããšãéèŠã§ãã
- ãã£ãã·ã¥ç¡å¹åã®ãªãŒããŒãããïŒ ãã£ãã·ã¥ç¡å¹åæŠç¥ãå®è£ ãããšãã¢ããªã±ãŒã·ã§ã³ãè€éã«ãªãå¯èœæ§ããããŸããæ£ç¢ºæ§ãšããã©ãŒãã³ã¹ã®ãã©ã³ã¹ããšãæŠç¥ãéžæããããšãéèŠã§ãã
- å€ãããŒã¿ïŒ ãã£ãã·ã¥ãé©åã«ç¡å¹åãããªãå Žåãå€ãããŒã¿ãæäŸããã誀ã£ãçµæãäºæããªãåäœã«ã€ãªããå¯èœæ§ããããŸãã
experimental_useCacheã䜿çšããããã®ãã¹ããã©ã¯ãã£ã¹
experimental_useCacheã®å©ç¹ãæå€§åããæœåšçãªæ¬ ç¹ãæå°éã«æããããã«ã以äžã®ãã¹ããã©ã¯ãã£ã¹ã«åŸã£ãŠãã ããã
- é«ã³ã¹ããªæäœããã£ãã·ã¥ããïŒ èšç®ã³ã¹ããé«ãããŸãã¯ãããã¯ãŒã¯ãªã¯ãšã¹ãã䌎ãæäœã®ã¿ããã£ãã·ã¥ããŠãã ãããåçŽãªèšç®ãããŒã¿å€æããã£ãã·ã¥ããŠãã倧ããªå©ç¹ã¯åŸãããªãã§ãããã
- é©åãªãã£ãã·ã¥ããŒãéžæããïŒ ãã£ãã·ã¥ããã颿°ã®å ¥åãæ£ç¢ºã«åæ ãããã£ãã·ã¥ããŒã䜿çšããŠãã ãããå¯å€ãªããžã§ã¯ããè€éãªããŒã¿æ§é ããã£ãã·ã¥ããŒãšããŠäœ¿çšããã®ã¯é¿ããŠãã ããã
- ãã£ãã·ã¥ç¡å¹åæŠç¥ãå®è£ ããïŒ ã¢ããªã±ãŒã·ã§ã³ã®èŠä»¶ã«é©ãããã£ãã·ã¥ç¡å¹åæŠç¥ãéžæããŠãã ãããæåã§ã®ç¡å¹åãæéããŒã¹ã®æå¹æéããŸãã¯ã€ãã³ãããŒã¹ã®ç¡å¹åã®äœ¿çšãæ€èšããŠãã ããã
- ãã£ãã·ã¥ããã©ãŒãã³ã¹ãç£èŠããïŒ ãã£ãã·ã¥ãµã€ãºããããçãç¡å¹åã®é »åºŠãç£èŠããŠãæœåšçãªããã©ãŒãã³ã¹ã®ããã«ããã¯ãç¹å®ããŠãã ããã
- ã°ããŒãã«ãªç¶æ 管çãœãªã¥ãŒã·ã§ã³ãæ€èšããïŒ è€éãªãã£ãã·ã¥ã·ããªãªã§ã¯ãTanStack Query (React Query)ãSWRããŸãã¯æ°žç¶åç¶æ ãæã€Zustandãªã©ã®ã©ã€ãã©ãªã®äœ¿çšãæ€èšããŠãã ããããããã®ã©ã€ãã©ãªã¯ãå ç¢ãªãã£ãã·ã¥ã¡ã«ããºã ãç¡å¹åæŠç¥ãããã³ãµãŒããŒç¶æ åææ©èœãæäŸããŸãã
experimental_useCacheã®ä»£æ¿ææ®µ
experimental_useCacheã¯ã¯ã©ã€ã¢ã³ããµã€ããã£ãã·ã¥ãå®è£
ãã䟿å©ãªæ¹æ³ãæäŸããŸãããããããã«é·æãšçæãããä»ã®ããã€ãã®ãªãã·ã§ã³ãå©çšå¯èœã§ãã
- ã¡ã¢åæè¡ (
useMemo,useCallback): ãããã®ããã¯ã¯ãé«ã³ã¹ããªèšç®ã颿°åŒã³åºãã®çµæãã¡ã¢åããããã«äœ¿çšã§ããŸãããã ããèªåçãªãã£ãã·ã¥ç¡å¹åãæ°žç¶æ§ã¯æäŸããŸããã - ãµãŒãããŒãã£ã®ãã£ãã·ã¥ã©ã€ãã©ãªïŒ TanStack Query (React Query) ã SWRã®ãããªã©ã€ãã©ãªã¯ãèªåãã£ãã·ã¥ç¡å¹åãããã¯ã°ã©ãŠã³ãã§ã®ããŒã¿ååŸããµãŒããŒç¶æ åæãªã©ãããå æ¬çãªãã£ãã·ã¥ãœãªã¥ãŒã·ã§ã³ãæäŸããŸãã
- ãã©ãŠã¶ã¹ãã¬ãŒãž (LocalStorage, SessionStorage): ãããã®APIã¯ãããŒã¿ããã©ãŠã¶ã«çŽæ¥ä¿åããããã«äœ¿çšã§ããŸãããã ããè€éãªããŒã¿æ§é ã®ãã£ãã·ã¥ããã£ãã·ã¥ç¡å¹åã®ç®¡çã«ã¯èšèšãããŠããŸããã
- IndexedDB: ãã倧éã®æ§é åããŒã¿ãä¿åã§ãããããå ç¢ãªã¯ã©ã€ã¢ã³ããµã€ãããŒã¿ããŒã¹ã§ãããªãã©ã€ã³æ©èœãè€éãªãã£ãã·ã¥ã·ããªãªã«é©ããŠããŸãã
experimental_useCacheã®å®éã®äœ¿çšäŸ
experimental_useCacheã广çã«äœ¿çšã§ããå®éã®ã·ããªãªãããã€ãèŠãŠã¿ãŸãããã
- Eã³ããŒã¹ã¢ããªã±ãŒã·ã§ã³ïŒ åå詳现ãã«ããŽãªãªã¹ããæ€çŽ¢çµæããã£ãã·ã¥ããŠãããŒãžã®èªã¿èŸŒã¿æéãæ¹åãããµãŒããŒã®è² è·ã軜æžããŸãã
- ãœãŒã·ã£ã«ã¡ãã£ã¢ãã©ãããã©ãŒã ïŒ ãŠãŒã¶ãŒãããã£ãŒã«ããã¥ãŒã¹ãã£ãŒããã³ã¡ã³ãã¹ã¬ããããã£ãã·ã¥ããŠããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããAPIåŒã³åºãã®æ°ãæžãããŸãã
- ã³ã³ãã³ã管çã·ã¹ãã (CMS): èšäºãããã°æçš¿ãç»åãªã©ãé »ç¹ã«ã¢ã¯ã»ã¹ãããã³ã³ãã³ãããã£ãã·ã¥ããŠããŠã§ããµã€ãã®ããã©ãŒãã³ã¹ãåäžãããŸãã
- ããŒã¿å¯èŠåããã·ã¥ããŒãïŒ è€éãªããŒã¿éèšãèšç®ã®çµæããã£ãã·ã¥ããŠãããã·ã¥ããŒãã®å¿çæ§ãåäžãããŸãã
äŸïŒãŠãŒã¶ãŒèšå®ã®ãã£ãã·ã¥
ãŠãŒã¶ãŒãããŒããèšèªãéç¥èšå®ãªã©ã®å¥œã¿ãã«ã¹ã¿ãã€ãºã§ããWebã¢ããªã±ãŒã·ã§ã³ãèããŠã¿ãŸãããããããã®èšå®ã¯ãµãŒããŒããååŸããexperimental_useCacheã䜿çšããŠãã£ãã·ã¥ã§ããŸãã
import { experimental_useCache as useCache } from 'react';
async function fetchUserPreferences(userId: string): Promise<{
theme: string;
language: string;
notificationsEnabled: boolean;
}> {
// APIãããŠãŒã¶ãŒèšå®ãååŸããã®ãã·ãã¥ã¬ãŒã
await new Promise(resolve => setTimeout(resolve, 200));
return {
theme: 'light',
language: 'en',
notificationsEnabled: true,
};
}
function UserPreferences({ userId }: { userId: string }) {
const preferences = useCache(fetchUserPreferences, userId);
if (!preferences) {
return <p>èšå®ãèªã¿èŸŒã¿äž...</p>;
}
return (
<div>
<h2>ãŠãŒã¶ãŒèšå®</h2>
<p><strong>ããŒã:</strong> {preferences.theme}</p>
<p><strong>èšèª:</strong> {preferences.language}</p>
<p><strong>éç¥æå¹:</strong> {preferences.notificationsEnabled ? 'ã¯ã' : 'ããã'}</p>
</div>
);
}
export default UserPreferences;
ããã«ããããŠãŒã¶ãŒã®èšå®ã¯äžåºŠã ãååŸããããã®åŸã®ã¢ã¯ã»ã¹ã®ããã«ãã£ãã·ã¥ããããããã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãšå¿çæ§ãåäžããŸãããŠãŒã¶ãŒãèšå®ãæŽæ°ããå Žåã¯ã倿Žãåæ ãããããã«ãã£ãã·ã¥ãç¡å¹åããå¿ èŠããããŸãã
çµè«
experimental_useCacheã¯ãç¹ã«React Server Componentsãæ±ãéã«ãReactã¢ããªã±ãŒã·ã§ã³ã§ã¯ã©ã€ã¢ã³ããµã€ããã£ãã·ã¥ãå®è£
ããããã®åŒ·åã§äŸ¿å©ãªæ¹æ³ãæäŸããŸããããŒã¿ååŸãªã©ã®é«ã³ã¹ããªæäœã®çµæããã£ãã·ã¥ããããšã§ãããã©ãŒãã³ã¹ã倧å¹
ã«åäžããããµãŒããŒã®è² è·ã軜æžãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããããšãã§ããŸãããã ããæœåšçãªãã¬ãŒããªããæ
éã«æ€èšããããŒã¿ã®äžè²«æ§ã確ä¿ããããã«é©åãªãã£ãã·ã¥ç¡å¹åæŠç¥ãå®è£
ããããšãéèŠã§ããexperimental_useCacheãæçããReactãšã³ã·ã¹ãã ã®å®å®ããäžéšã«ãªãã«ã€ããŠãçŸä»£ã®Webã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹æé©åã«ãããŠãŸããŸãéèŠãªåœ¹å²ãæããããšã¯ééããããŸããããã®ãšããµã€ãã£ã³ã°ãªæ°æ©èœã®å¯èœæ§ãæå€§éã«æŽ»çšããããã«ãææ°ã®Reactããã¥ã¡ã³ããšã³ãã¥ããã£ã®ãã¹ããã©ã¯ãã£ã¹ãåžžã«ç¢ºèªããããšãå¿ããªãã§ãã ããã
ãã®ããã¯ã¯ãŸã å®éšçãªãã®ã§ããææ°ã®æ å ±ãšAPIã®è©³çްã«ã€ããŠã¯ãåžžã«å ¬åŒã®Reactããã¥ã¡ã³ããåç §ããŠãã ããããŸããAPIã¯å®å®çã«ãªãåã«å€æŽãããå¯èœæ§ãããããšã«æ³šæããŠãã ããã