์๋ฒ ์ธก ๋ ๋๋ง(SSR)๊ณผ ํด๋ผ์ด์ธํธ ์ธก ๋ ๋๋ง(CSR)์ ์ฐจ์ด์ , ์ฅ๋จ์ , ๊ทธ๋ฆฌ๊ณ ์ต์ ์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ ๋ฐ SEO๋ฅผ ์ํด ๊ฐ ์ ๊ทผ ๋ฐฉ์์ ์ธ์ ์ ํํด์ผ ํ๋์ง ํ๊ตฌํฉ๋๋ค.
์๋ฒ ์ธก ๋ ๋๋ง(SSR) vs. ํด๋ผ์ด์ธํธ ์ธก ๋ ๋๋ง(CSR): ์ข ํฉ ๊ฐ์ด๋
์น ๊ฐ๋ฐ ๋ถ์ผ์์ ์ฌ๋ฐ๋ฅธ ๋ ๋๋ง ๊ธฐ๋ฒ์ ์ ํํ๋ ๊ฒ์ ์ต์ ์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๊ณ , ๊ฒ์ ์์ง ์ต์ ํ(SEO)๋ฅผ ๊ฐ์ ํ๋ฉฐ, ํจ์จ์ ์ธ ๋ฆฌ์์ค ํ์ฉ์ ๋ณด์ฅํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ฃผ์ ๋ ๋๋ง ์ ๊ทผ ๋ฐฉ์์๋ ์๋ฒ ์ธก ๋ ๋๋ง(SSR)๊ณผ ํด๋ผ์ด์ธํธ ์ธก ๋ ๋๋ง(CSR)์ด ์์ต๋๋ค. ์ด ๊ฐ์ด๋๋ SSR๊ณผ CSR์ ์ฐจ์ด์ , ์ฅ์ , ๋จ์ ๋ฐ ์ฌ์ฉ ์ฌ๋ก๋ฅผ ์ข ํฉ์ ์ผ๋ก ์ค๋ช ํ์ฌ ์น ๊ฐ๋ฐ ํ๋ก์ ํธ์ ๋ํ ์ ๋ณด์ ์ ๊ฐํ ๊ฒฐ์ ์ ๋ด๋ฆด ์ ์๋๋ก ๋์ต๋๋ค.
๋ ๋๋ง ๊ธฐ๋ฒ ์ดํดํ๊ธฐ
๋ ๋๋ง์ ์ฝ๋(HTML, CSS, JavaScript)๋ฅผ ์น ๋ธ๋ผ์ฐ์ ์ ํ์๋๋ ์๊ฐ์ ํํ์ผ๋ก ๋ณํํ๋ ๊ณผ์ ์ ์๋ฏธํฉ๋๋ค. ์ด ๋ ๋๋ง ๊ณผ์ ์ด ๋ฐ์ํ๋ ์์น(์๋ฒ ๋๋ ํด๋ผ์ด์ธํธ(๋ธ๋ผ์ฐ์ ))์ ๋ฐ๋ผ SSR๊ณผ CSR์ด ๊ตฌ๋ถ๋ฉ๋๋ค.
ํด๋ผ์ด์ธํธ ์ธก ๋ ๋๋ง(CSR)์ด๋ ๋ฌด์์ธ๊ฐ?
ํด๋ผ์ด์ธํธ ์ธก ๋ ๋๋ง(CSR)์ ์๋ฒ์์ ์ด๊ธฐ HTML ๊ณจ๊ฒฉ(์ผ๋ฐ์ ์ผ๋ก ์ต์ํ์ HTML ๊ตฌ์กฐ์ JavaScript ํ์ผ ๋งํฌ๋ก ๊ตฌ์ฑ)์ ๋ ๋๋งํ๋ ๊ฒ์ ํฌํจํฉ๋๋ค. ๊ทธ๋ฐ ๋ค์ ๋ธ๋ผ์ฐ์ ๋ ์ด JavaScript ํ์ผ์ ๋ค์ด๋ก๋ํ๊ณ ์คํํ์ฌ ๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ(DOM)์ ๋์ ์ผ๋ก ๊ตฌ์ถํ๊ณ ์ฝํ ์ธ ๋ก ํ์ด์ง๋ฅผ ์ฑ์๋๋ค. ์ด ๊ณผ์ ์ ์ ์ ์ผ๋ก ์ฌ์ฉ์ ๋ธ๋ผ์ฐ์ ๋ด์ ํด๋ผ์ด์ธํธ ์ธก์์ ๋ฐ์ํฉ๋๋ค.
์์: React, Angular ๋๋ Vue.js๋ก ๊ตฌ์ถ๋ ๋จ์ผ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ (SPA)์ ์๊ฐํด ๋ณด์ธ์. ์ฌ์ฉ์๊ฐ ์น์ฌ์ดํธ๋ฅผ ๋ฐฉ๋ฌธํ๋ฉด ์๋ฒ๋ ๊ธฐ๋ณธ HTML ํ์ด์ง์ JavaScript ๋ฒ๋ค์ ๋ณด๋ ๋๋ค. ๊ทธ๋ฐ ๋ค์ ๋ธ๋ผ์ฐ์ ๋ JavaScript๋ฅผ ์คํํ๊ณ API์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ ๋ธ๋ผ์ฐ์ ๋ด์์ ์ ์ฒด ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋ ๋๋งํฉ๋๋ค.
์๋ฒ ์ธก ๋ ๋๋ง(SSR)์ด๋ ๋ฌด์์ธ๊ฐ?
์๋ฒ ์ธก ๋ ๋๋ง(SSR)์ ๋ค๋ฅธ ์ ๊ทผ ๋ฐฉ์์ ์ทจํฉ๋๋ค. ์๋ฒ๋ ์์ฒญ์ ์ฒ๋ฆฌํ๊ณ , JavaScript ์ฝ๋๋ฅผ ์คํํ๋ฉฐ, ํ์ด์ง์ ๋ํ ์์ ํ HTML ๋งํฌ์ ์ ์์ฑํฉ๋๋ค. ์ด๋ ๊ฒ ์์ ํ ๋ ๋๋ง๋ HTML์ ํด๋ผ์ด์ธํธ ๋ธ๋ผ์ฐ์ ๋ก ์ ์ก๋ฉ๋๋ค. ๋ธ๋ผ์ฐ์ ๋ ๋ฏธ๋ฆฌ ๋ ๋๋ง๋ HTML์ ๋จ์ํ ํ์ํ์ฌ ๋ ๋น ๋ฅธ ์ด๊ธฐ ๋ก๋ ์๊ฐ๊ณผ ํฅ์๋ SEO๋ฅผ ์ ๊ณตํฉ๋๋ค.
์์: Next.js(React), Nuxt.js(Vue.js) ๋๋ Angular Universal์ SSR์ ์ฌ์ฉํ๋ ์ ์์๊ฑฐ๋ ์น์ฌ์ดํธ๋ฅผ ์์ํด ๋ณด์ธ์. ์ฌ์ฉ์๊ฐ ์ ํ ํ์ด์ง๋ฅผ ์์ฒญํ๋ฉด ์๋ฒ๋ ์ ํ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ณ , ์ ํ ์ธ๋ถ ์ ๋ณด๊ฐ ํฌํจ๋ HTML์ ๋ ๋๋งํ ๋ค์, ์์ ํ HTML์ ๋ธ๋ผ์ฐ์ ๋ก ๋ณด๋ ๋๋ค. ๋ธ๋ผ์ฐ์ ๋ ์์ ํ ๋ ๋๋ง๋ ํ์ด์ง๋ฅผ ์ฆ์ ํ์ํฉ๋๋ค.
SSR๊ณผ CSR์ ์ฃผ์ ์ฐจ์ด์
๋ค์์ ์๋ฒ ์ธก ๋ ๋๋ง๊ณผ ํด๋ผ์ด์ธํธ ์ธก ๋ ๋๋ง์ ์ฃผ์ ์ฐจ์ด์ ์ ์์ฝํ ํ์ ๋๋ค.
| ํน์ง | ์๋ฒ ์ธก ๋ ๋๋ง(SSR) | ํด๋ผ์ด์ธํธ ์ธก ๋ ๋๋ง(CSR) |
|---|---|---|
| ๋ ๋๋ง ์์น | ์๋ฒ | ํด๋ผ์ด์ธํธ (๋ธ๋ผ์ฐ์ ) |
| ์ด๊ธฐ ๋ก๋ ์๊ฐ | ๋ ๋น ๋ฆ | ๋ ๋๋ฆผ |
| SEO | ๋ ์ข์ | ์ ์ฌ์ ์ผ๋ก ๋ ๋์จ (SEO๋ฅผ ์ํ ์ถ๊ฐ ๊ตฌ์ฑ ํ์) |
| ์ฒซ ๋ฒ์งธ ๋ฐ์ดํธ๊น์ง์ ์๊ฐ (TTFB) | ๋ ๋๋ฆผ | ๋ ๋น ๋ฆ |
| ์ฌ์ฉ์ ๊ฒฝํ | ๋ ๋น ๋ฅธ ์ด๊ธฐ ํ๋ฉด, ๋ ๋ถ๋๋ฌ์ด ์ฒด๊ฐ ์ฑ๋ฅ | ๋ ๋๋ฆฐ ์ด๊ธฐ ํ๋ฉด, ์ ์ฌ์ ์ผ๋ก ๋ ๋ถ๋๋ฌ์ด ํ์ ์ํธ์์ฉ |
| JavaScript ์์กด์ฑ | ๋ฎ์ | ๋์ |
| ์๋ฒ ๋ถํ | ๋ ๋์ | ๋ ๋ฎ์ |
| ๊ฐ๋ฐ ๋ณต์ก์ฑ | ์ ์ฌ์ ์ผ๋ก ๋ ๋์ (ํนํ ์ํ ๊ด๋ฆฌ ์) | ์ ์ฌ์ ์ผ๋ก ๋ ๊ฐ๋จํจ (ํ๋ ์์ํฌ์ ๋ฐ๋ผ ๋ค๋ฆ) |
| ํ์ฅ์ฑ | ๊ฐ๋ ฅํ ์๋ฒ ์ธํ๋ผ ํ์ | ์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ(CDN)๋ก ์ ํ์ฅ๋จ |
์๋ฒ ์ธก ๋ ๋๋ง(SSR)์ ์ฅ์ ๋ฐ ๋จ์
SSR์ ์ฅ์
- ํฅ์๋ SEO: ๊ฒ์ ์์ง ํฌ๋กค๋ฌ๋ ์์ ํ ๋ ๋๋ง๋ HTML ์ฝํ ์ธ ๋ฅผ ์ฝ๊ฒ ์ธ๋ฑ์ฑํ ์ ์์ด ๊ฒ์ ์์ง ์์๊ฐ ํฅ์๋ฉ๋๋ค. ์ด๋ ์ ๊ธฐ์ ํธ๋ํฝ์ ์์กดํ๋ ์น์ฌ์ดํธ์ ํนํ ์ค์ํฉ๋๋ค.
- ๋ ๋น ๋ฅธ ์ด๊ธฐ ๋ก๋ ์๊ฐ: ๋ธ๋ผ์ฐ์ ๊ฐ ์์ ํ ๋ ๋๋ง๋ ํ์ด์ง๋ฅผ ์์ ํ๋ฏ๋ก ์ฌ์ฉ์๋ ์ฝํ ์ธ ๋ฅผ ๋ ๋นจ๋ฆฌ ๋ณผ ์ ์์ด ์ฒด๊ฐ ์ฑ๋ฅ์ด ํฅ์๋๊ณ ์ดํ๋ฅ ์ด ๊ฐ์ํฉ๋๋ค. ์ด๋ ์ธํฐ๋ท ์ฐ๊ฒฐ์ด ๋๋ฆฌ๊ฑฐ๋ ๋ชจ๋ฐ์ผ ์ฅ์น๋ฅผ ์ฌ์ฉํ๋ ์ฌ์ฉ์์๊ฒ ํนํ ์ค์ํฉ๋๋ค.
- ์์ ๋ฏธ๋์ด ๊ณต์ ์ ๋ ์ ํฉ: ์์ ๋ฏธ๋์ด ํ๋ซํผ์ ํ์ด์ง๊ฐ ๊ณต์ ๋ ๋ ๋ฉํ๋ฐ์ดํฐ๋ฅผ ์ฝ๊ฒ ์ถ์ถํ๊ณ ํ๋ถํ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ํ์ํ์ฌ ์ฌ์ฉ์ ์ฐธ์ฌ๋ฅผ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- ์ ๊ทผ์ฑ: ์์ ํ ๋ ๋๋ง๋ HTML์ ์ผ๋ฐ์ ์ผ๋ก ์คํฌ๋ฆฐ ๋ฆฌ๋๊ฐ ์ฝํ ์ธ ๋ฅผ ์ฝ๊ฒ ํด์ํ ์ ์์ผ๋ฏ๋ก ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์์๊ฒ ๋ ์ ๊ทผ์ฑ์ด ๋์ต๋๋ค.
SSR์ ๋จ์
- ์ฆ๊ฐ๋ ์๋ฒ ๋ถํ: ์๋ฒ์์ ๊ฐ ํ์ด์ง๋ฅผ ๋ ๋๋งํ๋ฉด ๋ ๋ง์ ์๋ฒ ๋ฆฌ์์ค๊ฐ ์๋ชจ๋์ด ์๋ฒ ๋น์ฉ์ด ์ฆ๊ฐํ๊ณ ํ์ฅ์ฑ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค.
- ๋ ๋๋ฆฐ ์ฒซ ๋ฒ์งธ ๋ฐ์ดํธ๊น์ง์ ์๊ฐ(TTFB): ์๋ฒ๊ฐ HTML์ ๋ณด๋ด๊ธฐ ์ ์ ๋ ๋๋ง ํ๋ก์ธ์ค๋ฅผ ์ํํด์ผ ํ๋ฏ๋ก CSR์ ๋นํด TTFB๊ฐ ์ฆ๊ฐํ ์ ์์ต๋๋ค.
- ์ฆ๊ฐ๋ ๊ฐ๋ฐ ๋ณต์ก์ฑ: SSR ๊ตฌํ์ ํนํ ์ํ ๊ด๋ฆฌ, ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ๋ฐ ์๋ฒ ์ธก ์ฝ๋ ์คํ์ ์ฒ๋ฆฌํ ๋ ๋ ๋ณต์กํ ์ ์์ต๋๋ค.
- ์ฝ๋ ๊ณต์ ์ ์ด๋ ค์: ํด๋ผ์ด์ธํธ์ ์๋ฒ ๊ฐ์ ์ฝ๋๋ฅผ ๊ณต์ ํ๋ ๊ฒ์ ํ๊ฒฝ๋ณ ์ข ์์ฑ ๋ฐ ๊ตฌ์ฑ์ ์ ์คํ๊ฒ ๊ณ ๋ คํด์ผ ํ๋ฏ๋ก ์ด๋ ค์ธ ์ ์์ต๋๋ค.
ํด๋ผ์ด์ธํธ ์ธก ๋ ๋๋ง(CSR)์ ์ฅ์ ๋ฐ ๋จ์
CSR์ ์ฅ์
- ๋ ๋น ๋ฅธ ์ฒซ ๋ฒ์งธ ๋ฐ์ดํธ๊น์ง์ ์๊ฐ(TTFB): ์๋ฒ๋ ์ต์ํ์ HTML ๊ณจ๊ฒฉ๊ณผ JavaScript ๋ฒ๋ค์ ๋น ๋ฅด๊ฒ ์ ์กํ์ฌ ๋ ๋น ๋ฅธ TTFB๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ํฅ์๋ ์ํธ์์ฉ์ฑ: ์ด๊ธฐ ํ์ด์ง๊ฐ ๋ก๋๋๋ฉด ํ์ ์ํธ์์ฉ์ ์ผ๋ฐ์ ์ผ๋ก ๋ ๋น ๋ฅด๊ณ ๋ถ๋๋ฌ์์ง๋๋ค. ์ด๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ฒ ์์ฒญ ์์ด ์ ๋ฐ์ดํธ๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ๋๋ฌธ์ ๋๋ค.
- ๊ฐ์ํ๋ ๊ฐ๋ฐ: CSR์ ํนํ ๋ณต์กํ ํด๋ผ์ด์ธํธ ์ธก ๋ก์ง์ ๊ฐ์ง ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝ์ฐ ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ธ๋ผ์ฐ์ ๋ด์์ ์คํ๋๋ฏ๋ก ๊ฐ๋ฐ์ด ๋ ๊ฐ๋จํ ์ ์์ต๋๋ค.
- ํ์ฅ์ฑ: CSR ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ(CDN)์ ์ ํ์ฅ๋ฉ๋๋ค. ์ ์ ์์ฐ์ ์บ์ํ๊ณ ์ง๋ฆฌ์ ์ผ๋ก ๋ถ์ฐ๋ ์๋ฒ์์ ์ ๊ณตํ ์ ์๊ธฐ ๋๋ฌธ์ ๋๋ค.
CSR์ ๋จ์
- ๋ ๋๋ฆฐ ์ด๊ธฐ ๋ก๋ ์๊ฐ: ์ฌ์ฉ์๋ ๋ธ๋ผ์ฐ์ ๊ฐ ํ์ด์ง๋ฅผ ๋ ๋๋งํ๊ธฐ ์ํด JavaScript ์ฝ๋๋ฅผ ๋ค์ด๋ก๋ํ๊ณ ์คํํด์ผ ํ๋ฏ๋ก ์ฝํ ์ธ ๋ฅผ ๋ณด๊ธฐ ์ ์ ์ง์ฐ์ ๊ฒฝํํฉ๋๋ค.
- SEO ๋ฌธ์ : ๊ฒ์ ์์ง ํฌ๋กค๋ฌ๋ JavaScript์ ์ํด ๋์ ์ผ๋ก ๋ ๋๋ง๋ ์ฝํ ์ธ ๋ฅผ ์ธ๋ฑ์ฑํ๋ ๋ฐ ์ด๋ ค์์ ๊ฒช์ ์ ์์ผ๋ฉฐ, ์ด๋ ๊ฒ์ ์์ง ์์์ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. Google ๋ฐ ๊ธฐํ ๊ฒ์ ์์ง์ JavaScript๋ก ๋ ๋๋ง๋ ์ฝํ ์ธ ๋ฅผ ํฌ๋กค๋งํ๋ ๊ธฐ๋ฅ์ ๊ฐ์ ํ์ง๋ง, SSR์ ์ผ๋ฐ์ ์ผ๋ก SEO์ ๋ ์ ๋ขฐํ ์ ์๋ ์๋ฃจ์ ์ ์ ๊ณตํฉ๋๋ค.
- ์ด๊ธฐ ๋ก๋๋ฅผ ์ํ ์ด์ ํ ์ฌ์ฉ์ ๊ฒฝํ: ์ด๊ธฐ ๋ก๋ ์ง์ฐ์ ํนํ ์ธํฐ๋ท ์ฐ๊ฒฐ์ด ๋๋ฆฌ๊ฑฐ๋ ๋ชจ๋ฐ์ผ ์ฅ์น๋ฅผ ์ฌ์ฉํ๋ ์ฌ์ฉ์์๊ฒ ์ด์ ํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ด๋ํ ์ ์์ต๋๋ค.
- ์ ๊ทผ์ฑ ๋ฌธ์ : CSR ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๊ทผ์ฑ์ ๋ณด์ฅํ๋ ค๋ฉด ARIA ์์ฑ ๋ฐ ์๋งจํฑ HTML์ ๋ํ ์ ์คํ ์ฃผ์๊ฐ ํ์ํฉ๋๋ค. ์คํฌ๋ฆฐ ๋ฆฌ๋๊ฐ ๋์ ์ผ๋ก ์์ฑ๋ ์ฝํ ์ธ ๋ฅผ ํด์ํ์ง ๋ชปํ ์ ์๊ธฐ ๋๋ฌธ์ ๋๋ค.
SSR vs. CSR ์ ํ ์๊ธฐ
SSR๊ณผ CSR ์ค ์ด๋ค ๊ฒ์ ์ ํํ ์ง๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ํน์ ์๊ตฌ ์ฌํญ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋๋ค. ๋ค์์ ๊ฒฐ์ ์ ๋์์ด ๋๋ ๊ฐ์ด๋์ ๋๋ค.
๋ค์๊ณผ ๊ฐ์ ๊ฒฝ์ฐ ์๋ฒ ์ธก ๋ ๋๋ง(SSR)์ ์ ํํ์ธ์:
- SEO๊ฐ ์ค์ํ ๊ฒฝ์ฐ: ์ ๊ธฐ์ ํธ๋ํฝ์ด ์ฃผ์ ์ฌ์ฉ์ ์ ์ ์์ด๋ผ๋ฉด ๊ฒ์ ์์ง ์์ ํฅ์์ ์ํด SSR์ด ํ์์ ์ ๋๋ค.
- ๋น ๋ฅธ ์ด๊ธฐ ๋ก๋ ์๊ฐ์ด ์ค์ํ ๊ฒฝ์ฐ: ์ฌ์ฉ์์๊ฒ ์ฝํ ์ธ ์ ๋น ๋ฅธ ์ด๊ธฐ ํ๋ฉด์ ์ ๊ณตํด์ผ ํ๋ ๊ฒฝ์ฐ SSR์ด ์ ํธ๋๋ ์ ํ์ ๋๋ค.
- ์ฝํ ์ธ ๊ฐ ๋๋ถ๋ถ ์ ์ ์ธ ๊ฒฝ์ฐ: ์น์ฌ์ดํธ๊ฐ ์ฃผ๋ก ์์ฃผ ๋ณ๊ฒฝ๋์ง ์๋ ์ ์ ์ฝํ ์ธ ๋ฅผ ํ์ํ๋ ๊ฒฝ์ฐ SSR์ ์ฑ๋ฅ๊ณผ SEO๋ฅผ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- ์์ ๋ฏธ๋์ด ๊ณต์ ๊ฐ ์ค์ํ ๊ฒฝ์ฐ: SSR์ ์์ ๋ฏธ๋์ด ํ๋ซํผ์ด ํ์ด์ง๊ฐ ๊ณต์ ๋ ๋ ๋ฉํ๋ฐ์ดํฐ๋ฅผ ์ฝ๊ฒ ์ถ์ถํ๊ณ ํ๋ถํ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ํ์ํ๋๋ก ๋ณด์ฅํฉ๋๋ค.
- ์ ๊ทผ์ฑ์ด ์ฐ์ ์ธ ๊ฒฝ์ฐ: SSR์ ์ผ๋ฐ์ ์ผ๋ก ์ฆ์ ์ฌ์ฉ ๊ฐ๋ฅํ ๋ ๋์ ์ ๊ทผ์ฑ์ ์ ๊ณตํ์ฌ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๊ฐ ์ฝํ ์ธ ์ ๋ ์ฝ๊ฒ ์ ๊ทผํ ์ ์๋๋ก ํฉ๋๋ค.
๋ค์๊ณผ ๊ฐ์ ๊ฒฝ์ฐ ํด๋ผ์ด์ธํธ ์ธก ๋ ๋๋ง(CSR)์ ์ ํํ์ธ์:
- SEO๊ฐ ๋ ์ค์ํ ๊ฒฝ์ฐ: ๋ก๊ทธ์ธ ๋ค์ ๋ด๋ถ ๋์๋ณด๋ ๋๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ๊ฐ์ด SEO๊ฐ ์ฃผ์ ๊ด์ฌ์ฌ๊ฐ ์๋ ๊ฒฝ์ฐ CSR๋ก ์ถฉ๋ถํ ์ ์์ต๋๋ค.
- ์ ํ๋ฆฌ์ผ์ด์ ์ด ๊ณ ๋๋ก ์ํธ์์ฉ์ ์ธ ๊ฒฝ์ฐ: ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง์ ํด๋ผ์ด์ธํธ ์ธก ์ํธ์์ฉ ๋ฐ ๋ฐ์ดํฐ ์กฐ์์ด ํ์ํ ๊ฒฝ์ฐ CSR์ ์ด๊ธฐ ๋ก๋ ํ ๋ ๋ถ๋๋ฌ์ด ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
- ์๋ฒ ๋ถํ๊ฐ ์ฐ๋ ค๋๋ ๊ฒฝ์ฐ: ์๋ฒ ๋ถํ๋ฅผ ์ต์ํํ๊ณ ํ์ฅ์ฑ์ ์ํด CDN์ ํ์ฉํ๋ ค๋ ๊ฒฝ์ฐ CSR์ด ์ข์ ์ ํ์ด ๋ ์ ์์ต๋๋ค.
- ์ ์ํ ํ๋กํ ํ์ดํ์ด ํ์ํ ๊ฒฝ์ฐ: CSR์ ํนํ ๋ณต์กํ ํด๋ผ์ด์ธํธ ์ธก ๋ก์ง์ ๊ฐ์ง ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝ์ฐ ๊ฐ๋ฐ ๋ฐ ํ๋กํ ํ์ดํ์ด ๋ ๋น ๋ฅผ ์ ์์ต๋๋ค.
- ์คํ๋ผ์ธ ๊ธฐ๋ฅ์ด ํ์ํ ๊ฒฝ์ฐ: ์๋น์ค ์์ปค๋ CSR ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ํจ๊ป ์ฌ์ฉํ์ฌ ์คํ๋ผ์ธ ๊ธฐ๋ฅ์ ์ ๊ณตํ์ฌ ์ฌ์ฉ์๊ฐ ์ธํฐ๋ท์ ์ฐ๊ฒฐ๋์ง ์์ ๊ฒฝ์ฐ์๋ ์ฝํ ์ธ ์ ์ ๊ทผํ ์ ์๋๋ก ํฉ๋๋ค.
ํ์ด๋ธ๋ฆฌ๋ ์ ๊ทผ ๋ฐฉ์: ๋ ๊ฐ์ง ์ฅ์ ๋ชจ๋ ํ์ฉํ๊ธฐ
๋ง์ ๊ฒฝ์ฐ, SSR๊ณผ CSR์ ์ฅ์ ์ ๊ฒฐํฉํ ํ์ด๋ธ๋ฆฌ๋ ์ ๊ทผ ๋ฐฉ์์ด ๊ฐ์ฅ ํจ๊ณผ์ ์ธ ์๋ฃจ์ ์ด ๋ ์ ์์ต๋๋ค. ์ด๋ ๋ค์๊ณผ ๊ฐ์ ๊ธฐ์ ์ ํตํด ๋ฌ์ฑํ ์ ์์ต๋๋ค:
- ์ฌ์ ๋ ๋๋ง(Pre-rendering): ํน์ ๊ฒฝ๋ก์ ๋ํด ๋น๋ ์์ ์ ์ ์ HTML ํ์ผ์ ์์ฑํ์ฌ SSR์ SEO ์ด์ ์ ์ ๊ณตํ๋ฉด์ ๋ฐํ์ ์ ์๋ฒ ๋ถํ๋ฅผ ์ต์ํํฉ๋๋ค.
- ํ์ด๋๋ ์ด์ (Hydration): ์ด๊ธฐ ํ์ด์ง ๋ก๋์ SSR์ ์ฌ์ฉํ ๋ค์, ํ์ ์ํธ์์ฉ์ ์ฒ๋ฆฌํ๊ธฐ ์ํด ํด๋ผ์ด์ธํธ ์ธก ์ ํ๋ฆฌ์ผ์ด์ ์ "ํ์ด๋๋ ์ด์ "ํ๋ ๊ฒ์ ๋๋ค. ์ด๋ฅผ ํตํด ๋น ๋ฅธ ์ด๊ธฐ ํ๋ฉด์ ์ ๊ณตํ๋ฉด์๋ CSR์ ์ํธ์์ฉ์ฑ์ ํ์ฉํ ์ ์์ต๋๋ค.
- ์ฆ๋ถ ์ ์ ์ฌ์์ฑ(ISR): Next.js์์ ์ ๊ณตํ๋ ์ด ๊ธฐ๋ฅ์ ํ์ด์ง๋ฅผ ์ ์ ์ผ๋ก ์์ฑํ ๋ค์, ์ค์ ๋ ๊ฐ๊ฒฉ ํ์ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์ ๋ฐ์ดํธํ ์ ์๋๋ก ํฉ๋๋ค. ์ด๋ SSR์ SEO ์ด์ ์ ์ ๊ณตํ๋ฉด์๋ ์ฝํ ์ธ ๋ฅผ ์ต์ ์ํ๋ก ์ ์งํฉ๋๋ค.
SSR ๋ฐ CSR์ ์ํ ํ๋ ์์ํฌ ๋ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
์ฌ๋ฌ ํ๋ ์์ํฌ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ SSR ๋ฐ CSR์ ๋ชจ๋ ์ง์ํ์ฌ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ด๋ฌํ ๋ ๋๋ง ๊ธฐ์ ์ ๋ ์ฝ๊ฒ ๊ตฌํํ ์ ์๋๋ก ํฉ๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ์ธ๊ธฐ ์๋ ์ต์ ์ ๋๋ค.
- React: ์ฌ์ฉ์ ์ธํฐํ์ด์ค ๊ตฌ์ถ์ ์ํ ์ธ๊ธฐ ์๋ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค. Next.js๋ SSR ๋ฐ ์ ์ ์ฌ์ดํธ ์์ฑ์ ์ํ ๋ด์ฅ ์ง์์ ์ ๊ณตํ๋ React ํ๋ ์์ํฌ์ ๋๋ค.
- Angular: ๋ณต์กํ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ตฌ์ถ์ ์ํ ํฌ๊ด์ ์ธ ํ๋ ์์ํฌ์ ๋๋ค. Angular Universal์ Angular ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ SSR์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
- Vue.js: ์ฌ์ฉ์ ์ธํฐํ์ด์ค ๊ตฌ์ถ์ ์ํ ์ ์ง์ ์ธ JavaScript ํ๋ ์์ํฌ์ ๋๋ค. Nuxt.js๋ SSR ๋ฐ ์ ์ ์ฌ์ดํธ ์์ฑ์ ์ํ ๋ด์ฅ ์ง์์ ์ ๊ณตํ๋ Vue.js ํ๋ ์์ํฌ์ ๋๋ค.
- Svelte: ์ ์ธ์ ์ปดํฌ๋ํธ๋ฅผ DOM์ ์์ ์ ์ผ๋ก ์ ๋ฐ์ดํธํ๋ ๊ณ ํจ์จ ๋ฐ๋๋ผ JavaScript๋ก ๋ณํํ๋ ์ปดํ์ผ๋ฌ์ ๋๋ค. SvelteKit์ SSR ๋ฐ ์ ์ ์ฌ์ดํธ ์์ฑ์ ์ง์ํฉ๋๋ค.
๊ตญ์ ์ ๊ณ ๋ ค ์ฌํญ
๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์ํ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐํ ๋๋ SSR ๋ฐ CSR๊ณผ ๊ด๋ จ๋ ๋ค์ ์์๋ฅผ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
- ์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ(CDNs): CDN์ ์ฌ์ฉํ๋ฉด ์ ์ ์์ฐ์ ์บ์ํ๊ณ ์ง๋ฆฌ์ ์ผ๋ก ๋ถ์ฐ๋ ์๋ฒ์์ ์ ๊ณตํ์ฌ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ๋๊ธฐ ์๊ฐ์ ์ค์์ผ๋ก์จ SSR ๋ฐ CSR ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- ํ์งํ: ์ฝํ ์ธ ๋ฒ์ญ ๋ฐ ๋ค์ํ ์ง์ญ ์ค์ ์ ๋ํ ์ ์๊ณผ ๊ฐ์ ํ์งํ ์ ๋ต์ ๊ตฌํํ๋ ๊ฒ์ ํด์ธ ์ฌ์ฉ์์๊ฒ ๊ธ์ ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ฐ ์ค์ํฉ๋๋ค. SSR์ ์๋ฒ์์ ์ ์ ํ ์ธ์ด ๋ฒ์ ์ ๋ ๋๋งํ์ฌ ํ์งํ๋ฅผ ๋จ์ํํ ์ ์์ต๋๋ค.
- ๊ตญ์ SEO: hreflang ํ๊ทธ ๋ฐ ๊ธฐํ ๊ตญ์ SEO ๊ธฐ์ ์ ์ฌ์ฉํ๋ฉด ๊ฒ์ ์์ง์ด ์น ํ์ด์ง์ ์ธ์ด ๋ฐ ์ง์ญ ํ๊ฒํ ์ ์ดํดํ๋ ๋ฐ ๋์์ด ๋์ด ๋ค์ํ ๊ตญ๊ฐ์์ ๊ฒ์ ์์ง ์์๋ฅผ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- ๋คํธ์ํฌ ์กฐ๊ฑด: ์ ์ธ๊ณ์ ์ผ๋ก ๋คํธ์ํฌ ์กฐ๊ฑด์ด ์๋นํ ๋ค์ํ๋ค๋ ์ ์ ๊ณ ๋ คํด์ผ ํฉ๋๋ค. ํนํ ๊ฐ๋ฐ๋์๊ตญ์์๋ ๋๋ฆฐ ์ธํฐ๋ท ์ฐ๊ฒฐ์์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ ์๋ํ๋๋ก ์ต์ ํํ์ธ์. SSR์ ๋ค์ด๋ก๋ ๋ฐ ์คํํด์ผ ํ๋ JavaScript์ ์์ ์ค์ฌ์ฃผ๋ฏ๋ก ๋๋ฆฐ ์ฐ๊ฒฐ์ ์ฌ์ฉํ๋ ์ฌ์ฉ์์๊ฒ ์ ๋ฆฌํ ์ ์์ต๋๋ค.
์ฑ๋ฅ ์ต์ ํ ์ ๋ต
SSR์ ์ ํํ๋ CSR์ ์ ํํ๋ , ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ์ต์ ํํ๋ ๊ฒ์ด ํ์์ ์ ๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ์ผ๋ฐ์ ์ธ ์ต์ ํ ์ ๋ต์ ๋๋ค.
- ์ฝ๋ ๋ถํ (Code Splitting): JavaScript ์ฝ๋๋ฅผ ๋ ์์ ์ฒญํฌ๋ก ๋ถํ ํ์ฌ ํ์์ ๋ฐ๋ผ ๋ก๋ํ ์ ์๋๋ก ํ์ฌ ์ด๊ธฐ ๋ค์ด๋ก๋ ํฌ๊ธฐ๋ฅผ ์ค์ด๊ณ ๋ก๋ ์๊ฐ์ ๊ฐ์ ํฉ๋๋ค.
- ์ด๋ฏธ์ง ์ต์ ํ: ์๊ฐ์ ํ์ง์ ํฌ์ํ์ง ์๊ณ ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ด๊ธฐ ์ํด ์ด๋ฏธ์ง๋ฅผ ์์ถํ๊ณ ์ต์ ํํฉ๋๋ค. ์ฌ์ฉ์์ ์ฅ์น ๋ฐ ํ๋ฉด ํด์๋์ ๋ฐ๋ผ ๋ค๋ฅธ ์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ์ ๊ณตํ๊ธฐ ์ํด ๋ฐ์ํ ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํฉ๋๋ค.
- ์บ์ฑ: ์์ฃผ ์ ๊ทผํ๋ ๋ฐ์ดํฐ ๋ฐ ์์ฐ์ ์ ์ฅํ๋ ์บ์ฑ ์ ๋ต์ ๊ตฌํํ์ฌ ์๋ฒ์์ ๋ฐ๋ณต์ ์ผ๋ก ๊ฐ์ ธ์ฌ ํ์๋ฅผ ์ค์ ๋๋ค. ์ด๋ ๋ธ๋ผ์ฐ์ ์์ค, ์๋ฒ ์์ค ๋ฐ CDN์ ์ฌ์ฉํ์ฌ ์ํํ ์ ์์ต๋๋ค.
- ์ถ์(Minification): ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ด๊ธฐ ์ํด ์ฝ๋์์ ๋ถํ์ํ ๋ฌธ์ ๋ฐ ๊ณต๋ฐฑ์ ์ ๊ฑฐํฉ๋๋ค.
- ์์ถ(Compression): gzip ๋๋ Brotli์ ๊ฐ์ ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ์ฝ๋๋ฅผ ์์ถํ์ฌ ํ์ผ ์ ์ก ํฌ๊ธฐ๋ฅผ ์ค์ ๋๋ค.
- ์ง์ฐ ๋ก๋ฉ(Lazy Loading): ํ๋ฉด์ ์ฒ์์๋ ๋ณด์ด์ง ์๋ ์ด๋ฏธ์ง์ ๊ฐ์ด ์ค์ํ์ง ์์ ๋ฆฌ์์ค์ ๋ก๋๋ฅผ ํ์ํ ๋๊น์ง ์ฐ๊ธฐํฉ๋๋ค.
- HTTP/2: ๋ ๋น ๋ฅธ ๋ฐ์ดํฐ ์ ์ก ๋ฐ ํฅ์๋ ์ฑ๋ฅ์ ์ํด HTTP/2 ํ๋กํ ์ฝ์ ์ฌ์ฉํฉ๋๋ค.
๊ฒฐ๋ก
์๋ฒ ์ธก ๋ ๋๋ง(SSR)๊ณผ ํด๋ผ์ด์ธํธ ์ธก ๋ ๋๋ง(CSR) ์ค ํ๋๋ฅผ ์ ํํ๋ ๊ฒ์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ, SEO ๋ฐ ์ฌ์ฉ์ ๊ฒฝํ์ ํฌ๊ฒ ์ํฅ์ ๋ฏธ์น ์ ์๋ ์ค์ํ ๊ฒฐ์ ์ ๋๋ค. ๊ฐ ์ ๊ทผ ๋ฐฉ์์ ์ฅ๋จ์ ์ ์ดํดํจ์ผ๋ก์จ ํ๋ก์ ํธ์ ํน์ ์๊ตฌ ์ฌํญ์ ๋ฐ๋ผ ์ ๋ณด์ ์ ๊ฐํ ๊ฒฐ์ ์ ๋ด๋ฆด ์ ์์ต๋๋ค. ์ต์์ ๊ฒฐ๊ณผ๋ฅผ ์ํด SSR๊ณผ CSR์ ์ฅ์ ์ ๊ฒฐํฉํ ํ์ด๋ธ๋ฆฌ๋ ์ ๊ทผ ๋ฐฉ์์ ๊ณ ๋ คํด ๋ณด์ธ์.
์ฌ์ฉ์์ ์์น๋ ์ฅ์น์ ๊ด๊ณ์์ด ์ํํ๊ณ ๋งค๋ ฅ์ ์ธ ๊ฒฝํ์ ๋ณด์ฅํ๊ธฐ ์ํด ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ์ง์์ ์ผ๋ก ๋ชจ๋ํฐ๋งํ๊ณ ์ต์ ํํ๋ ๊ฒ์ ์์ง ๋ง์ธ์.