[NextJS] Image๋ฅผ ๊ด๋ฆฌํ๋ ๋ฐฉ์ - ์ฒ์๋ถํฐ ์บ์ฑํ๋ฉด ๋์์์ฌ..? ๐
NextJS ๊ฐ์๋ฅผ ๋ฃ๋ ์ค ์ด๋ฏธ์ง ์ต์ ํ์ ๋ํ ๋ด์ฉ์ด ๋์๋ค.
์ ์ผ ์ฒ์ ์ด๋ฏธ์ง๋ฅผ ๋ถ๋ฌ์ฌ ๋ ๋๋ฆฌ์ง๋ง ๊ทธ ์ดํ์ ์๋ก๊ณ ์นจ์ ๋ฐ๋ณตํด๋ ์ด๋ฏธ์ง๊ฐ ๋น ๋ฅด๊ฒ ๋ถ๋ฌ์์ง๋ค.
์คํธ ๊ทธ๋ ๊ตฐ ์บ์ฑ๋ ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํด์ ๊ทธ๋ฐ๊ฐ ๋ณด๋ค~ ๐
์๋ ์ ๊น๋ง,
๊ทธ๋ผ ์ฒ์๋ถํฐ ์บ์ฑ๋ ์ด๋ฏธ์ง๋ฅผ ๋ถ๋ฌ์์ ์ฐ๋ฉด ๋๋ ๊ฑฐ ์๋๊ฐ?
NextJS๋ ๊ธฐ๋ณธ์ ์ผ๋ก SSG๋ฅผ ์ง์ํ๊ณ CDN์ ์บ์ฑ๋ HTML์ ๋ฐ์๋ค๊ฐ ๋ธ๋ผ์ฐ์ ๋ ๋ณด์ฌ์ฃผ๊ธฐ๋ง ํ๋๋ฐ
์ด๋ฏธ์ง๋ ์ฒ์์ ๊ฑฐ๊ธฐ ์บ์ฑ๋์ด ์๋ ๊ฑฐ ์๋?
์๋ ๋ ๋ฒ์งธ๋ถํฐ๋ ์บ์ฑ๋ ๊ฑธ ๊ฐ์ ธ๋ค ์ด๋ค๋ฉฐ? ๊ทธ๋ผ ์ฒซ ๋ฒ์งธ๋ ์ ์บ์ฑ๋ ๊ฑธ ์ ์จ??
CDN์ ์บ์ฑ์ด ๋๋ ๊ฒ ์๋๊ฐ? ๋ธ๋ผ์ฐ์ ์ ์บ์ฑ์ด ๋๋?
๊ทธ๋ฐ๋ฐ ๋ธ๋ผ์ฐ์ ์บ์ ๋น์ฐ๊ธฐ ๋ฐ ๊ฐ๋ ฅ ์๋ก๊ณ ์นจ์ ํด๋ ์ฌ์ ํ ๋น ๋ฅด๊ฒ ์ด๋ฏธ์ง๋ฅผ ๋ฐ์์ค๊ณ ์๋ค.
์ค์.. ??? ๐ณ
๊ฐ์๋ฅผ ๋ค์ ๋๋ ค๋ณด๋๊น NextJS๋ ์ ์ ์ ๋ทฐํฌ์ธํธ์ ์ด๋ฏธ์ง๊ฐ ๋ณด์ผ ๋ ์ด๋ฏธ์ง๋ฅผ ๋ฐ์์จ๋ค๊ณ ํ๋ค.
์ฌ์ฉ์๊ฐ ํด๋น ์ด๋ฏธ์ง์ ์ ๊ทผํ์ง ์์ผ๋ฉด NextJS๋ ๊ตณ์ด ์ด๋ฏธ์ง๋ฅผ ์ต์ ํํ์ง ์๋๋ค.
๊ทธ๋ฌ๋๊น ๋น๋ ์์ ์๋ ์ฌ์ฉ์๊ฐ ์ด๋ค ์ด๋ฏธ์ง์ ์ ๊ทผ์ ํ ์ง ์ ์ ์๊ธฐ ๋๋ฌธ์ ์ ์ด์ ๋น๋ ์์ ์๋ ์ด๋ฏธ์ง๊ฐ ์ต์ ํ๋์ง ์๋๋ค.
์ค์ผ์ด ์ฌ๊ธฐ๊น์ง ๋๋ฆ ํฉ๋ฆฌ์ ์ธ ์ถ๋ก ์ ํ๊ณ
์ด์ ๋ถํฐ ์์นญ์ ๋ฐํ์ผ๋ก ๊ณต๋ถํ ๋ด์ฉ..
๊ธฐ๋ณธ์ ์ผ๋ก CDN์๋ ์ ์ ์ธ ๋ฆฌ์์ค๊ฐ ์บ์ฑ๋๋ค.
์ ์ ์ ๋ทฐํฌ์ธํธ์ ์ด๋ฏธ์ง๊ฐ ๋ค์ด๊ฐ์ผ ๊ทธ๋์์ผ ์ด๋ฏธ์ง๋ฅผ ๋ฐ์์ค๊ธฐ ๋๋ฌธ์
๋งจ ์ฒ์ ์ด๋ฏธ์ง๋ฅผ ์ต์ ํํ ๋๋ ์ด๋ฏธ์ง๊ฐ ๋์ ์ผ๋ก ์ฒ๋ฆฌ๋๋ค.
์ด๋ฏธ์ง๊ฐ ์บ์ฑ๋๋ ๊ณผ์ ์ ์ดํด๋ณด๋ฉด,
- ์ ์ ๊ฐ ์ด๋ค ์ด๋ฏธ์ง์ ์ ๊ทผํ ๋ ๋ธ๋ผ์ฐ์ ๋ ์ด๋ฏธ์ง์ ๋ํ ์ ๋ณด๋ฅผ CDN์ ์์ฒญํ๋ค.
- CDN์ ์??? ๋ ๊ทธ๋ฐ ๊ฑฐ ์๋๋ฐ?? ๐ซจ ํ๊ณ ์๋ฒ์ ์ด๋ฏธ์ง ๋ฆฌ์์ค๋ฅผ ์์ฒญํ๋ค.
- ์๋ฒ๋ ๊ทธ๋์์ผ ์ด๋ฏธ์ง๋ฅผ ์ต์ ํํด์ ๋ค์ CDN์๊ฒ ์ ๋ฌํ๋ค.
- CDN์ ์ต์ ํ๋ ์ด๋ฏธ์ง๋ฅผ ์บ์ฑํ๊ณ ๋ธ๋ผ์ฐ์ ์ ์ ๋ฌํ๋ค.
- ์ด๋ ์๋ฒ์์ ์ด๋ฏธ์ง๋ฅผ ์ต์ ํํ๋ฉด์ ์๊ฐ์ด ๊ฑธ๋ฆฌ๊ธฐ ๋๋ฌธ์ ์ ์ ์ ์ฅ์์๋ ์ด๋ฏธ์ง ๋ก๋ฉ ์๋๊ฐ ๋๋ฆฌ๋ค๊ณ ๋๊ปด์ง ์ ์๋ค.
๊ทธ๋ฆฌ๊ณ ๋ ๋ฒ์งธ ์์ฒญ๋ถํฐ๋ CDN์ ์ด๋ฏธ์ง ์ต์ ํ๋ฅผ ๋ง์น ํ์ผ์ด ์บ์ฑ๋์ด ์๊ธฐ ๋๋ฌธ์
๋ธ๋ผ์ฐ์ ๋ ๊ทธ๋ฅ ๊ทธ ํ์ผ์ ๋ฐ์๋ค ๋ณด์ฌ์ฃผ๋ฏ๋ก ์ด๋ฏธ์ง ๋ก๋ฉ ์๋๊ฐ ๋น ๋ฅธ ๊ฒ์ด๋ค!
์ฌ๊ธฐ์ ๋๋ ๋ ๋ค๋ฅธ ์๋ฌธ...
์ด์ ๋ฐฐ์ฐ๊ธฐ๋ก๋ ์ข์์์ ๊ฐ์ ๊ธฐ๋ฅ์ ์ ์ ์ ์ํธ์์ฉ์ด ํ์ํ๊ธฐ ๋๋ฌธ์ SSG๋ก๋ ์ ๋๋ค๊ณ ํ๋๋ฐ,,
ํด๋ผ์ด์ธํธ์์ ์ํ๊ด๋ฆฌ๋ฅผ ํ๋ค๋ฉด ์ข์์๋ฅผ ๋๋ฅด๊ณ ๊ทธ ์ํ๋ฅผ ์ ์ง๋ฅผ ํ ์ ์๊ฒ ์ง๋ง
์๋ก๊ณ ์นจ์ ํ๋ฉด CDN์์ ์บ์ฑ๋ ํ์ผ์ ๋ฐ์์ค๋๋ฐ
์ด ํ์ผ์ ๋น๋ ์์ ์ ๋ง๋ค์ด์ง ๊ฒ์ด๊ธฐ ๋๋ฌธ์ ์ข์์๊ฐ ์ ์ฉ๋์ด ์์ง ์์์
์ข์์ ์ํ๊ฐ ์ฌ๋ผ์ง ๊ฑฐ๋ผ๊ณ ๊ทธ๋ฌ๋๋ฐ,,๐
๊ทธ๋ฌ๋ฉด ์ข์์๋ฅผ ๋๋ฌ์ ๋ฐ๋ ์ํ๋ฅผ ์๋ฒ๊ฐ ๋ค์ CDN์ ์ ๋ฌํ๊ณ CDN์ ์๋กญ๊ฒ ์บ์ฑํ๋ฉด ๋๋ ๊ฑฐ ์๋๊ฐ?
์ข์์ ์ํ๋ ์ฌ์ฉ์์์ ์ํธ์์ฉ์ ์ํด ์ํ๊ฐ ๋ฐ๋๋ ๋์ ์ธ ๋ฆฌ์์ค์ด๊ธฐ ๋๋ฌธ์ API๋ก ์ฒ๋ฆฌ๋๋ค.
์ ์ ๊ฐ ์ข์์๋ฅผ ๋๋ฌ๋ ์๋ฒ์ ์ํ ๋ณ๊ฒฝ์ ์์ฒญํด์ผ ํ๊ณ ์ข์์๋ฅผ ํด์ ํด๋ ์๋ฒ์ ์ํ๋ณ๊ฒฝ์ ์์ฒญํด์ผ ํ๋ค.
์ฆ ์ ์ ์์ ์ํธ์์ฉ ๋๋ง๋ค ์๋ฒ ์์ฒญ -> ์บ์ฑ -> ์์ฒญ -> ์บ์ฑ์ ๋ฐ๋ณตํ๋ ๋ถํ์ํ ์์ ์ด ๋์ด๋๊ฒ ๋๋ค.
๋ฐ๋ผ์ ์ด๋ ๊ฒ ์ ์ ์์ ์ํธ์์ฉ์ ์ํฅ์ ํฌ๊ฒ ๋ฐ๋ ๊ธฐ๋ฅ๋ค์ CDN์ ์บ์ฑ์ ํด์ ์ฌ์ฉํ๊ธฐ๋ณด๋ค๋
SSR์ด๋ CSR์ ์ฌ์ฉํ๋ ๊ฒ์ด ๋ ์ข์ ๋ฐฉ๋ฒ์ด๋ค.
์ฌ๊ธฐ์ ๋ ๊ทธ๋ผ ์ธ์ SSR์ ํ๊ณ ์ธ์ CSR์ ํ ๊น? ํ๋ ์๊ฐ์ด ๊ผฌ๋ฆฌ๋ฅผ ๋ฌด๋๋ฐ,
CSR์ SEO์ ์ทจ์ฝํ๊ธฐ ๊ฒ์ ์์ง ์ต์ ํ๊ฐ ํ์ ์๋ ๋ง์ดํ์ด์ง๋ ๊ด๋ฆฌ์ ํ์ด์ง์ ์ ํฉํ๋ค!