Next.js 12 - Script Component & strategy & onLoad
ยท
♠๏ธ Next.js 12
โ
Script Component๋?๋ณดํต ํ๋ก์ ํธ๋ฅผ ๋๋ด๊ณ ๋๋ฉด ๋ค๋ฅธ ์น ์ฌ์ดํธํ๊ณ ์ํธ์์ฉ์ ํด์ผ ํ๋ค.(๊ตฌ๊ธ ์ ๋๋ฆฌํฑ์ค๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ ํ์ด์ค๋ถ SDK๋ฅผ ์ค์นํ๊ฑฐ๋ ํ์ด์ค๋ถ ๋ก๊ทธ์ธ์ด๋ ํ์ด์ค๋ถ ๊ด๊ณ ๋ฅผ ์ถ๊ฐํ ์๋ ์๊ณ ์นด์นด์ค JS SDK๋ฅผ ์ถ๊ฐํ ์๋ ์๋ค.) ์ถ๊ฐํ๋ ๊ฐ์ฅ ์ฌ์ด ๋ฐฉ๋ฒ์ SDK script๋ฅผ ๋ณต์ฌํ ๋ค์์ _app.tsx์ ๋ถ์ฌ๋ฃ๊ธฐ ํ๋ ๊ฒ์ด๋ค.ํ์ง๋ง ์คํฌ๋ฆฝํธ๋ฅผ ์ธ์ ์ด๋ป๊ฒ ๋ถ๋ฌ์ฌ์ง ์ ํ ์๊ฐ ์๋ค. ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด Script Component๋ฅผ ์ฌ์ฉํ๋ค. โ
strategy prop์ 3๊ฐ์ง ์ข
๋ฅ1. beforeInteractive -> ํ์ด์ง๋ฅผ ๋ชจ๋ ๋ถ๋ฌ์ ์ํธ์์ฉ์ ํ๊ธฐ ์ ์ ๋ก๋ฉ2. afterInteractive -> ํ์ด์ง๋ฅผ ๋จผ์ ๋ค ๋ถ๋ฌ์จ ๋ค์์ ๋ก๋ฉ3. lazy..