Single Page Application๊ณผ Multiple Page Application,
๊ทธ๋ฆฌ๊ณ Client Side Rendering, Server Side Rendering์ ์ฐจ์ด๋ฅผ ์์๋ณด์.
๋ป ๊ทธ๋๋ก SPA(Single Page Application)๋ ํ ๊ฐ์ ํ์ด์ง๋ก ๊ตฌ์ฑ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ด๋ค.
SPA๋ CSR(Client Side Rendering) ๋ฐฉ์์ผ๋ก ๋ ๋๋งํ๋ค.
๋จ ํ ๋ฒ๋ง ๋ฆฌ์์ค(HTML, CSS, JavaScript)๋ฅผ ๋ก๋ฉํ๊ณ , ๊ทธ ํ์๋ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ฌ ๋๋ง ์๋ฒ์ ํต์ ํ๋ค.
๋ํ์ ์ผ๋ก ์ฌ์ฉ์์๊ฒ ์ฐ์ํ ์ฌ์ฉ ๊ฒฝํ์ ์ ๊ณตํ๋ค๋ ์ฅ์ ์ด ์์ง๋ง, ๊ฒ์ ์์ง ์ต์ ํ(SEO)๊ฐ ์ด๋ ต๋ค๋ ๋จ์ ์ ๊ฐ์ง๊ณ ์๋ค.
++ SPA ๋ฐฉ์์ด ๋ชจ๋ CSR์ธ ๊ฒ์ ์๋๋ค.
MPA๋ Multiple Page Application์ ์ฝ์์ธ๋ฐ, ์ด ๋ํ ๋ป ๊ทธ๋๋ก ์ฌ๋ฌ ๊ฐ์ ํ์ด์ง๋ก ๊ตฌ์ฑ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ด๋ค.
MPA๋ SSR(Server Side Application) ๋ฐฉ์์ผ๋ก ๋ ๋๋งํ๋ค.
์๋ก์ด ํ์ด์ง๋ฅผ ์์ฒญํ ๋๋ง๋ค ์๋ฒ์์ ๋ ๋๋ง๋ ์ ์ ๋ฆฌ์์ค(HTML, CSS, JavaScript)๊ฐ ๋ค์ด๋ก๋๋๋ค.
ํ์ด์ง๋ฅผ ์ด๋ํ๊ฑฐ๋ ์๋ก๊ณ ์นจํ๋ฉด ์ ์ฒด ํ์ด์ง๋ฅผ ๋ค์ ๋ ๋๋งํ๋ค.
SEO
SPA๋ ๊ฒ์ ์์ง ์ต์ ํ(SEO)๊ฐ ํ๋ค๊ณ , MPA๊ฐ SEO์ ์ธ ์ธก๋ฉด์์ ๋ ์ ๋ฆฌํ๋ค.
์ฒซ ๋ฒ์งธ ๋ก๋ฉ
JS ํ์ผ์ ๋ฒ๋ค๋งํด์ ํ ๋ฒ์ ๋ฐ๊ธฐ ๋๋ฌธ์ ์ด๊ธฐ ๊ตฌ๋ ์๋๊ฐ ๋๋ฆฐ ๋ฐ๋ฉด, MPA์ ์ฒซ ๋ก๋ฉ์ ๋งค์ฐ ์งง๋ค.
์ฌ์ฉ์ ๊ฒฝํ
ํ์ด์ง๋ฅผ ์ด๋ํ ๋๋ง๋ค ํ์ด์ง๊ฐ ์๋ก๊ณ ์นจ์ด ๋๋ MPA์ ๋นํด ํ์ด์ง๊ฐ ๊น๋นก์ด์ง ์๋ SPA๊ฐ ๋ ๋ฐ์ด๋ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ค.
์ปดํฌ๋ํธ ์ฌ์ฌ์ฉ
SPA๋ ์ปดํฌ๋ํธ๋ณ ๊ฐ๋ฐ์ ์ฉ์ดํ๋ ์ฅ์ ์ด ์๋ค.
CSR(Client Side Rendering)์ ๋ ๋๋ง์ด ํด๋ผ์ด์ธํธ ์ชฝ์์ ์ผ์ด๋๋ค.
์๋ฒ๋ ์์ฒญ์ ๋ฐ์ผ๋ฉด ํด๋ผ์ด์ธํธ์ HTML๊ณผ JS๋ฅผ ๋ณด๋ด์ค๋ค. ํด๋ผ์ด์ธํธ๋ ๊ทธ๊ฒ์ ๋ฐ์ ๋ ๋๋ง์ ์์ํ๋ค.
CDN : aws์ cloudflare๋ฅผ ์๊ฐํ๋ฉด ๋จ. ์๋ ์ ์ ์ ์์ฒญ์ '๋ฌผ๋ฆฌ์ '์ผ๋ก ๊ฐ๊น์ด ์๋ฒ์์ ์์ฒญ์ ์๋ตํ๋ ๋ฐฉ์
SSR(Server Side Rendering)์ ์๋ฒ์ชฝ์์ ๋ ๋๋ง ์ค๋น๋ฅผ ๋๋ง์น ์ํ๋ก ํด๋ผ์ด์ธํธ์ ์ ๋ฌํ๋ ๋ฐฉ์์ด๋ค.