SSG (Static Site Generation)
๋ช ์ฌ ยท ์น ์ํคํ ์ฒ
๋น๋ ์ ๋ชจ๋ HTML ํ์ด์ง๋ฅผ ์ฌ์ ์ ๊ตฌ์ถํ ํ CDN์์ ์ง์ ์ ๊ณตํ๋ ์ ์ ์์ฑ ๋ฐฉ๋ฒ โ ๊ฑฐ์ ์ฆ๊ฐ์ ์ธ ๋ก๋ฉ ์๊ฐ๊ณผ ๋์ ์๋ฒ ์์ด๋ ๊ฐํ๋ ๋ณด์์ ์ ๊ณตํฉ๋๋ค.
๋์ ๋ฐ์ดํฐ(API, CMS, ๋ฐ์ดํฐ๋ฒ ์ด์ค)๋ฅผ ์ปดํ์ผ ์ ์ ์ HTML ํ์ผ๋ก ๋ณํํ ์ ์๊ฒ ํ๋ Next.js๊ฐ ์ฑํํ ์น ์ํคํ ์ฒ โ ๋์ ์ฌ์ดํธ์ ์ ์ฐ์ฑ๊ณผ ์ ์ ์ฌ์ดํธ์ ์๋๋ฅผ ๊ฒฐํฉํฉ๋๋ค.
๊ฐ ํ์ด์ง๊ฐ ๋ ๋ฆฝ๋ HTML ํ์ผ๋ก, CDN(์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ)์ ํตํด ์ ์ธ๊ณ์ ์ผ๋ก ๋ฐฐํฌ ๊ฐ๋ฅํ ๋ฐฐํฌ ์ ๋ต์ผ๋ก, ์ ํ๋ฆฌ์ผ์ด์ ์๋ฒ์ ๋ํ ์์กด์ฑ์ ์ ๊ฑฐํ๊ณ ํธ์คํ ๋น์ฉ์ ํ๊ธฐ์ ์ผ๋ก ์ ๊ฐํฉ๋๋ค.
SSG(Static Site Generation)๋ ์ฌ์ฉ์๊ฐ ์ฌ์ดํธ๋ฅผ ๋ฐฉ๋ฌธํ๊ธฐ๋ ์ ์ ๋น๋ ๋จ๊ณ์์ ๋ชจ๋ HTML ํ์ด์ง๋ฅผ ์ฌ์ ์์ฑํ๋ ์น ์ํคํ ์ฒ ๊ธฐ์ ์ ๋๋ค. ์ด๋ฌํ ์ ์ HTML ํ์ผ์ ๊ฐ ์์ฒญ๋ง๋ค ์๋ฒ ์ธก ๊ณ์ฐ ์์ด CDN์์ ์ง์ ์ ๊ณต๋ฉ๋๋ค. Next.js๋ ์ด ์ ๊ทผ ๋ฐฉ์์ ๋ฐ์ด๋๋ฉฐ, ์ ํฌ ์์ด์ ์๋ ์ฝํ ์ธ ๊ฐ ์ฆ์ ์ฌ์ฉ ๊ฐ๋ฅํ๊ณ ๊ฒ์ ์์ง์์ ์๋ฒฝํ๊ฒ ์ธ๋ฑ์ฑ๋๋ ์ด๊ณ ์ ์ฌ์ดํธ๋ฅผ ์ ๊ณตํ๊ธฐ ์ํด ํ์ฉํฉ๋๋ค.
SSG๋ ๊ฐ ํ์ด์ง๊ฐ ์์ ํ HTML ํ์ผ๋ก JavaScript ์คํ ์์ด Google ๋ก๋ด์ ์ฒซ ํฌ๋กค๋ง๋ถํฐ ์๋ฒฝํ๊ฒ ์ฝ์ ์ ์์ผ๋ฏ๋ก ์๋นํ SEO ์ด์ ์ ์ ๊ณตํฉ๋๋ค. ๊ฑฐ์ ์ฆ๊ฐ์ ์ธ ๋ก๋ฉ ์๊ฐ์ Google์ ๊ณต์ ์์ ์์์ธ Core Web Vitals ์ ์๋ฅผ ์ง์ ํฅ์์ํต๋๋ค. ์ ํฌ ์์ด์ ์๋ Next.js๋ฅผ ํตํด SSG๋ฅผ ํ์ฉํ์ฌ ์ฝํ ์ธ ํ์ด์ง๋ฅผ ๊ฒ์ ๊ฒฐ๊ณผ ์์์ ์์น์ํค๋ฉฐ, ๊ทํ์ ์ฌ์ดํธ๋ฅผ ์์ง์ ์ ๊ธฐ์ ํธ๋ํฝ์ ์ํ ์์์ผ๋ก ๋ณํํฉ๋๋ค.
SSG๋ ๋น๋ ์ HTML ํ์ด์ง๋ฅผ ํ ๋ฒ๋ง ์์ฑํ๋ ๋ฐ๋ฉด, SSR์ ๊ฐ ์ฌ์ฉ์ ์์ฒญ๋ง๋ค ์๋ฒ์์ ๋์ ์ผ๋ก ์์ฑํฉ๋๋ค. SSG๋ ํ์ด์ง๊ฐ ์ฌ์ ๊ตฌ์ถ๋์ด CDN์์ ์ ๊ณต๋๋ฏ๋ก ๋ ๋น ๋ฅด์ง๋ง, ์์ฃผ ๋ณ๊ฒฝ๋๋ ์ฝํ ์ธ ์๋ ๋ ์ ํฉํฉ๋๋ค. SSR์ ๊ฐ์ธํ๋ ํ์ด์ง๋ ์ค์๊ฐ ๋ฐ์ดํฐ์ ์ด์์ ์ ๋๋ค. ์ ํฌ ์์ด์ ์๋ ๊ฐ ํ์ด์ง์ ํ์์ ๋ฐ๋ผ ๋ ์ ๊ทผ ๋ฐฉ์์ ์ฅ์ ์ ์ทจํ๊ธฐ ์ํด ๋์ผํ Next.js ํ๋ก์ ํธ์์ ๋ ์ ๋ต์ ์์ฃผ ๊ฒฐํฉํฉ๋๋ค.
SSG๋ ๋์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ํ์ ์ธ ๊ณต๊ฒฉ ํ๋ฉด์ ์ ๊ฑฐํ์ฌ ์ฌ์ดํธ์ ๋ณด์์ ๊ฐํํฉ๋๋ค: ๋ ธ์ถ๋ ์ ํ๋ฆฌ์ผ์ด์ ์๋ฒ ์์, ์ค์๊ฐ์ผ๋ก ์ ๊ทผ ๊ฐ๋ฅํ ๋ฐ์ดํฐ๋ฒ ์ด์ค ์์, ์ฃผ์ ๊ฐ๋ฅํ SQL ์ฟผ๋ฆฌ ์์. CDN์์ ์ ๊ณต๋๋ ์ ์ HTML ํ์ผ์ ์ผ๋ฐ์ ์ธ ์ทจ์ฝ์ (SQL ์ธ์ ์ , ์๋ฒ ์ธก XSS, ๋ฌด์ฐจ๋ณ ๋์ ๊ณต๊ฒฉ)์ ์ํด ์์๋ ์ ์์ต๋๋ค. ์ ํฌ ์์ด์ ์๋ ๋ณด์๊ณผ ์ ๋ขฐ์ฑ์ด ์ต์ฐ์ ์ธ ๊ธฐ์ ์ฌ์ดํธ์ ์๊ฐ ํ์ด์ง์ ์ด ์ํคํ ์ฒ๋ฅผ ๊ถ์ฅํฉ๋๋ค.
SSG๋ ์ด์ปค๋จธ์ค ์ฌ์ดํธ์ ์ ํ ์นดํ๋ก๊ทธ์ ์๋ฒฝํ๊ฒ ์ ํฉํฉ๋๋ค. ์ ํ ์์ธ ํ์ด์ง๋ฅผ ์ฌ์ ์์ฑํ์ฌ ์ฆ๊ฐ์ ์ธ ๋ก๋ฉ๊ณผ ์ต์ ์ SEO๋ฅผ ์ ๊ณตํ ์ ์๊ธฐ ๋๋ฌธ์ ๋๋ค. ๊ทธ๋ฌ๋ ์ฅ๋ฐ๊ตฌ๋, ์ฌ์ฉ์ ๊ณ์ ๋๋ ๊ฒฐ์ ์ ๊ฐ์ ๋์ ํ์ด์ง๋ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ๋ ๋๋ง(CSR)์ด ํ์ํฉ๋๋ค. ์ ํฌ ์์ด์ ์๋ ์นดํ๋ก๊ทธ ํ์ด์ง์๋ SSG๋ฅผ, ์ธํฐ๋ํฐ๋ธ ๊ธฐ๋ฅ์๋ CSR์ ๊ฒฐํฉํ Next.js ํ์ด๋ธ๋ฆฌ๋ ์ํคํ ์ฒ๋ฅผ ์ค๊ณํ์ฌ SEO ์ฑ๋ฅ๊ณผ ์ ์ฐํ ์ผํ ๊ฒฝํ์ ๋ชจ๋ ๋ณด์ฅํฉ๋๋ค.
ISR(Incremental Static Regeneration)์ Next.js๊ฐ ์ ์ํ๋ SSG์ ์งํ๋ก, ์ด๊ธฐ ๋น๋ ํ ์ ์ฒด ์ฌ์ดํธ๋ฅผ ์ฌ๊ตฌ์ถํ์ง ์๊ณ ๊ฐ๋ณ ์ ์ ํ์ด์ง๋ฅผ ์ฌ์์ฑํ ์ ์์ต๋๋ค. ๊ธฐ์กด SSG๊ฐ ์ฝํ ์ธ ์ ๋ฐ์ดํธ๋ฅผ ์ํด ์์ ํ ์ ๋น๋๊ฐ ํ์ํ ๋ฐ๋ฉด, ISR์ ๊ตฌ์ฑ ๊ฐ๋ฅํ ๊ฐ๊ฒฉ์ ๋ฐ๋ผ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ํ์ด์ง๋ฅผ ์ฌ๊ฒ์ฆํฉ๋๋ค. ์ ํฌ ์์ด์ ์๋ ์์ฃผ ์ ๋ฐ์ดํธ๋๋ ์ฝํ ์ธ ๊ฐ ํ์ํ๋ฉด์๋ ์ ์ ๋ ๋๋ง์ ๋ฐ์ด๋ ์ฑ๋ฅ์ ์ ์งํด์ผ ํ๋ ํ๋ก์ ํธ์ ISR์ ์ฌ์ฉํฉ๋๋ค.