728x90
๋ฐ˜์‘ํ˜•

csr 1

CSR vs SSR vs SSG (+SEO)

CSR (Client Side Rendering) ๋ง ๊ทธ๋ž˜๋„ ํด๋ผ์ด์–ธํŠธ์—์„œ ๋ Œ๋”๋ง์ด ์ผ์–ด๋‚˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์„œ๋ฒ„์— ์š”์ฒญ์„ ํ•˜๊ณ , ์„œ๋ฒ„๊ฐ€ ์‘๋‹ต์„ HTML๊ณผ JS๋ฅผ ๋ณด๋‚ด๊ฒŒ ๋˜๋ฉด ํด๋ผ์ด์–ธํŠธ๋Š” ์ด์ œ ๋ Œ๋”๋ง์„ ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. dev-tool์—์„œ ๋„คํŠธ์›Œํฌ๋ฅผ ๋ณด๋ฉด ์‚ฌ์ง„๊ณผ ๊ฐ™์ด HTML์ด๋‚˜ JS ์ด๋ฏธ์ง€ ๋“ฑ์„ ๋ฐ›์•„์˜ค๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. SSR (Sever Side Rendering) CSR๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ด๋ฆ„์—์„œ ์œ ์ถ”ํ•  ์ˆ˜ ์žˆ๋“ฏ์ด ์„œ๋ฒ„์—์„œ ๋ Œ๋”๋ง ํ•ด์ฃผ๋Š” ๋ฐฉ์‹์„ ๋งํ•ฉ๋‹ˆ๋‹ค. ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์„œ๋ฒ„์— ์š”์ฒญ์„ ํ•˜๊ณ , CSR๊ณผ ๋‹ค๋ฅด๊ฒŒ ์„œ๋ฒ„ ์ชฝ์—์„œ ์ด๋ฏธ HTML, JS ๋“ฑ์„ ๋งŒ๋“ค๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์™„๋ฃŒํ•˜๊ฒŒ ๋˜๋ฉด ํด๋ผ์ด์–ธํŠธ์— ์ „๋‹ฌํ•˜๊ฒŒ ๋˜๊ณ , ํด๋ผ์ด์–ธํŠธ๋Š” ํ™”๋ฉด์„ ๊ทธ๋ฆด ํ•„์š” ์—†์ด ๋ฐ”๋กœ ๋ฟŒ๋ ค์ฃผ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๋ Œ๋”๋ง์„ ์„œ๋ฒ„์—์„œ ํ•œ๋‹ค๊ธฐ๋ณด๋‹ค..

Web 2023.08.06
728x90
๋ฐ˜์‘ํ˜•