๋ฆฌ์กํธ ์๋ฒ ์ปดํฌ๋ํธ, ์คํธ๋ฆฌ๋ฐ, ์ ํ์ ํ์ด๋๋ ์ด์ ์ ํ์ฉํ์ฌ ๋ ๋น ๋ฅด๊ณ ํจ์จ์ ์ธ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์. ์ด ๊ธฐ์ ๋ค์ด ์ฑ๋ฅ๊ณผ ์ฌ์ฉ์ ๊ฒฝํ์ ์ด๋ป๊ฒ ํฅ์์ํค๋์ง ์ค๋ช ํฉ๋๋ค.
๋ฆฌ์กํธ ์๋ฒ ์ปดํฌ๋ํธ: ์คํธ๋ฆฌ๋ฐ๊ณผ ์ ํ์ ํ์ด๋๋ ์ด์ - ์ข ํฉ ๊ฐ์ด๋
๋ฆฌ์กํธ ์๋ฒ ์ปดํฌ๋ํธ(RSC)๋ ์ฐ๋ฆฌ๊ฐ ๋ฆฌ์กํธ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐฉ์์ ์์ด ํจ๋ฌ๋ค์์ ์ ํ์ ์๋ฏธํ๋ฉฐ, ์ฑ๋ฅ๊ณผ ์ฌ์ฉ์ ๊ฒฝํ์ ํฌ๊ฒ ๊ฐ์ ํฉ๋๋ค. ์ปดํฌ๋ํธ ๋ ๋๋ง์ ์๋ฒ๋ก ์ฎ๊น์ผ๋ก์จ RSC๋ ๋ ๋น ๋ฅธ ์ด๊ธฐ ํ์ด์ง ๋ก๋, ๊ฐ์๋ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ์๋ฐ์คํฌ๋ฆฝํธ, ๊ทธ๋ฆฌ๊ณ ํฅ์๋ SEO๋ฅผ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. ์ด ๊ฐ์ด๋๋ RSC์ ๋ํ ํฌ๊ด์ ์ธ ๊ฐ์๋ฅผ ์ ๊ณตํ๋ฉฐ, ์คํธ๋ฆฌ๋ฐ๊ณผ ์ ํ์ ํ์ด๋๋ ์ด์ ์ ๊ฐ๋ ์ ํ๊ตฌํ๊ณ ํ๋ ์น ๊ฐ๋ฐ์์์ ์ค์ ์ ์ฉ ์ฌ๋ก๋ฅผ ๋ณด์ฌ์ค๋๋ค.
๋ฆฌ์กํธ ์๋ฒ ์ปดํฌ๋ํธ๋ ๋ฌด์์ธ๊ฐ?
์ ํต์ ์ผ๋ก ๋ฆฌ์กํธ ์ ํ๋ฆฌ์ผ์ด์ ์ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ๋ ๋๋ง(CSR)์ ํฌ๊ฒ ์์กดํฉ๋๋ค. ๋ธ๋ผ์ฐ์ ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฒ๋ค์ ๋ค์ด๋ก๋ํ๊ณ ์คํํ ๋ค์ UI๋ฅผ ๋ ๋๋งํฉ๋๋ค. ์ด ๊ณผ์ ์ ํนํ ๋๋ฆฐ ๋คํธ์ํฌ๋ ์ฅ์น์์ ์ง์ฐ์ ์ ๋ฐํ ์ ์์ต๋๋ค. ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง(SSR)์ ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ๋์ ๋์์ผ๋ฉฐ, ์ด๊ธฐ HTML์ด ์๋ฒ์์ ๋ ๋๋ง๋์ด ํด๋ผ์ด์ธํธ๋ก ์ ์ก๋์ด ์ฒซ ์ฝํ ์ธ ํ์ธํธ(FCP)๋ฅผ ๊ฐ์ ํฉ๋๋ค. ๊ทธ๋ฌ๋ SSR์ ์ฌ์ ํ ํด๋ผ์ด์ธํธ์์ ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ ํ์ด๋๋ ์ด์ ํด์ผ ํ๋ฏ๋ก ์ฐ์ฐ ๋น์ฉ์ด ๋ง์ด ๋ค ์ ์์ต๋๋ค.
๋ฆฌ์กํธ ์๋ฒ ์ปดํฌ๋ํธ๋ ๋ค๋ฅธ ์ ๊ทผ๋ฒ์ ์ ๊ณตํฉ๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ ํน์ ๋ถ๋ถ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ํด๋ผ์ด์ธํธ์ ๋ณด๋ด์ง ์๊ณ ์๋ฒ์์ ์ง์ ๋ ๋๋งํ ์ ์๊ฒ ํด์ค๋๋ค. ์ด๋ ๋ค์๊ณผ ๊ฐ์ ๋ช ๊ฐ์ง ์ฃผ์ ์ด์ ์ ๊ฐ์ ธ์ต๋๋ค:
- ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์: ๋ค์ด๋ก๋, ํ์ฑ, ์คํํ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์ค์ด๋ค์ด ์ด๊ธฐ ํ์ด์ง ๋ก๋๊ฐ ๋นจ๋ผ์ง๊ณ ํนํ ์ ์ฌ์ ์ฅ์น์์ ์ฑ๋ฅ์ด ํฅ์๋ฉ๋๋ค.
- ์ฑ๋ฅ ํฅ์: ์๋ฒ ์ปดํฌ๋ํธ๋ ๋ฐฑ์๋ ๋ฆฌ์์ค์ ์ง์ ์ ๊ทผํ ์ ์์ด ํด๋ผ์ด์ธํธ์ API ํธ์ถ ํ์์ฑ์ ์์ ๊ณ ์ง์ฐ ์๊ฐ์ ์ค์ ๋๋ค.
- SEO ๊ฐํ: ์๋ฒ์์ ๋ ๋๋ง๋ HTML์ ๊ฒ์ ์์ง์ ์ํด ์ฝ๊ฒ ์ธ๋ฑ์ฑ๋ ์ ์์ด ๋ ๋์ SEO ์์๋ก ์ด์ด์ง๋๋ค.
- ๊ฐ๋ฐ ๊ฐ์ํ: ๊ฐ๋ฐ์๋ ๋ณต์กํ ๋ฐ์ดํฐ ํ์นญ ์ ๋ต ์์ด ๋ฐฑ์๋ ๋ฆฌ์์ค์ ์ํํ๊ฒ ํตํฉ๋๋ ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ ์ ์์ต๋๋ค.
์๋ฒ ์ปดํฌ๋ํธ์ ์ฃผ์ ํน์ง:
- ์๋ฒ ์ ์ฉ ์คํ: ์๋ฒ ์ปดํฌ๋ํธ๋ ์๋ฒ์์๋ง ๋
์ ์ ์ผ๋ก ์คํ๋๋ฉฐ
window๋document์ ๊ฐ์ ๋ธ๋ผ์ฐ์ ํน์ API๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค. - ์ง์ ๋ฐ์ดํฐ ์ ๊ทผ: ์๋ฒ ์ปดํฌ๋ํธ๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค, ํ์ผ ์์คํ ๋ฐ ๊ธฐํ ๋ฐฑ์๋ ๋ฆฌ์์ค์ ์ง์ ์ ๊ทผํ ์ ์์ต๋๋ค.
- ์ ๋ก ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ์๋ฐ์คํฌ๋ฆฝํธ: ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฒ๋ค ํฌ๊ธฐ์ ๊ธฐ์ฌํ์ง ์์ต๋๋ค.
- ์ ์ธ์ ๋ฐ์ดํฐ ํ์นญ: ๋ฐ์ดํฐ ํ์นญ์ ์ปดํฌ๋ํธ ๋ด์์ ์ง์ ์ฒ๋ฆฌํ ์ ์์ด ์ฝ๋๊ฐ ๋ ๊น๋ํ๊ณ ์ดํดํ๊ธฐ ์ฌ์์ง๋๋ค.
์คํธ๋ฆฌ๋ฐ ์ดํดํ๊ธฐ
์คํธ๋ฆฌ๋ฐ์ ์๋ฒ๊ฐ ์ ์ฒด ํ์ด์ง๊ฐ ๋ ๋๋ง๋๊ธฐ๋ฅผ ๊ธฐ๋ค๋ฆฌ์ง ์๊ณ , UI์ ์ผ๋ถ๋ฅผ ์ฌ์ฉ ๊ฐ๋ฅํด์ง๋ ๋๋ก ํด๋ผ์ด์ธํธ๋ก ๋ณด๋ผ ์ ์๊ฒ ํ๋ ๊ธฐ์ ์ ๋๋ค. ์ด๋ ํนํ ์ฌ๋ฌ ๋ฐ์ดํฐ ์ข ์์ฑ์ด ์๋ ๋ณต์กํ ํ์ด์ง์ ๊ฒฝ์ฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฒด๊ฐ ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํต๋๋ค. ๋ง์น ๋น๋์ค ์คํธ๋ฆผ์ ์์ฒญํ๋ ๊ฒ๊ณผ ๊ฐ์ต๋๋ค. ๋น๋์ค ์ ์ฒด๊ฐ ๋ค์ด๋ก๋๋ ๋๊น์ง ๊ธฐ๋ค๋ฆด ํ์ ์์ด, ์ถฉ๋ถํ ๋ฐ์ดํฐ๊ฐ ์ฌ์ฉ ๊ฐ๋ฅํด์ง๋ฉด ๋ฐ๋ก ์์ฒญ์ ์์ํ ์ ์์ต๋๋ค.
๋ฆฌ์กํธ ์๋ฒ ์ปดํฌ๋ํธ์ ์คํธ๋ฆฌ๋ฐ์ ์๋ ๋ฐฉ์:
- ์๋ฒ๋ ์ ์ ์ฝํ ์ธ ์ ํ๋ ์ด์คํ๋ ์ปดํฌ๋ํธ๋ฅผ ํฌํจํ ์ ์๋ ํ์ด์ง์ ์ด๊ธฐ ์ ธ ๋ ๋๋ง์ ์์ํฉ๋๋ค.
- ๋ฐ์ดํฐ๊ฐ ์ฌ์ฉ ๊ฐ๋ฅํด์ง๋ฉด, ์๋ฒ๋ ํ์ด์ง์ ๋ค๋ฅธ ๋ถ๋ถ์ ๋ํ ๋ ๋๋ง๋ HTML์ ํด๋ผ์ด์ธํธ๋ก ์คํธ๋ฆฌ๋ฐํฉ๋๋ค.
- ํด๋ผ์ด์ธํธ๋ ์คํธ๋ฆฌ๋ฐ๋ ์ฝํ ์ธ ๋ก UI๋ฅผ ์ ์ง์ ์ผ๋ก ์ ๋ฐ์ดํธํ์ฌ ๋ ๋น ๋ฅด๊ณ ๋ฐ์์ฑ ์ข์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
์คํธ๋ฆฌ๋ฐ์ ์ด์ :
- ๋ ๋น ๋ฅธ TTFB(Time to First Byte): ์ด๊ธฐ HTML์ด ํด๋ผ์ด์ธํธ๋ก ํจ์ฌ ๋นจ๋ฆฌ ์ ์ก๋์ด ์ด๊ธฐ ๋ก๋ฉ ์๊ฐ์ ์ค์ ๋๋ค.
- ์ฒด๊ฐ ์ฑ๋ฅ ํฅ์: ์ ์ฒด ํ์ด์ง๊ฐ ์์ ํ ๋ ๋๋ง๋์ง ์์๋๋ผ๋ ์ฌ์ฉ์๋ ํ๋ฉด์ ์ฝํ ์ธ ๊ฐ ๋ ๋นจ๋ฆฌ ๋ํ๋๋ ๊ฒ์ ๋ด ๋๋ค.
- ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ: ์คํธ๋ฆฌ๋ฐ์ ๋ ๋งค๋ ฅ์ ์ด๊ณ ๋ฐ์์ฑ ์ข์ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ง๋ญ๋๋ค.
์คํธ๋ฆฌ๋ฐ ์์:
์์ ๋ฏธ๋์ด ํผ๋๋ฅผ ์์ํด ๋ณด์ธ์. ์คํธ๋ฆฌ๋ฐ์ ์ฌ์ฉํ๋ฉด ๊ธฐ๋ณธ ๋ ์ด์์๊ณผ ์ฒ์ ๋ช ๊ฐ์ ๊ฒ์๋ฌผ์ ์ฆ์ ๋ ๋๋งํ์ฌ ํด๋ผ์ด์ธํธ๋ก ๋ณด๋ผ ์ ์์ต๋๋ค. ์๋ฒ๊ฐ ๋ฐ์ดํฐ๋ฒ ์ด์ค์์ ๋ ๋ง์ ๊ฒ์๋ฌผ์ ๊ฐ์ ธ์ค๋ฉด, ์ด๋ค์ ํด๋ผ์ด์ธํธ๋ก ์คํธ๋ฆฌ๋ฐ๋์ด ํผ๋์ ์ถ๊ฐ๋ฉ๋๋ค. ์ด๋ฅผ ํตํด ์ฌ์ฉ์๋ ๋ชจ๋ ๊ฒ์๋ฌผ์ด ๋ก๋๋๊ธฐ๋ฅผ ๊ธฐ๋ค๋ฆฌ์ง ์๊ณ ํจ์ฌ ๋นจ๋ฆฌ ํผ๋๋ฅผ ํ์ํ๊ธฐ ์์ํ ์ ์์ต๋๋ค.
์ ํ์ ํ์ด๋๋ ์ด์
ํ์ด๋๋ ์ด์ ์ ์๋ฒ์์ ๋ ๋๋ง๋ HTML์ ํด๋ผ์ด์ธํธ์์ ์ํธ์์ฉ ๊ฐ๋ฅํ๊ฒ ๋ง๋๋ ๊ณผ์ ์ ๋๋ค. ์ ํต์ ์ธ SSR์์๋ ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ด ํ์ด๋๋ ์ด์ ๋๋๋ฐ, ์ด๋ ์๊ฐ์ด ๋ง์ด ๊ฑธ๋ฆฌ๋ ๊ณผ์ ์ผ ์ ์์ต๋๋ค. ๋ฐ๋ฉด, ์ ํ์ ํ์ด๋๋ ์ด์ ์ ์ํธ์์ฉ์ด ํ์ํ ์ปดํฌ๋ํธ๋ง ํ์ด๋๋ ์ด์ ํ ์ ์๊ฒ ํ์ฌ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋์ฑ ์ค์ด๊ณ ์ฑ๋ฅ์ ํฅ์์ํต๋๋ค. ์ด๋ ์ ์ ์ฝํ ์ธ ์ ์ํธ์์ฉ ์ฝํ ์ธ ๊ฐ ํผํฉ๋ ํ์ด์ง์ ํนํ ์ ์ฉํฉ๋๋ค.
์ ํ์ ํ์ด๋๋ ์ด์ ์ ์๋ ๋ฐฉ์:
- ์๋ฒ๋ ์ ์ฒด ํ์ด์ง์ ๋ํ ์ด๊ธฐ HTML์ ๋ ๋๋งํฉ๋๋ค.
- ํด๋ผ์ด์ธํธ๋ ๋ฒํผ, ํผ, ์ํธ์์ฉ ์์์ ๊ฐ์ ์ํธ์์ฉ ์ปดํฌ๋ํธ๋ง ์ ํ์ ์ผ๋ก ํ์ด๋๋ ์ด์ ํฉ๋๋ค.
- ์ ์ ์ปดํฌ๋ํธ๋ ํ์ด๋๋ ์ด์ ๋์ง ์์ ์ํ๋ก ๋จ์ ํด๋ผ์ด์ธํธ์์ ์คํ๋๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ์์ ์ค์ ๋๋ค.
์ ํ์ ํ์ด๋๋ ์ด์ ์ ์ด์ :
- ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์: ์คํํ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์ค์ด๋ค์ด ์ด๊ธฐ ํ์ด์ง ๋ก๋๊ฐ ๋นจ๋ผ์ง๊ณ ์ฑ๋ฅ์ด ํฅ์๋ฉ๋๋ค.
- TTI(Time to Interactive) ๊ฐ์ : ํ์ด์ง๊ฐ ์์ ํ ์ํธ์์ฉ ๊ฐ๋ฅํด์ง๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ด ์ค์ด๋ค์ด ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
- ์ต์ ํ๋ ๋ฆฌ์์ค ํ์ฉ: ํ์ํ ์ปดํฌ๋ํธ๋ง ํ์ด๋๋ ์ด์ ๋๋ฏ๋ก ํด๋ผ์ด์ธํธ์ ๋ฆฌ์์ค๊ฐ ๋ ํจ์จ์ ์ผ๋ก ์ฌ์ฉ๋ฉ๋๋ค.
์ ํ์ ํ์ด๋๋ ์ด์ ์์:
์ ์์๊ฑฐ๋ ์ํ ํ์ด์ง๋ฅผ ์๊ฐํด ๋ณด์ธ์. ์ํ ์ค๋ช , ์ด๋ฏธ์ง, ํ์ ์ ์ผ๋ฐ์ ์ผ๋ก ์ ์ ์ฝํ ์ธ ์ ๋๋ค. ๊ทธ๋ฌ๋ "์ฅ๋ฐ๊ตฌ๋์ ๋ด๊ธฐ" ๋ฒํผ๊ณผ ์๋ ์ ํ๊ธฐ๋ ์ํธ์์ฉ์ ์ ๋๋ค. ์ ํ์ ํ์ด๋๋ ์ด์ ์ ์ฌ์ฉํ๋ฉด "์ฅ๋ฐ๊ตฌ๋์ ๋ด๊ธฐ" ๋ฒํผ๊ณผ ์๋ ์ ํ๊ธฐ๋ง ํ์ด๋๋ ์ด์ ํ๋ฉด ๋๊ณ , ํ์ด์ง์ ๋๋จธ์ง ๋ถ๋ถ์ ํ์ด๋๋ ์ด์ ๋์ง ์์ ์ํ๋ก ๋จ์ ๋ก๋ฉ ์๊ฐ์ ๋จ์ถํ๊ณ ์ฑ๋ฅ์ ํฅ์์ํต๋๋ค.
์คํธ๋ฆฌ๋ฐ๊ณผ ์ ํ์ ํ์ด๋๋ ์ด์ ๊ฒฐํฉํ๊ธฐ
๋ฆฌ์กํธ ์๋ฒ ์ปดํฌ๋ํธ์ ์ง์ ํ ํ์ ์คํธ๋ฆฌ๋ฐ๊ณผ ์ ํ์ ํ์ด๋๋ ์ด์ ์ ๊ฒฐํฉํ๋ ๋ฐ ์์ต๋๋ค. ์ด๊ธฐ HTML์ ์คํธ๋ฆฌ๋ฐํ๊ณ ์ํธ์์ฉ ์ปดํฌ๋ํธ๋ง ์ ํ์ ์ผ๋ก ํ์ด๋๋ ์ด์ ํจ์ผ๋ก์จ ์๋นํ ์ฑ๋ฅ ํฅ์์ ๋ฌ์ฑํ๊ณ ์ง์ ์ผ๋ก ๋ฐ์์ฑ ์ข์ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ง๋ค ์ ์์ต๋๋ค.
์ฌ๋ฌ ์์ ฏ์ด ์๋ ๋์๋ณด๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์์ํด ๋ณด์ธ์. ์คํธ๋ฆฌ๋ฐ์ ์ฌ์ฉํ๋ฉด ๋์๋ณด๋์ ๊ธฐ๋ณธ ๋ ์ด์์์ ์ฆ์ ๋ ๋๋งํ์ฌ ํด๋ผ์ด์ธํธ๋ก ๋ณด๋ผ ์ ์์ต๋๋ค. ์๋ฒ๊ฐ ๊ฐ ์์ ฏ์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ฉด ๋ ๋๋ง๋ HTML์ ํด๋ผ์ด์ธํธ๋ก ์คํธ๋ฆฌ๋ฐํ๊ณ , ํด๋ผ์ด์ธํธ๋ ์ฐจํธ ๋ฐ ๋ฐ์ดํฐ ํ ์ด๋ธ๊ณผ ๊ฐ์ ์ํธ์์ฉ ์์ ฏ๋ง ์ ํ์ ์ผ๋ก ํ์ด๋๋ ์ด์ ํฉ๋๋ค. ์ด๋ฅผ ํตํด ์ฌ์ฉ์๋ ๋ชจ๋ ์์ ฏ์ด ๋ก๋๋๊ณ ํ์ด๋๋ ์ด์ ๋๊ธฐ๋ฅผ ๊ธฐ๋ค๋ฆฌ์ง ์๊ณ ํจ์ฌ ๋นจ๋ฆฌ ๋์๋ณด๋์ ์ํธ์์ฉ์ ์์ํ ์ ์์ต๋๋ค.
Next.js๋ฅผ ์ฌ์ฉํ ์ค์ ๊ตฌํ
Next.js๋ ๋ฆฌ์กํธ ์๋ฒ ์ปดํฌ๋ํธ, ์คํธ๋ฆฌ๋ฐ, ์ ํ์ ํ์ด๋๋ ์ด์ ์ ๋ด์ฅ ์ง์ํ๋ ์ธ๊ธฐ ์๋ ๋ฆฌ์กํธ ํ๋ ์์ํฌ๋ก, ์ด๋ฌํ ๊ธฐ์ ๋ค์ ํ๋ก์ ํธ์ ๋ ์ฝ๊ฒ ๊ตฌํํ ์ ์๋๋ก ํด์ค๋๋ค. Next.js 13 ๋ฐ ์ดํ ๋ฒ์ ์ RSC๋ฅผ ํต์ฌ ๊ธฐ๋ฅ์ผ๋ก ์ฑํํ์ต๋๋ค.
Next.js์์ ์๋ฒ ์ปดํฌ๋ํธ ์์ฑํ๊ธฐ:
๊ธฐ๋ณธ์ ์ผ๋ก Next.js ํ๋ก์ ํธ์ app ๋๋ ํ ๋ฆฌ์ ์๋ ์ปดํฌ๋ํธ๋ค์ ์๋ฒ ์ปดํฌ๋ํธ๋ก ์ทจ๊ธ๋ฉ๋๋ค. ํน๋ณํ ์ง์์ด๋ ์ด๋
ธํ
์ด์
์ ์ถ๊ฐํ ํ์๊ฐ ์์ต๋๋ค. ๋ค์์ ์์์
๋๋ค:
// app/components/MyServerComponent.js
import { getData } from './data';
async function MyServerComponent() {
const data = await getData();
return (
<div>
<h2>Data from Server</h2>
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
}
export default MyServerComponent;
์ด ์์์์ MyServerComponent๋ getData ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ์๋ฒ์์ ์ง์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ต๋๋ค. ์ด ์ปดํฌ๋ํธ๋ ์๋ฒ์์ ๋ ๋๋ง๋๊ณ , ๊ฒฐ๊ณผ HTML์ด ํด๋ผ์ด์ธํธ๋ก ์ ์ก๋ฉ๋๋ค.
Next.js์์ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ ์์ฑํ๊ธฐ:
ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ๋ ค๋ฉด ํ์ผ ์๋จ์ "use client" ์ง์์ด๋ฅผ ์ถ๊ฐํด์ผ ํฉ๋๋ค. ์ด๋ Next.js์๊ฒ ํด๋น ์ปดํฌ๋ํธ๋ฅผ ํด๋ผ์ด์ธํธ์์ ๋ ๋๋งํ๋๋ก ์ง์ํฉ๋๋ค. ํด๋ผ์ด์ธํธ ์ปดะฟะพ๋ํธ๋ ๋ธ๋ผ์ฐ์ ํน์ API๋ฅผ ์ฌ์ฉํ๊ณ ์ฌ์ฉ์ ์ํธ์์ฉ์ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค.
// app/components/MyClientComponent.js
"use client";
import { useState } from 'react';
function MyClientComponent() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
export default MyClientComponent;
์ด ์์์์ MyClientComponent๋ useState ํ
์ ์ฌ์ฉํ์ฌ ์ปดํฌ๋ํธ์ ์ํ๋ฅผ ๊ด๋ฆฌํฉ๋๋ค. ์ด ์ปดํฌ๋ํธ๋ ํด๋ผ์ด์ธํธ์์ ๋ ๋๋ง๋๋ฉฐ, ์ฌ์ฉ์๋ ์ด์ ์ํธ์์ฉํ ์ ์์ต๋๋ค.
์๋ฒ ๋ฐ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ ํผํฉํ๊ธฐ:
Next.js ์ ํ๋ฆฌ์ผ์ด์ ์์ ์๋ฒ ์ปดํฌ๋ํธ์ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ๋ฅผ ํผํฉํ ์ ์์ต๋๋ค. ์๋ฒ ์ปดํฌ๋ํธ๋ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ์ ธ์ ๋ ๋๋งํ ์ ์์ง๋ง, ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ๋ ์๋ฒ ์ปดํฌ๋ํธ๋ฅผ ์ง์ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค. ์๋ฒ ์ปดํฌ๋ํธ์์ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ๋ ค๋ฉด props๋ก ์ ๋ฌํ ์ ์์ต๋๋ค.
// app/page.js
import MyServerComponent from './components/MyServerComponent';
import MyClientComponent from './components/MyClientComponent';
async function Page() {
return (
<div>
<MyServerComponent />
<MyClientComponent />
</div>
);
}
export default Page;
์ด ์์์์ Page ์ปดํฌ๋ํธ๋ MyServerComponent์ MyClientComponent๋ฅผ ๋ชจ๋ ๋ ๋๋งํ๋ ์๋ฒ ์ปดํฌ๋ํธ์
๋๋ค.
์๋ฒ ์ปดํฌ๋ํธ์์ ๋ฐ์ดํฐ ํ์นญํ๊ธฐ:
์๋ฒ ์ปดํฌ๋ํธ๋ ํด๋ผ์ด์ธํธ์ API ํธ์ถ ์์ด ๋ฐฑ์๋ ๋ฆฌ์์ค์ ์ง์ ์ ๊ทผํ ์ ์์ต๋๋ค. async/await ๊ตฌ๋ฌธ์ ์ฌ์ฉํ์ฌ ์ปดํฌ๋ํธ ๋ด์์ ์ง์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค.
// app/components/MyServerComponent.js
async function getData() {
const res = await fetch('https://api.example.com/data');
if (!res.ok) {
throw new Error('Failed to fetch data');
}
return res.json();
}
async function MyServerComponent() {
const data = await getData();
return (
<div>
<h2>Data from Server</h2>
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
}
export default MyServerComponent;
์ด ์์์์ getData ํจ์๋ ์ธ๋ถ API์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ต๋๋ค. MyServerComponent๋ getData ํจ์์ ๊ฒฐ๊ณผ๋ฅผ ๊ธฐ๋ค๋ ธ๋ค๊ฐ UI์ ๋ฐ์ดํฐ๋ฅผ ๋ ๋๋งํฉ๋๋ค.
์ค์ ์์ ๋ฐ ์ฌ์ฉ ์ฌ๋ก
๋ฆฌ์กํธ ์๋ฒ ์ปดํฌ๋ํธ, ์คํธ๋ฆฌ๋ฐ, ์ ํ์ ํ์ด๋๋ ์ด์ ์ ๋ค์๊ณผ ๊ฐ์ ์ ํ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ํนํ ์ ํฉํฉ๋๋ค:
- ์ ์์๊ฑฐ๋ ์น์ฌ์ดํธ: ์ํ ํ์ด์ง, ์นดํ ๊ณ ๋ฆฌ ํ์ด์ง, ์ผํ ์นดํธ๋ ๋ ๋น ๋ฅธ ์ด๊ธฐ ํ์ด์ง ๋ก๋์ ํฅ์๋ ์ฑ๋ฅ์ ์ด์ ์ ๋๋ฆด ์ ์์ต๋๋ค.
- ์ฝํ ์ธ ์ค์ฌ ์น์ฌ์ดํธ: ๋ธ๋ก๊ทธ, ๋ด์ค ์น์ฌ์ดํธ, ๋ฌธ์ ์ฌ์ดํธ๋ ์คํธ๋ฆฌ๋ฐ์ ํ์ฉํ์ฌ ์ฝํ ์ธ ๋ฅผ ๋ ๋นจ๋ฆฌ ์ ๋ฌํ๊ณ SEO๋ฅผ ๊ฐ์ ํ ์ ์์ต๋๋ค.
- ๋์๋ณด๋ ๋ฐ ๊ด๋ฆฌ์ ํจ๋: ์ฌ๋ฌ ์์ ฏ์ด ์๋ ๋ณต์กํ ๋์๋ณด๋๋ ์ ํ์ ํ์ด๋๋ ์ด์ ์ ํตํด ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ค์ด๊ณ ์ํธ์์ฉ์ฑ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- ์์ ๋ฏธ๋์ด ํ๋ซํผ: ํผ๋, ํ๋กํ, ํ์๋ผ์ธ์ ์คํธ๋ฆฌ๋ฐ์ ์ฌ์ฉํ์ฌ ์ฝํ ์ธ ๋ฅผ ์ ์ง์ ์ผ๋ก ์ ๋ฌํ๊ณ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ ์ ์์ต๋๋ค.
์์ 1: ๊ธ๋ก๋ฒ ์ ์์๊ฑฐ๋ ์น์ฌ์ดํธ
์ ์ธ๊ณ์ ์ผ๋ก ์ํ์ ํ๋งคํ๋ ์ ์์๊ฑฐ๋ ์น์ฌ์ดํธ๋ RSC๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์์ ์์น์ ๋ฐ๋ผ ๋ฐ์ดํฐ๋ฒ ์ด์ค์์ ์ง์ ์ํ ์์ธ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค. ํ์ด์ง์ ์ ์ ์ธ ๋ถ๋ถ(์ํ ์ค๋ช , ์ด๋ฏธ์ง)์ ์๋ฒ์์ ๋ ๋๋ง๋๊ณ , ์ํธ์์ฉ ์์(์ฅ๋ฐ๊ตฌ๋ ๋ด๊ธฐ ๋ฒํผ, ์๋ ์ ํ๊ธฐ)๋ ํด๋ผ์ด์ธํธ์์ ํ์ด๋๋ ์ด์ ๋ฉ๋๋ค. ์คํธ๋ฆฌ๋ฐ์ ์ฌ์ฉ์๊ฐ ๊ธฐ๋ณธ ์ํ ์ ๋ณด๋ฅผ ์ ์ํ๊ฒ ๋ณผ ์ ์๋๋ก ๋ณด์ฅํ๋ฉฐ, ๋๋จธ์ง ์ฝํ ์ธ ๋ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋ก๋๋ฉ๋๋ค.
์์ 2: ๊ธ๋ก๋ฒ ๋ด์ค ํ๋ซํผ
์ ์ธ๊ณ ์ ์ฌ๊ณ ๊ฐ์ ๋์์ผ๋ก ํ๋ ๋ด์ค ํ๋ซํผ์ RSC๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์์ ์ธ์ด์ ์ง์ญ์ ๋ฐ๋ผ ๋ค๋ฅธ ์์ค์์ ๋ด์ค ๊ธฐ์ฌ๋ฅผ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค. ์คํธ๋ฆฌ๋ฐ์ ํตํด ์น์ฌ์ดํธ๋ ์ด๊ธฐ ํ์ด์ง ๋ ์ด์์๊ณผ ํค๋๋ผ์ธ์ ์ ์ํ๊ฒ ์ ๋ฌํ๊ณ , ์ ์ฒด ๊ธฐ์ฌ๋ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋ก๋๋ฉ๋๋ค. ์ ํ์ ํ์ด๋๋ ์ด์ ์ ๋๊ธ ์น์ ๋ฐ ์์ ๊ณต์ ๋ฒํผ๊ณผ ๊ฐ์ ์ํธ์์ฉ ์์๋ฅผ ํ์ด๋๋ ์ด์ ํ๋ ๋ฐ ์ฌ์ฉ๋ ์ ์์ต๋๋ค.
๋ฆฌ์กํธ ์๋ฒ ์ปดํฌ๋ํธ ์ฌ์ฉ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
๋ฆฌ์กํธ ์๋ฒ ์ปดํฌ๋ํธ, ์คํธ๋ฆฌ๋ฐ, ์ ํ์ ํ์ด๋๋ ์ด์ ์ ์ต๋ํ ํ์ฉํ๋ ค๋ฉด ๋ค์๊ณผ ๊ฐ์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ณ ๋ คํ์ธ์:
- ์๋ฒ ๋ฐ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ ์๋ณ: ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ์คํ๊ฒ ๋ถ์ํ์ฌ ์ด๋ค ์ปดํฌ๋ํธ๊ฐ ์๋ฒ์์ ๋ ๋๋ง๋ ์ ์๊ณ ์ด๋ค ์ปดํฌ๋ํธ๊ฐ ํด๋ผ์ด์ธํธ์์ ๋ ๋๋ง๋์ด์ผ ํ๋์ง ๊ฒฐ์ ํ์ธ์.
- ๋ฐ์ดํฐ ํ์นญ ์ต์ ํ: ํจ์จ์ ์ธ ๋ฐ์ดํฐ ํ์นญ ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ์๋ฒ์์ ํด๋ผ์ด์ธํธ๋ก ์ ์ก๋๋ ๋ฐ์ดํฐ์ ์์ ์ต์ํํ์ธ์.
- ์บ์ฑ ํ์ฉ: ์บ์ฑ ์ ๋ต์ ๊ตฌํํ์ฌ ์๋ฒ์ ๋ถํ๋ฅผ ์ค์ด๊ณ ์ฑ๋ฅ์ ํฅ์์ํค์ธ์.
- ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง: ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ณ ํด๊ฒฐํ์ธ์.
- ์ ์ง์ ํฅ์: ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ๋นํ์ฑํ๋ ๊ฒฝ์ฐ์๋ ์๋ํ๋๋ก ์ ํ๋ฆฌ์ผ์ด์ ์ ์ค๊ณํ์ฌ ๋ชจ๋ ์ฌ์ฉ์์๊ฒ ๊ธฐ๋ณธ์ ์ธ ์์ค์ ๊ธฐ๋ฅ์ ์ ๊ณตํ์ธ์.
๊ณผ์ ๋ฐ ๊ณ ๋ ค์ฌํญ
๋ฆฌ์กํธ ์๋ฒ ์ปดํฌ๋ํธ๋ ์๋นํ ์ด์ ์ ์ ๊ณตํ์ง๋ง, ๋ช ์ฌํด์ผ ํ ๋ช ๊ฐ์ง ๊ณผ์ ์ ๊ณ ๋ ค์ฌํญ๋ ์์ต๋๋ค:
- ๋ณต์ก์ฑ: RSC๋ฅผ ๊ตฌํํ๋ฉด ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ณต์ก์ฑ์ด ์ถ๊ฐ๋ ์ ์์ผ๋ฉฐ, ํนํ ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง ๋ฐ ์คํธ๋ฆฌ๋ฐ์ ์ต์ํ์ง ์์ ๊ฒฝ์ฐ ๋์ฑ ๊ทธ๋ ์ต๋๋ค.
- ๋๋ฒ๊น : RSC ๋๋ฒ๊น ์ ์๋ฒ์ ํด๋ผ์ด์ธํธ๋ฅผ ๋ชจ๋ ๊ณ ๋ คํด์ผ ํ๋ฏ๋ก ์ ํต์ ์ธ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ์ปดํฌ๋ํธ ๋๋ฒ๊น ๋ณด๋ค ๋ ์ด๋ ค์ธ ์ ์์ต๋๋ค.
- ๋๊ตฌ: RSC ๊ด๋ จ ๋๊ตฌ๋ ์์ง ๋ฐ์ ์ค์ด๋ฏ๋ก ๋ช ๊ฐ์ง ์ ํ ์ฌํญ์ด๋ ๋ฌธ์ ์ ์ง๋ฉดํ ์ ์์ต๋๋ค.
- ํ์ต ๊ณก์ : RSC๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ดํดํ๊ณ ๊ตฌํํ๋ ๋ฐ์๋ ํ์ต ๊ณก์ ์ด ์์ต๋๋ค.
๊ฒฐ๋ก
๋ฆฌ์กํธ ์๋ฒ ์ปดํฌ๋ํธ, ์คํธ๋ฆฌ๋ฐ, ์ ํ์ ํ์ด๋๋ ์ด์ ์ ์น ๊ฐ๋ฐ์ ์ค์ํ ๋ฐ์ ์ ๋ํ๋ ๋๋ค. ์ปดํฌ๋ํธ ๋ ๋๋ง์ ์๋ฒ๋ก ์ฎ๊น์ผ๋ก์จ ์ด๋ฌํ ๊ธฐ์ ๋ค์ ๋ ๋น ๋ฅธ ์ด๊ธฐ ํ์ด์ง ๋ก๋, ๊ฐ์๋ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ์๋ฐ์คํฌ๋ฆฝํธ, ํฅ์๋ SEO๋ฅผ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. ๋ช ์ฌํด์ผ ํ ๋ช ๊ฐ์ง ๊ณผ์ ์ ๊ณ ๋ ค์ฌํญ์ด ์์ง๋ง, RSC์ ์ด์ ์ ๋ถ์ธํ ์ ์์ผ๋ฉฐ, ๋ฆฌ์กํธ ์ํ๊ณ์ ํ์ค์ ์ธ ๋ถ๋ถ์ด ๋ ๊ฐ๋ฅ์ฑ์ด ๋์ต๋๋ค. ์ด๋ฌํ ๊ธฐ์ ๋ค์ ์์ฉํจ์ผ๋ก์จ ๋ ๋น ๋ฅด๊ณ , ๋ ํจ์จ์ ์ด๋ฉฐ, ๋ ์ฌ์ฉ์ ์นํ์ ์ธ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ ์ ์์ต๋๋ค.