๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ - React Router v7 - prefetch
ยท
๐Ÿ“‚ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
โœ… prefetch์‚ฌ์šฉ์ž๊ฐ€ ํด๋ฆญํ•˜๊ธฐ ์ „์— ๋‹ค์Œ ํŽ˜์ด์ง€์— ํ•„์š”ํ•œ ๊ฒƒ๋“ค์„ ๋ฏธ๋ฆฌ ๋ฐ›์•„์˜ค๋Š” ๊ธฐ๋Šฅ ์ด๊ฑด “๋ฏธ๋ฆฌ ๋ฐ›์•„๋ณด๋ ค๋Š” ํžŒํŠธ”์— ๊ฐ€๊น๊ณ , ํด๋ฆญ ์‹œ ๋ฌด์กฐ๊ฑด ์ฆ‰์‹œ ๋ Œ๋”๋ง ๋ณด์žฅ์€ ์•„๋‹ˆ๋‹ค. ์ง„์งœ๋กœ ์ฆ‰์‹œ ๋ณด์—ฌ์ฃผ๊ณ  ์‹ถ์œผ๋ฉด loader ์ชฝ์—์„œ ์บ์‹ฑ ์ „๋žต์„ ๋”ฐ๋กœ ๊ฐ€์ ธ๊ฐ€์•ผ ํ•จ. ์˜ˆ๋ฅผ ๋“ค๋ฉด React Query์˜ ensureQueryData() ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ loader๊ฐ€ ๋จผ์ € ์บ์‹œ๋ฅผ ํ™•์ธํ•˜๊ฒŒ ๋งŒ๋“ค๊ฑฐ๋‚˜, ์„œ๋ฒ„ ์‘๋‹ต์— ์ ์ ˆํ•œ Cache-Control์„ ๋ถ™์ด๋Š” ๋ฐฉ์‹์ด ํ•„์š” none๊ธฐ๋ณธ๊ฐ’. ์•„๋ฌด๊ฒƒ๋„ ๋ฏธ๋ฆฌ ๋ฐ›์•„์˜ค์ง€ ์•Š๋Š”๋‹ค.intent์‚ฌ์šฉ์ž๊ฐ€ ๋งํฌ์— hoverํ•˜๊ฑฐ๋‚˜ focusํ–ˆ์„ ๋•Œ ๋ฏธ๋ฆฌ ๋ฐ›์•„์˜ด(๋งˆ์šฐ์Šค๊ฐ€ ๋งํฌ๋ฅผ ๋ฒ—์–ด๋‚˜๋ฉด ์ทจ์†Œ๋จ)render๋งํฌ๊ฐ€ ํ™”๋ฉด์— ๋ Œ๋”๋ง๋˜์ž๋งˆ์ž ๋ฏธ๋ฆฌ ๋ฐ›์•„์˜ด. ๋น ๋ฅด์ง€๋งŒ ๋งํฌ๊ฐ€ ๋งŽ์œผ๋ฉด ๋„คํŠธ์›Œํฌ ๋‚ญ๋น„ ๊ฐ€๋Šฅviewport๋ง..