์ ์ ์์ฑ(SSG)๊ณผ ์๋ฒ ์ธก ๋ ๋๋ง(SSR)์ ์ฐจ์ด์ , ์ฅ๋จ์ ๋ฐ ํ์ฅ ๊ฐ๋ฅํ๊ณ ์ฑ๋ฅ์ด ๋ฐ์ด๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ตฌ์ถ์ ์ํ ์ฌ์ฉ ์ฌ๋ก๋ฅผ ์์๋ณด์ธ์.
์ ์ ์์ฑ vs. ์๋ฒ ์ธก ๋ ๋๋ง: ์ข ํฉ ๊ฐ์ด๋
์น ๊ฐ๋ฐ ํ๊ฒฝ์ด ๋์์์ด ๋ฐ์ ํจ์ ๋ฐ๋ผ ์ฑ๋ฅ, ํ์ฅ์ฑ ๋ฐ SEO ์นํ์ ์ธ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ค๋ฉด ์ฌ๋ฐ๋ฅธ ๋ ๋๋ง ์ ๋ต์ ์ ํํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ๋ ๊ฐ์ง ์ฃผ์ ๋ ๋๋ง ๊ธฐ์ ์ ์ ์ ์์ฑ(SSG)๊ณผ ์๋ฒ ์ธก ๋ ๋๋ง(SSR)์ ๋๋ค. ์ด ๊ฐ์ด๋์์๋ ์ด๋ฌํ ์ ๊ทผ ๋ฐฉ์์ ์ฌ์ธต์ ์ผ๋ก ์ดํด๋ณด๊ณ ์ฅ์ , ๋จ์ ๋ฐ ์ด์์ ์ธ ์ฌ์ฉ ์ฌ๋ก๋ฅผ ์ดํด๋ณด๊ณ ๋ค์ ํ๋ก์ ํธ์ ๋ํด ์ ๋ณด์ ์ ๊ฐํ ๊ฒฐ์ ์ ๋ด๋ฆฌ๋ ๋ฐ ํ์ํ ์ง์์ ์ ๊ณตํฉ๋๋ค.
๋ ๋๋ง์ด๋ ๋ฌด์์ธ๊ฐ?
SSG์ SSR์ ๋ํด ์์ธํ ์์๋ณด๊ธฐ ์ ์ ๋ ๋๋ง์ด ๋ฌด์์ ์๋ฏธํ๋์ง ์ดํดํ๋ ๊ฒ์ด ํ์์ ์ ๋๋ค. ๋ ๋๋ง์ ์ผ๋ฐ์ ์ผ๋ก HTML, CSS ๋ฐ JavaScript ์ฝ๋๋ฅผ ์ฌ์ฉ์ ์ํธ ์์ฉ ์นํ์ด์ง๋ก ๋ณํํ๋ ํ๋ก์ธ์ค์ ๋๋ค. ์ด ํ๋ก์ธ์ค๋ ์๋ฒ, ํด๋ผ์ด์ธํธ ๋ธ๋ผ์ฐ์ ๋๋ ๋น๋ ํ๋ก์ธ์ค ์ค์ ๋ฐ์ํ ์ ์์ต๋๋ค.
๋ค์ํ ๋ ๋๋ง ์ ๋ต์ ๋ค์๊ณผ ๊ฐ์ ์ฌํญ์ ์ง์ ์ ์ธ ์ํฅ์ ๋ฏธ์นฉ๋๋ค.
- ์ฑ๋ฅ: ํ์ด์ง๊ฐ ์ผ๋ง๋ ๋นจ๋ฆฌ ๋ก๋๋์ด ์ํธ ์์ฉํ๊ฒ ๋๋์ง.
- SEO(๊ฒ์ ์์ง ์ต์ ํ): ๊ฒ์ ์์ง์ด ์ฝํ ์ธ ๋ฅผ ์ผ๋ง๋ ์ฝ๊ฒ ํฌ๋กค๋งํ๊ณ ์์ธํํ ์ ์๋์ง.
- ํ์ฅ์ฑ: ์ ํ๋ฆฌ์ผ์ด์ ์ด ํธ๋ํฝ ๋ฐ ๋ฐ์ดํฐ ๋ณผ๋ฅจ ์ฆ๊ฐ๋ฅผ ์ผ๋ง๋ ์ ์ฒ๋ฆฌํ๋์ง.
- ์ฌ์ฉ์ ๊ฒฝํ: ์ฌ์ฉ์๊ฐ ์ฌ์ดํธ์ ์ํธ ์์ฉํ ๋ ๋๋ผ๋ ์ ๋ฐ์ ์ธ ๋๋.
์ ์ ์์ฑ(SSG)
์ ์
์ ์ ์์ฑ์ ์ฌ์ ๋ ๋๋ง์ด๋ผ๊ณ ๋ ํ๋ฉฐ ๋น๋ ์ HTML ํ์ด์ง๋ฅผ ์์ฑํ๋ ๊ธฐ์ ์ ๋๋ค. ์ฆ, ์ฌ์ฉ์๊ฐ ํ์ด์ง๋ฅผ ์์ฒญํ๋ฉด ์๋ฒ๋ ์ค์๊ฐ ๊ณ์ฐ์ด๋ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ์์ด ๋ฏธ๋ฆฌ ๋น๋๋ HTML ํ์ผ์ ์ ๊ณตํฉ๋๋ค.
์๋ ๋ฐฉ์
- ๋น๋ ํ๋ก์ธ์ค(์: ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฐฐํฌํ ๋) ์ค์ ์ ์ ์ฌ์ดํธ ์์ฑ๊ธฐ(์: Gatsby ๋๋ Next.js)๋ ๋ค์ํ ์์ค(๋ฐ์ดํฐ๋ฒ ์ด์ค, API, Markdown ํ์ผ ๋ฑ)์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ต๋๋ค.
- ๋ฐ์ดํฐ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์น ์ฌ์ดํธ์ ๊ฐ ํ์ด์ง์ ๋ํ HTML ํ์ผ์ ์์ฑํฉ๋๋ค.
- CSS, JavaScript ๋ฐ ์ด๋ฏธ์ง์ ๊ฐ์ ์ ์ ์์ฐ๊ณผ ํจ๊ป ์ด๋ฌํ HTML ํ์ผ์ CDN(์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ)์ ๋ฐฐํฌ๋ฉ๋๋ค.
- ์ฌ์ฉ์๊ฐ ํ์ด์ง๋ฅผ ์์ฒญํ๋ฉด CDN์ ๋ฏธ๋ฆฌ ๋น๋๋ HTML ํ์ผ์ ๋ธ๋ผ์ฐ์ ์ ์ง์ ์ ๊ณตํฉ๋๋ค.
์ ์ ์์ฑ์ ์ฅ์
- ๋ฐ์ด๋ ์ฑ๋ฅ: HTML์ด ์ด๋ฏธ ์์ฑ๋์ด ํ์ด์ง๊ฐ ๋งค์ฐ ๋น ๋ฅด๊ฒ ๋ก๋๋ฉ๋๋ค. CDN์ ์ฌ์ฉ์์ ๋ ๊ฐ๊น์ด ์ฝํ ์ธ ๋ฅผ ์บ์ฑํ์ฌ ์ ๊ณต์ ๋์ฑ ์ต์ ํํ ์ ์์ต๋๋ค.
- ํฅ์๋ SEO: ๊ฒ์ ์์ง ํฌ๋กค๋ฌ๊ฐ ์ ์ HTML ์ฝํ ์ธ ๋ฅผ ์ฝ๊ฒ ์์ธํํ ์ ์์ผ๋ฏ๋ก ๊ฒ์ ์์๊ฐ ํฅ์๋ฉ๋๋ค.
- ํฅ์๋ ๋ณด์: ๊ฐ ์์ฒญ์ ๋ํ ์๋ฒ ์ธก ๊ณ์ฐ์ด ์์ผ๋ฏ๋ก ๊ณต๊ฒฉ ํ๋ฉด์ด ์ค์ด๋ญ๋๋ค.
- ๋ฎ์ ํธ์คํ ๋น์ฉ: ์ ์ ํ์ผ์ ์ ๊ณตํ๋ ๊ฒ์ ์ผ๋ฐ์ ์ผ๋ก ์๋ฒ ์ธก ์ ํ๋ฆฌ์ผ์ด์ ์ ์คํํ๋ ๊ฒ๋ณด๋ค ์ ๋ ดํฉ๋๋ค.
- ํ์ฅ์ฑ: CDN์ ๋๊ท๋ชจ ํธ๋ํฝ ๊ธ์ฆ์ ์ฒ๋ฆฌํ๋๋ก ์ค๊ณ๋์์ผ๋ฏ๋ก SSG๋ ํ์ฅ์ฑ์ด ๋ฐ์ด๋ฉ๋๋ค.
์ ์ ์์ฑ์ ๋จ์
- ์ ๋ฐ์ดํธ๋ฅผ ์ํด์๋ ๋ค์ ๋น๋๊ฐ ํ์ํฉ๋๋ค: ์ฝํ ์ธ ๋ฅผ ๋ณ๊ฒฝํ๋ ค๋ฉด ์ ์ฒด ์ฌ์ดํธ๋ฅผ ๋ค์ ๋น๋ํ๊ณ ๋ค์ ๋ฐฐํฌํด์ผ ํฉ๋๋ค. ์ด๋ ์ ๋ฐ์ดํธ๊ฐ ์ฆ์ ๋๊ท๋ชจ ์น์ฌ์ดํธ์ ๊ฒฝ์ฐ ์๊ฐ์ด ์ค๋ ๊ฑธ๋ฆด ์ ์์ต๋๋ค.
- ๊ณ ๋๋ก ๋์ ์ธ ์ฝํ ์ธ ์๋ ์ ํฉํ์ง ์์: ์ค์๊ฐ ๋ฐ์ดํฐ ์ ๋ฐ์ดํธ ๋๋ ๊ฐ ์ฌ์ฉ์์ ๋ํ ๊ฐ์ธํ๋ ์ฝํ ์ธ (์: ์์ ๋ฏธ๋์ด ํผ๋, ์ฃผ์ ์์ธ)๊ฐ ํ์ํ ์ ํ๋ฆฌ์ผ์ด์ ์๋ ์ ํฉํ์ง ์์ต๋๋ค.
- ์ฝํ ์ธ ๊ฐ ๋ง์์๋ก ๋น๋ ์๊ฐ์ด ๋์ด๋ฉ๋๋ค: ์ฝํ ์ธ ๊ฐ ๋ง์์๋ก ๋น๋ ํ๋ก์ธ์ค์ ๋ ๋ง์ ์๊ฐ์ด ๊ฑธ๋ฆฝ๋๋ค.
์ ์ ์์ฑ ์ฌ์ฉ ์ฌ๋ก
- ๋ธ๋ก๊ทธ: ์ ๋ฐ์ดํธ๊ฐ ๋๋ฌธ ์ฝํ ์ธ ์ค์ฌ ๋ธ๋ก๊ทธ๋ SSG์ ์๋ฒฝํ๊ฒ ์ ํฉํฉ๋๋ค. WordPress์ ๊ฐ์ ํ๋ซํผ์ ํ๋ฌ๊ทธ์ธ์ ํตํด ์ ์ ์ฌ์ดํธ๋ฅผ ์ถ๋ ฅํ๋๋ก ์กฐ์ ํ ์๋ ์์ต๋๋ค.
- ๋ง์ผํ ์น์ฌ์ดํธ: ์ฌ์ฉ์ ์ธ์ฆ์ด๋ ๊ฐ์ธํ๋ ์ฝํ ์ธ ๊ฐ ํ์ํ์ง ์์ ์ ๋ณด์ฑ ์น์ฌ์ดํธ๋ SSG์ ์ฑ๋ฅ ๋ฐ SEO ์ด์ ์ ํฌ๊ฒ ํ์ฉํฉ๋๋ค. ์ ํ ๋ฐ ์๋น์ค๋ฅผ ๋ณด์ฌ์ฃผ๋ ํ์ฌ ์น์ฌ์ดํธ ๋๋ ๋ง์ผํ ์บ ํ์ธ์ฉ ๋๋ฉ ํ์ด์ง๋ฅผ ์๊ฐํด ๋ณด์ธ์.
- ๋ฌธ์ ์ฌ์ดํธ: ๊ธฐ์ ๋ฌธ์, ํํ ๋ฆฌ์ผ ๋ฐ ๊ฐ์ด๋๋ ์ผ๋ฐ์ ์ผ๋ก ๋์ ์ ํ๋ฆฌ์ผ์ด์ ๋ณด๋ค ์ ๋ฐ์ดํธ ๋น๋๊ฐ ๋ฎ๊ธฐ ๋๋ฌธ์ SSG์ ์ ํฉํฉ๋๋ค.
- ์ ์ ์๊ฑฐ๋ ์ ํ ์นดํ๋ก๊ทธ: ๋น๊ต์ ์์ ์ ์ธ ์ ํ์ด ๋ง์ ์ ์ ์๊ฑฐ๋ ์ฌ์ดํธ์ ๊ฒฝ์ฐ SSG๋ ์ด๊ธฐ ๋ก๋ ์๊ฐ๊ณผ SEO๋ฅผ ํฌ๊ฒ ๊ฐ์ ํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด ์๋ฅ ์๋งค์ ์ฒด๋ ์ฌ๊ณ ์ ์๋ ๊ฐ ํ๋ชฉ์ ๋ํ ํ์ด์ง๋ฅผ ๋ฏธ๋ฆฌ ์์ฑํ ์ ์์ต๋๋ค. ๊ฐ๊ฒฉ ๋ฐ ๊ฐ์ฉ์ฑ๊ณผ ๊ฐ์ ๋์ ์์๋ ํด๋ผ์ด์ธํธ ์ธก์์ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค.
์ ์ ์์ฑ ๋๊ตฌ
- Gatsby: ํ๋ถํ ํ๋ฌ๊ทธ์ธ ๋ฐ ํ ๋ง ์ํ๊ณ๊ฐ ์๋ ์ธ๊ธฐ ์๋ React ๊ธฐ๋ฐ ์ ์ ์ฌ์ดํธ ์์ฑ๊ธฐ์ ๋๋ค.
- Next.js (
next export๋๋ ISR ์ฌ์ฉ): SSG์ SSR์ ๋ชจ๋ ์ง์ํ๋ ๋ค์ฌ๋ค๋ฅํ React ํ๋ ์์ํฌ์ ๋๋ค.next export๋ ์ ์ ์ฌ์ดํธ ์์ฑ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ฉฐ, ISR(์ ์ง์ ์ ์ ์ฌ์์ฑ)์ ๋น๋๋ ํ ์ ์ ํ์ด์ง๋ฅผ ์ ๋ฐ์ดํธํ ์ ์๋ ํ์ด๋ธ๋ฆฌ๋ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํฉ๋๋ค. - Hugo: Go๋ก ์์ฑ๋ ๋น ๋ฅด๊ณ ์ ์ฐํ ์ ์ ์ฌ์ดํธ ์์ฑ๊ธฐ์ ๋๋ค.
- Jekyll: Ruby๋ก ์์ฑ๋ ๊ฐ๋จํ ๋ธ๋ก๊ทธ ์ธ์ ์ ์ ์ฌ์ดํธ ์์ฑ๊ธฐ์ ๋๋ค.
- Eleventy (11ty): ํ๋ ์์ํฌ์ ๊ตฌ์ ๋ฐ์ง ์๋ ๋ ๊ฐ๋จํ ์ ์ ์ฌ์ดํธ ์์ฑ๊ธฐ์ ๋๋ค.
์๋ฒ ์ธก ๋ ๋๋ง(SSR)
์ ์
์๋ฒ ์ธก ๋ ๋๋ง์ ๊ฐ ์ฌ์ฉ์ ์์ฒญ์ ๋ํ ์๋ต์ผ๋ก ์๋ฒ์์ HTML ํ์ด์ง๋ฅผ ์์ฑํ๋ ๊ธฐ์ ์ ๋๋ค. ์ฆ, ์๋ฒ๊ฐ ๋ฐ์ดํฐ๋ฒ ์ด์ค ๋๋ API์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ ์ข ์ข HTML์ ๋์ ์ผ๋ก ์กฐ๋ฆฝํ ํ ๋ธ๋ผ์ฐ์ ๋ก ๋ณด๋ ๋๋ค.
์๋ ๋ฐฉ์
- ์ฌ์ฉ์๊ฐ ํ์ด์ง๋ฅผ ์์ฒญํ๋ฉด ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ฒ๋ก ์์ฒญ์ ๋ณด๋ ๋๋ค.
- ์๋ฒ๋ ์์ฒญ์ ์์ ํ๊ณ ์์ฒญ๋ ํ์ด์ง์ ๋ํ HTML์ ์์ฑํ๊ธฐ ์ํด ์ ํ๋ฆฌ์ผ์ด์ ์ฝ๋๋ฅผ ์คํํฉ๋๋ค. ์ฌ๊ธฐ์๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค ๋๋ ์ธ๋ถ API์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ์์ ์ด ํฌํจ๋๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค.
- ์๋ฒ๋ ์์ ํ ๋ ๋๋ง๋ HTML ํ์ด์ง๋ฅผ ๋ธ๋ผ์ฐ์ ๋ก ๋ค์ ๋ณด๋ ๋๋ค.
- ๋ธ๋ผ์ฐ์ ๋ ์์ ๋ HTML ์ฝํ ์ธ ๋ฅผ ํ์ํฉ๋๋ค. ๊ทธ๋ฌ๋ฉด JavaScript๊ฐ ํด๋ผ์ด์ธํธ์์ ์คํ๋์ด ํ์ด์ง๋ฅผ ์ํธ ์์ฉํ๊ฒ ๋ง๋ญ๋๋ค.
์๋ฒ ์ธก ๋ ๋๋ง์ ์ฅ์
- ํฅ์๋ SEO: SSG์ ์ ์ฌํ๊ฒ SSR์ ์ฌ์ฉํ๋ฉด ๊ฒ์ ์์ง ํฌ๋กค๋ฌ๊ฐ ์์ ํ ๋ ๋๋ง๋ HTML์ ์์ ํ๊ธฐ ๋๋ฌธ์ ์ฝํ ์ธ ๋ฅผ ๋ ์ฝ๊ฒ ์์ธํํ ์ ์์ต๋๋ค. ๊ฒ์ ์์ง์ด JavaScript ๋ ๋๋ง ์ฝํ ์ธ ๋ฅผ ์์ธํํ๋ ๋ฐ ๋ฅ์ํด์ง๊ณ ์์ง๋ง SSR์ ์ฆ๊ฐ์ ์ธ ์ด์ ์ ์ ๊ณตํฉ๋๋ค.
- ๋ ๋น ๋ฅธ FCP(์ฒซ ๋ฒ์งธ ์ฝํ ์ธ ํ์ธํธ): ๋ธ๋ผ์ฐ์ ๋ ์์ ํ ๋ ๋๋ง๋ HTML ํ์ด์ง๋ฅผ ์์ ํ๋ฏ๋ก ์ฌ์ฉ์๊ฐ ๋ ๋น ๋ฅด๊ฒ ์ฝํ ์ธ ๋ฅผ ํ์ํ ์ ์์ด ํนํ ์ฒ๋ฆฌ ๋ฅ๋ ฅ์ด ์ ํ์ ์ด๊ฑฐ๋ ๋คํธ์ํฌ ์ฐ๊ฒฐ์ด ๋๋ฆฐ ์ฅ์น์์ ์ธ์ ์ฑ๋ฅ์ ๊ฐ์ ํฉ๋๋ค.
- ๋์ ์ฝํ ์ธ : SSR์ ๊ฐ ์์ฒญ์ ๋ํด ์ฝํ ์ธ ๊ฐ ๋์ ์ผ๋ก ์์ฑ๋๋ฏ๋ก ์ค์๊ฐ ๋ฐ์ดํฐ ์ ๋ฐ์ดํธ ๋๋ ๊ฐ์ธํ๋ ์ฝํ ์ธ ๊ฐ ํ์ํ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ํฉํฉ๋๋ค.
์๋ฒ ์ธก ๋ ๋๋ง์ ๋จ์
- ๋ ๋์ ์๋ฒ ๋ถํ: ๊ฐ ์์ฒญ์ ๋ํด ์๋ฒ์์ HTML์ ์์ฑํ๋ฉด ํนํ ํธ๋ํฝ์ด ๋ง์ ๊ฒฝ์ฐ ์๋ฒ ๋ฆฌ์์ค์ ์๋นํ ๋ถ๋ด์ ์ค ์ ์์ต๋๋ค.
- TTFB(์ฒซ ๋ฒ์งธ ๋ฐ์ดํธ๊น์ง์ ์๊ฐ)๊ฐ ๋ ๋๋ฆผ: ์๋ฒ๊ฐ HTML์ ์์ฑํ๊ณ ์ ์กํ๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ด ์ ์ ํ์ผ์ ์ ๊ณตํ๋ ๊ฒ๋ณด๋ค ๋ ๊ธธ ์ ์์ผ๋ฏ๋ก TTFB๊ฐ ์ฆ๊ฐํฉ๋๋ค.
- ๋ ๋ณต์กํ ์ธํ๋ผ: ์๋ฒ ์ธก ๋ ๋๋ง ํ๊ฒฝ์ ์ค์ ํ๊ณ ์ ์ง ๊ด๋ฆฌํ๋ ค๋ฉด ์ ์ ํ์ผ์ ์ ๊ณตํ๋ ๊ฒ๋ณด๋ค ๋ ๋ง์ ์ธํ๋ผ์ ์ ๋ฌธ ์ง์์ด ํ์ํฉ๋๋ค.
์๋ฒ ์ธก ๋ ๋๋ง ์ฌ์ฉ ์ฌ๋ก
- ์ ์ ์๊ฑฐ๋ ์ ํ๋ฆฌ์ผ์ด์ : SSR์ ์ ํ ์ ๋ณด, ๊ฐ๊ฒฉ ๋ฐ ๊ฐ์ฉ์ฑ์ ์์ฃผ ์ ๋ฐ์ดํธํด์ผ ํ๋ ์ ์ ์๊ฑฐ๋ ์ฌ์ดํธ์ ์ ํฉํฉ๋๋ค. ์๋ฅผ ๋ค์ด ์จ๋ผ์ธ ์๋งค์ ์ฒด๋ SSR์ ์ฌ์ฉํ์ฌ ์ค์๊ฐ ์ฌ๊ณ ์์ค ๋ฐ ๊ฐ์ธํ๋ ์ ํ ์ถ์ฒ์ ํ์ํ ์ ์์ต๋๋ค.
- ์์ ๋ฏธ๋์ด ํ๋ซํผ: ์์ ๋ฏธ๋์ด ์ฌ์ดํธ๋ ๋์์์ด ๋ณํํ๋ ๊ณ ๋๋ก ๋์ ์ธ ์ฝํ ์ธ ๊ฐ ํ์ํฉ๋๋ค. SSR์ ์ฌ์ฉํ๋ฉด ์ฌ์ฉ์๊ฐ ํญ์ ์ต์ ๊ฒ์๋ฌผ, ๋๊ธ ๋ฐ ์๋ฆผ์ ๋ณผ ์ ์์ต๋๋ค.
- ๋ด์ค ์น์ฌ์ดํธ: ๋ด์ค ์ฌ์ดํธ๋ ์๋ณด ๋ฐ ์ ๋ฐ์ดํธ๋ ๊ธฐ์ฌ๋ฅผ ์ค์๊ฐ์ผ๋ก ์ ๊ณตํด์ผ ํฉ๋๋ค. SSR์ ์ฌ์ฉํ๋ฉด ์ฌ์ฉ์๊ฐ ์ฌ์ดํธ๋ฅผ ๋ฐฉ๋ฌธํ๋ ์ฆ์ ๊ฐ์ฅ ์ต์ ์ ๋ณด๋ฅผ ๋ณผ ์ ์์ต๋๋ค.
- ๋์๋ณด๋: ์ฌ๋ฌด ๋์๋ณด๋ ๋๋ ๋น์ฆ๋์ค ์ธํ ๋ฆฌ์ ์ค ํ๋ซํผ๊ณผ ๊ฐ์ด ์ง์์ ์ผ๋ก ์ ๋ฐ์ดํธ๋๋ ๋ฐ์ดํฐ๋ฅผ ํ์ํ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ํ์ฑ์ ์ ์งํ๊ธฐ ์ํด SSR์ด ํ์ํฉ๋๋ค.
์๋ฒ ์ธก ๋ ๋๋ง ๋๊ตฌ
- Next.js: SSR์ ๊ฐ๋ ฅํ๊ฒ ์ง์ํ์ฌ ์๋ฒ ๋ ๋๋ง๋ React ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฝ๊ฒ ๊ตฌ์ถํ ์ ์๋ ์ธ๊ธฐ ์๋ React ํ๋ ์์ํฌ์ ๋๋ค.
- Nuxt.js: ์๋ฒ ๋ ๋๋ง๋ Vue ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ํ๋ก์ธ์ค๋ฅผ ๋จ์ํํ๋ Vue.js ํ๋ ์์ํฌ์ ๋๋ค.
- Express.js: React ๋๋ Vue์ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ SSR์ ๊ตฌํํ๋ ๋ฐ ์ฌ์ฉํ ์ ์๋ Node.js ์น ์ ํ๋ฆฌ์ผ์ด์ ํ๋ ์์ํฌ์ ๋๋ค.
- Angular Universal: Angular ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ ๊ณต์ SSR ์๋ฃจ์ ์ ๋๋ค.
SSG์ SSR ๋น๊ต: ๋๋ํ ๋ถ์
SSG์ SSR์ ์ฐจ์ด์ ์ ๋ ์ ์ดํดํ๋ ค๋ฉด ์ฃผ์ ํน์ฑ๋ณ๋ก ๋น๊ตํด ๋ณด๊ฒ ์ต๋๋ค.
| ๊ธฐ๋ฅ | ์ ์ ์์ฑ(SSG) | ์๋ฒ ์ธก ๋ ๋๋ง(SSR) |
|---|---|---|
| ์ฝํ ์ธ ์์ฑ | ๋น๋ ์๊ฐ | ์์ฒญ ์๊ฐ |
| ์ฑ๋ฅ | ๋ฐ์ด๋จ(๊ฐ์ฅ ๋น ๋ฆ) | ์ฐ์ํจ(์๋ฒ ์ฑ๋ฅ์ ๋ฐ๋ผ ๋ค๋ฆ) |
| SEO | ๋ฐ์ด๋จ | ๋ฐ์ด๋จ |
| ํ์ฅ์ฑ | ๋ฐ์ด๋จ(CDN์ผ๋ก ์ฝ๊ฒ ํ์ฅ ๊ฐ๋ฅ) | ์ฐ์ํจ(๊ฐ๋ ฅํ ์๋ฒ ์ธํ๋ผ ํ์) |
| ๋์ ์ฝํ ์ธ | ์ ํ๋จ(๋ค์ ๋น๋ ํ์) | ๋ฐ์ด๋จ |
| ๋ณต์ก์ฑ | ๋ฎ์ | ๋์ |
| ๋น์ฉ | ๋ฎ์(์ ๋ ดํ ํธ์คํ ) | ๋์(๋ ๋น์ผ ํธ์คํ ) |
| ์ค์๊ฐ ์ ๋ฐ์ดํธ | ์ ํฉํ์ง ์์ | ์ ํฉํจ |
SSG์ SSR ์ด์: ๋ค๋ฅธ ๋ ๋๋ง ๊ธฐ์
SSG์ SSR์ด ์ฃผ์ ๋ ๋๋ง ์ ๋ต์ด์ง๋ง ๋ค๋ฅธ ์ ๊ทผ ๋ฐฉ์์ ์ธ์ํ๋ ๊ฒ๋ ์ค์ํฉ๋๋ค.
- ํด๋ผ์ด์ธํธ ์ธก ๋ ๋๋ง(CSR): ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ JavaScript๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์์ ๋ธ๋ผ์ฐ์ ์์ ๋ ๋๋ง๋ฉ๋๋ค. ์ด๋ React, Angular ๋ฐ Vue์ ๊ฐ์ ํ๋ ์์ํฌ๋ก ๊ตฌ์ถ๋ SPA(Single Page Application)์ ๋ํ ์ผ๋ฐ์ ์ธ ์ ๊ทผ ๋ฐฉ์์ ๋๋ค. CSR์ ํ๋ถํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ ์ ์์ง๋ง ์ด๊ธฐ ๋ก๋ ์๊ฐ์ด ์ข์ง ์๊ณ SEO ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค.
- ISR(์ ์ง์ ์ ์ ์ฌ์์ฑ): SSG์ SSR์ ์ฅ์ ์ ๊ฒฐํฉํ ํ์ด๋ธ๋ฆฌ๋ ์ ๊ทผ ๋ฐฉ์์ ๋๋ค. ํ์ด์ง๋ ๋น๋ ์ ์ ์ ์ผ๋ก ์์ฑ๋์ง๋ง ๋ฐฐํฌ ํ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋ค์ ์์ฑ๋ ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ์ฌ์ดํธ๋ฅผ ์ ์ฒด์ ์ผ๋ก ๋ค์ ๋น๋ํ์ง ์๊ณ ์ฝํ ์ธ ๋ฅผ ์ ๋ฐ์ดํธํ ์ ์์ต๋๋ค. Next.js๋ ISR์ ์ง์ํฉ๋๋ค.
- DSG(์ง์ฐ ์ ์ ์์ฑ): ISR๊ณผ ์ ์ฌํ์ง๋ง ํ์ด์ง๋ ๋ฐฐํฌ ํ ์ฒ์ ์์ฒญ๋ ๋ ์ฃผ๋ฌธํ์ผ๋ก ์์ฑ๋ฉ๋๋ค. ์ด๋ ๋น๋ ์ ๋ชจ๋ ๊ฒ์ ๋ฏธ๋ฆฌ ์์ฑํ๋ ๊ฒ์ด ๋น์ค์ฉ์ ์ธ ๋งค์ฐ ๋ง์ ์์ ํ์ด์ง๊ฐ ์๋ ์ฌ์ดํธ์ ์ ์ฉํฉ๋๋ค.
์ฌ๋ฐ๋ฅธ ๋ ๋๋ง ์ ๋ต ์ ํ
์ต์ ์ ๋ ๋๋ง ์ ๋ต์ ํ๋ก์ ํธ์ ํน์ ์๊ตฌ ์ฌํญ์ ๋ฐ๋ผ ๋ค๋ฆ ๋๋ค. ๋ค์ ์์๋ฅผ ๊ณ ๋ คํ์ญ์์ค.
- ์ฝํ ์ธ ์ ์ญ๋์ฑ: ์ฝํ ์ธ ๋ฅผ ์ผ๋ง๋ ์์ฃผ ์ ๋ฐ์ดํธํด์ผ ํฉ๋๊น? ์ฝํ ์ธ ๊ฐ ์์ฃผ ๋ณ๊ฒฝ๋๋ ๊ฒฝ์ฐ SSR ๋๋ ISR์ด ๋ ๋์ ์ ํ์ผ ์ ์์ต๋๋ค. ์ฝํ ์ธ ๊ฐ ๋น๊ต์ ์ ์ ์ธ ๊ฒฝ์ฐ SSG๊ฐ ์ข์ ์ต์ ์ ๋๋ค.
- SEO ์๊ตฌ ์ฌํญ: ๊ฒ์ ์์ง ์ต์ ํ๊ฐ ์ผ๋ง๋ ์ค์ํฉ๋๊น? SSG์ SSR์ ๋ชจ๋ SEO ์นํ์ ์ด์ง๋ง SSR์ ๊ณ ๋๋ก ๋์ ์ธ ์ฝํ ์ธ ์ ์ฝ๊ฐ ๋ ๋์ ์ ์์ต๋๋ค.
- ์ฑ๋ฅ ๋ชฉํ: ์ฑ๋ฅ ๋ชฉํ๋ ๋ฌด์์ ๋๊น? SSG๋ ์ผ๋ฐ์ ์ผ๋ก ์ต๊ณ ์ ์ฑ๋ฅ์ ์ ๊ณตํ์ง๋ง SSR์ ์บ์ฑ ๋ฐ ๊ธฐํ ๊ธฐ์ ๋ก ์ต์ ํํ ์ ์์ต๋๋ค.
- ํ์ฅ์ฑ ์๊ตฌ ์ฌํญ: ์ผ๋ง๋ ๋ง์ ํธ๋ํฝ์ ์์ํ์ญ๋๊น? SSG๋ CDN ๋๋ถ์ ํ์ฅ์ฑ์ด ๋ฐ์ด๋๊ณ SSR์ ๋ ๊ฐ๋ ฅํ ์๋ฒ ์ธํ๋ผ๊ฐ ํ์ํฉ๋๋ค.
- ๊ฐ๋ฐ ๋ณต์ก์ฑ: ๋ ๋๋ง ์ธํ๋ผ๋ฅผ ์ค์ ํ๊ณ ์ ์ง ๊ด๋ฆฌํ๋ ๋ฐ ์ผ๋ง๋งํผ์ ๋ ธ๋ ฅ์ ๊ธฐ์ธ์ผ ์ํฅ์ด ์์ต๋๊น? SSG๋ ์ผ๋ฐ์ ์ผ๋ก SSR๋ณด๋ค ์ค์ ์ด ๋ ๊ฐ๋จํฉ๋๋ค.
- ํ ์ ๋ฌธ ์ง์: ํ์ ์ด๋ค ํ๋ ์์ํฌ์ ๋๊ตฌ์ ์ต์ํฉ๋๊น? ํ์ ์ ๋ฌธ ์ง์์ ๋ง๋ ๋ ๋๋ง ์ ๋ต์ ์ ํํ์ธ์.
๊ตญ์ ํ(i18n) ๋ฐ ํ์งํ(L10n) ๊ณ ๋ ค ์ฌํญ
๊ธ๋ก๋ฒ ๋์ ๊ณ ๊ฐ์ ์ํ ์น์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ ๋ ๊ตญ์ ํ(i18n) ๋ฐ ํ์งํ(L10n)๋ฅผ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์ด๋ฌํ ํ๋ก์ธ์ค๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค๋ฅธ ์ธ์ด์ ์ง์ญ์ ์ ์ฉํฉ๋๋ค.
SSG๋ ๋น๋ ํ๋ก์ธ์ค ์ค์ ์น์ฌ์ดํธ์ ํ์งํ๋ ๋ฒ์ ์ ๋ฏธ๋ฆฌ ์์ฑํ์ฌ i18n/L10n์ ํจ๊ณผ์ ์ผ๋ก ์ฒ๋ฆฌํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด ๊ฐ ์ธ์ด์ ๋ํ ๋ณ๋์ ๋๋ ํ ๋ฆฌ๋ฅผ ๊ฐ์ง ์ ์์ผ๋ฉฐ ๊ฐ ๋๋ ํ ๋ฆฌ์๋ ๋ฒ์ญ๋ ์ฝํ ์ธ ๊ฐ ํฌํจ๋ฉ๋๋ค.
SSR์ ๋ํ ์ฌ์ฉ์์ ๋ธ๋ผ์ฐ์ ์ค์ ๋๋ ๊ธฐ๋ณธ ์ค์ ์ ๋ฐ๋ผ ํ์งํ๋ ์ฝํ ์ธ ๋ฅผ ๋์ ์ผ๋ก ์์ฑํ์ฌ i18n/L10n์ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค. ์ด๋ ์ธ์ด ๊ฐ์ง ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฐ ๋ฒ์ญ ์๋น์ค๋ฅผ ์ฌ์ฉํ์ฌ ์ํํ ์ ์์ต๋๋ค.
๋ ๋๋ง ์ ๋ต์ ๊ด๊ณ์์ด i18n/L10n์ ๋ํ ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ณ ๋ คํ์ญ์์ค.
- ๊ฐ๋ ฅํ i18n ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉ: i18next์ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๋ฒ์ญ ๊ด๋ฆฌ, ๋ณต์ํ ๋ฐ ๋ ์ง/์๊ฐ ์์์ ํฌํจํ ํฌ๊ด์ ์ธ i18n ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
- ๋ฒ์ญ์ ๊ตฌ์กฐํ๋ ํ์์ผ๋ก ์ ์ฅ: JSON ๋๋ YAML ํ์ผ์ ์ฌ์ฉํ์ฌ ๋ฒ์ญ์ ์ ์ฅํ๋ฉด ๊ด๋ฆฌ ๋ฐ ์ ๋ฐ์ดํธ๊ฐ ์ฉ์ดํฉ๋๋ค.
- RTL(์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ) ์ธ์ด ์ฒ๋ฆฌ: ์๋์ด ๋ฐ ํ๋ธ๋ฆฌ์ด์ ๊ฐ์ RTL ์ธ์ด๋ฅผ ์น์ฌ์ดํธ์์ ์ง์ํ๋์ง ํ์ธํฉ๋๋ค.
- ๋ค์ํ ๋ฌธํ์ ํ์์ ์ ์: ๋ค์ํ ์ง์ญ์ ๋ ์ง, ์๊ฐ, ์ซ์ ๋ฐ ํตํ ํ์์ ์ฃผ์ํ์ธ์. ์๋ฅผ ๋ค์ด ๋ฏธ๊ตญ์ ๋ ์ง ํ์์ MM/DD/YYYY์ด๊ณ ๋ง์ ์ ๋ฝ ๊ตญ๊ฐ์์๋ DD/MM/YYYY์ ๋๋ค.
- ๋ฒ์ญ ํ์ง ๊ณ ๋ ค: ๊ธฐ๊ณ ๋ฒ์ญ์ด ๋์์ด ๋ ์ ์์ง๋ง ์ ํ์ฑ๊ณผ ์ ์ฐฝ์ฑ์ ๋ณด์ฅํ๊ธฐ ์ํด ๋ฒ์ญ์ ๊ฒํ ํ๊ณ ํธ์งํ๋ ๊ฒ์ด ํ์์ ์ ๋๋ค. ์ ๋ฌธ ๋ฒ์ญ ์๋น์ค๋ ๊ณ ํ์ง ๋ฒ์ญ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
์์: ๊ธ๋ก๋ฒ ์ ์ ์๊ฑฐ๋ ์ฌ์ดํธ์ SSG์ SSR ์ค์์ ์ ํ
๊ธ๋ก๋ฒํ๊ฒ ์ ํ์ ํ๋งคํ๋ ์ ์ ์๊ฑฐ๋ ์น์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ๋ค๊ณ ๊ฐ์ ํด ๋ณด๊ฒ ์ต๋๋ค. ๋ค์์ SSG์ SSR ์ค์์ ๊ฒฐ์ ํ๋ ๋ฐฉ๋ฒ์ ๋๋ค.
์๋๋ฆฌ์ค 1: ๋๊ท๋ชจ ์ ํ ์นดํ๋ก๊ทธ, ๋๋ฌธ ์ ๋ฐ์ดํธ
์ ํ ์นดํ๋ก๊ทธ๊ฐ ํฌ์ง๋ง(์: ์์ญ๋ง ๊ฐ์ ํญ๋ชฉ), ์ ํ ์ ๋ณด(์ค๋ช , ์ด๋ฏธ์ง)๊ฐ ๋๋ฌผ๊ฒ ๋ณ๊ฒฝ๋๋ ๊ฒฝ์ฐ ISR(์ ์ง์ ์ ์ ์ฌ์์ฑ)์ ์ฌ์ฉํ SSG๊ฐ ์ต์ ์ ์ ํ์ผ ์ ์์ต๋๋ค. ๋น๋ ์ ์ ํ ํ์ด์ง๋ฅผ ๋ฏธ๋ฆฌ ์์ฑํ ๋ค์ ISR์ ์ฌ์ฉํ์ฌ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์ฃผ๊ธฐ์ ์ผ๋ก ์ ๋ฐ์ดํธํ ์ ์์ต๋๋ค.
์๋๋ฆฌ์ค 2: ๋์ ๊ฐ๊ฒฉ ๋ฐ ์ฌ๊ณ , ๊ฐ์ธํ๋ ์ถ์ฒ
๊ฐ๊ฒฉ ๋ฐ ์ฌ๊ณ ์์ค์ด ์์ฃผ ๋ณ๊ฒฝ๋๊ณ ๊ฐ ์ฌ์ฉ์์๊ฒ ๊ฐ์ธํ๋ ์ ํ ์ถ์ฒ์ ํ์ํ๋ ค๋ ๊ฒฝ์ฐ ์๋ฒ ์ธก ๋ ๋๋ง(SSR)์ด ๋ ๋์ ์ต์ ์ผ ๊ฐ๋ฅ์ฑ์ด ๋์ต๋๋ค. SSR์ ์ฌ์ฉํ๋ฉด ๋ฐฑ์๋์์ ์ต์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ ๊ฐ ์์ฒญ์ ๋ํ ํ์ด์ง๋ฅผ ๋์ ์ผ๋ก ๋ ๋๋งํ ์ ์์ต๋๋ค.
ํ์ด๋ธ๋ฆฌ๋ ๋ฐฉ์:
ํ์ด๋ธ๋ฆฌ๋ ๋ฐฉ์์ด ๊ฐ์ฅ ํจ๊ณผ์ ์ธ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. ์๋ฅผ ๋ค์ด ํํ์ด์ง, ์ ๋ณด ํ์ด์ง ๋ฐ ์ ํ ์นดํ ๊ณ ๋ฆฌ ํ์ด์ง์ ๊ฐ์ ์ ์ ํ์ด์ง์๋ SSG๋ฅผ ์ฌ์ฉํ๊ณ ์ฅ๋ฐ๊ตฌ๋, ๊ฒฐ์ ๋ฐ ์ฌ์ฉ์ ๊ณ์ ํ์ด์ง์ ๊ฐ์ ๋์ ํ์ด์ง์๋ SSR์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
๊ฒฐ๋ก
์ ์ ์์ฑ๊ณผ ์๋ฒ ์ธก ๋ ๋๋ง์ ์ต์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๊ธฐ ์ํ ๊ฐ๋ ฅํ ๊ธฐ์ ์ ๋๋ค. ์ฅ์ , ๋จ์ ๋ฐ ์ฌ์ฉ ์ฌ๋ก๋ฅผ ์ดํดํ๋ฉด ์ฑ๋ฅ, SEO ๋ฐ ์ฌ์ฉ์ ๊ฒฝํ์ ์ต์ ํํ๋ ์ ๋ณด์ ์ ๊ฐํ ๊ฒฐ์ ์ ๋ด๋ฆด ์ ์์ต๋๋ค. ์ฌ๋ฐ๋ฅธ ๋ ๋๋ง ์ ๋ต์ ์ ํํ ๋๋ ํ๋ก์ ํธ์ ํน์ ์๊ตฌ ์ฌํญ, ํ์ ์ ๋ฌธ ์ง์ ๋ฐ ๊ธ๋ก๋ฒ ๋์ ๊ณ ๊ฐ์ ์๊ตฌ ์ฌํญ์ ๊ณ ๋ คํ๋ ๊ฒ์ ์์ง ๋ง์ธ์. ์น ๊ฐ๋ฐ ํ๊ฒฝ์ด ๊ณ์ ๋ฐ์ ํจ์ ๋ฐ๋ผ ์ต์ ๊ธฐ์ ๊ณผ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ํ์ฉํ๊ธฐ ์ํด ์ต์ ์ ๋ณด๋ฅผ ์ป๊ณ ์ ๊ทผ ๋ฐฉ์์ ์กฐ์ ํ๋ ๊ฒ์ด ํ์์ ์ ๋๋ค.