ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • CSR VS SSR / ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• QA
    ๊ฐœ๋ฐœ 2022. 4. 1. 13:38

    Q: CSR, SSR ๋ฌด์—‡์ธ๊ฐ€?

    A

     

    ๐Ÿ–ฅ  CSR

    ์‚ฌ์šฉ์ž๊ฐ€ Website ์š”์ฒญ์„ ๋ณด๋‚ด๋ฉด CDN์ด HTMLํŒŒ์ผ์ด๋ž‘ JS๋กœ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ๋งํฌ๋ฅผ ํด๋ผ์ด์–ธํŠธ๋กœ ๋ณด๋‚ด๊ณ  ํด๋ผ์ด์–ธํŠธ๋Š” ์ด ํŒŒ์ผ๋“ค์„ ๋ฐ›์•„์„œ ์‹คํ–‰ํ•˜๊ณ  ๋ฐ์ดํ„ฐ๋ฅผ ์œ„ํ•œ API๊ฐ€ ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค. ์„œ๋ฒ„์‚ฌ์ด๋“œ๋ Œ๋”๋ง ๋•Œ์™€๋Š” ๋‹ค๋ฅด๊ฒŒ ํด๋ผ์ด์–ธํŠธ๊ฐ€ ํŒŒ์ผ๋“ค์„ ๋ฐ›์•„์„œ ์‹คํ–‰ํ•˜๋Š” ๊ทธ ์‚ฌ์ด์— ์‚ฌ์šฉ์ž๋Š” ์•„๋ฌด๊ฒƒ๋„ ๋ณผ ์ˆ˜๊ฐ€ ์—†๊ณ , ๋ฐ์ดํ„ฐ๋ฅผ ์œ„ํ•œ API๊ฐ€ ํ˜ธ์ถœ ๋์„ ๋•Œ๋Š” placeholder ์˜ ์ •๋ณด๋“ค์ด ๋ณด์ž…๋‹ˆ๋‹ค. ์„œ๋ฒ„๊ฐ€ API๋กœ๋ถ€ํ„ฐ ์š”์ฒญ์— ์‘๋‹ตํ•˜๊ณ  API๋กœ๋ถ€ํ„ฐ ๋ฐ›์•„์˜จ data๋ฅผ placeholder์ž๋ฆฌ์— ๋„ฃ์Œ์œผ๋กœ์จ ์ƒํ˜ธ์ž‘์šฉ์ด ์‹œ์ž‘๋ฉ๋‹ˆ๋‹ค.

    [ ์„œ๋ฒ„์—์„œ ์ฒ˜๋ฆฌ ์—†์ด ํด๋ผ์ด์–ธํŠธ๋กœ ๋ณด๋‚ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์— ์ž๋ฐ”์Šค๋ฆฝํŠธ๊ฐ€ ๋ชจ๋‘ ๋‹ค์šด๋กœ๋“œ ๋˜๊ณ  ์‹คํ–‰์ด ๋๋‚˜๊ธฐ ์ „๊นŒ์ง€ ์‚ฌ์šฉ์ž๋Š” ๋ณผ ์ˆ˜ ์žˆ๋Š”๊ฒŒ ์—†์Šต๋‹ˆ๋‹ค ]

     

    ๐Ÿ’พ  SSR

    ์‚ฌ์šฉ์ž๊ฐ€ Website ์š”์ฒญ์„ ๋ณด๋‚ด๋ฉด Server๋Š” ์ฆ‰์‹œ ๋ Œ๋”๋ง ๊ฐ€๋Šฅํ•œ HTMLํŒŒ์ผ์„ ๋งŒ๋“ค์–ด์„œ ํด๋ผ์ด์–ธํŠธ์— ์ „๋‹ฌ์„ ํ•ฉ๋‹ˆ๋‹ค. ํด๋ผ์ด์–ธํŠธ์— ์ „๋‹ฌ ๋˜๋ฉด HTML์€ ์ฆ‰์‹œ ๋ Œ๋”๋ง ๊ฐ€๋Šฅํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ Œ๋”๋ง์ด ๋˜๊ณ  ํด๋ผ์ด์–ธํŠธ๊ฐ€ JS๋ฅผ ์ปดํŒŒ์ผํ•˜๋Š”๋ฐ ๊ทธ ๋™์•ˆ์€ JS๋Š” ์ปดํŒŒ์ผํ•˜๊ธฐ ์ „์ด๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์ดํŠธ ์กฐ์ž‘์€ ๋ถˆ๊ฐ€๋Šฅํ•œ ์ƒํƒœ์ž…๋‹ˆ๋‹ค. ์•„, ๊ทธ๋ฆฌ๊ณ  JS ์ปดํŒŒ์ผํ•˜๊ณ  ์žˆ๋Š” ์‚ฌ์ด์— ์‚ฌ์šฉ์ž๋Š” ์ปจํ…์ธ ๋Š” ๋ณผ ์ˆ˜ ์žˆ์ง€๋งŒ ์กฐ์ž‘๋งŒ ๋ถˆ๊ฐ€๋Šฅํ•œ ์ƒํƒœ๋ผ์„œ ์‚ฌ์šฉ์ž์˜ ์กฐ์ž‘์„ ๊ธฐ์–ตํ•˜๊ณ  ์žˆ๋‹ค๊ฐ€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ JS๋ฅผ ์‹คํ–‰ํ•˜๋ฉด ๊ธฐ์–ตํ•˜๊ณ  ์žˆ๋˜ ์‚ฌ์šฉ์ž์˜ ์กฐ์ž‘์ด ์‹คํ–‰๋˜๋ฉด์„œ ์›นํŽ˜์ด์ง€๋ž‘ ์ƒํ˜ธ์ž‘์šฉ์ด ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋˜๋Š”๊ฒŒ ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง ์ž…๋‹ˆ๋‹ค.

     

    Q: CSR, SSR ์ฐจ์ด์ ์€ ๋ฌด์—‡์ธ๊ฐ€?

    A

    ์›นํŽ˜์ด์ง€๋ฅผ ๋กœ๋”ฉํ•˜๋Š” ์‹œ๊ฐ„์—์„œ ์ฒซ ํŽ˜์ด์ง€์ผ ๊ฒฝ์šฐ์—๋Š” CSR์˜ ๊ฒฝ์šฐ ๋ชจ๋“  ํŒŒ์ผ๋“ค์„ ํ•œ๋ฒˆ์— ๋ถˆ๋Ÿฌ์˜ค๊ธฐ ๋•Œ๋ฌธ์— ํ•„์š”ํ•œ ๋ถ€๋ถ„์˜ ํŒŒ์ผ๋งŒ ๋ถˆ๋Ÿฌ์˜ค๋Š” SSR๋ณด๋‹ค CSR์ด ํ‰๊ท ์ ์œผ๋กœ ๋” ๋Š๋ฆฝ๋‹ˆ๋‹ค.

    ํ•˜์ง€๋งŒ ๋‚˜๋จธ์ง€ ๋กœ๋”ฉ ์‹œ๊ฐ„์€ CSR์€ ์ด๋ฏธ ์ฒซ ํŽ˜์ด์ง€ ๋กœ๋”ฉํ•  ๋•Œ ๋‹ค ๋ฐ›์•„๋†“์•˜๊ธฐ ๋•Œ๋ฌธ์— ๋น ๋ฅธ๋ฐ, SSR์€ ์ฒซ ํŽ˜์ด์ง€ ๋กœ๋”ฉ ๊ณผ์ •์„ ๋‹ค์‹œ ์‹คํ–‰ํ•ด์•ผ ํ•ด์„œ ๋” ๋Š๋ฆฝ๋‹ˆ๋‹ค.

    SEO ๋Œ€์‘์—์„œ๋„ ์ฐจ์ด๊ฐ€ ๋‚˜๋Š”๋ฐ ํฌ๋กค๋Ÿฌ๋กœ ์›น์‚ฌ์ดํŠธ๋ฅผ ์ฝ์œผ๋ฉด์„œ CSR์€ JS๋ฅผ ์‹คํ–‰์‹œ์ผœ ๋™์ ์œผ๋กœ ์ปจํ…์ธ ๊ฐ€ ์ƒ์„ฑ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์‹คํ–‰๋˜์–ด์•ผ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๊ฐ€ ๋ฐ”๋€Œ๋Š”๋ฐ SSR์€ ์• ์ดˆ์— ์„œ๋ฒ„ ์‚ฌ์ด๋“œ์—์„œ ์ปดํŒŒ์ผ๋˜์–ด ๋„˜์–ด์˜ค๊ธฐ ๋•Œ๋ฌธ์— ํฌ๋กค๋Ÿฌ์— ๋Œ€์‘ํ•˜๊ธฐ ์šฉ์ดํ•ฉ๋‹ˆ๋‹ค.

     

     

    Q: ์–ธ์ œ ์–ด๋–ค๊ฑธ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š”๊ฐ€?

    A

    CSR

    • ๋„คํŠธ์›Œํฌ๊ฐ€ ๋น ๋ฅผ ๋•Œ
    • ์„œ๋ฒ„ ์„ฑ๋Šฅ์ด ์ข‹์ง€ ์•Š์„ ๋•Œ
    • ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ค„ ๋ฐ์ดํ„ฐ์˜ ์–‘์ด ๋งŽ์„ ๋•Œ
    • ๋ฉ”์ธ ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๊ฐ€๋ฒผ์šธ ๋•Œ

    SSR

    • ๋„คํŠธ์›Œํฌ๊ฐ€ ๋Š๋ฆด ๋•Œ
    • ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”๊ฐ€ ํ•„์š”ํ•  ๋•Œ
    • ์ตœ์ดˆ ๋กœ๋”ฉ์ด ๋นจ๋ผ์•ผ ํ•˜๋Š” ์‚ฌ์ดํŠธ ๊ฐœ๋ฐœ์ด ํ•„์š”ํ•  ๋•Œ

     


     

    Q: ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์€ ๋ฌด์—‡์ด๋ฉฐ ํ•ด์•ผํ•˜๋Š” ์ด์œ ๋Š”?

     

    A

    ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์€ ๋ธŒ๋ผ์šฐ์ €๋งˆ๋‹ค ๋ Œ๋”๋ง ์—”์ง„์ด ๋‹ค ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ์›นํŽ˜์ด์ง€ ์ œ์ž‘ ์‹œ ์˜๋„ํ•œ ๋Œ€๋กœ ๋‚˜์˜ค์ง€ ์•Š๊ฑฐ๋‚˜ ๊นจ์ง€๋Š” ํ˜„์ƒ๋“ค์„ ์›น ํ‘œ์ค€ ๊ธฐ์ˆ ์„ ์ด์šฉํ•˜์—ฌ ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ๊นจ์ง€์ง€ ์•Š๊ณ  ์˜๋„ํ•œ ๋Œ€๋กœ ๋‚˜์˜ฌ ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š” ์ž‘์—… ์ž…๋‹ˆ๋‹ค.

     

    ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์„ ํ•ด์•ผํ•˜๋Š” ์ด์œ ๋Š” ํฌ๋กฌ์ด๋‚˜ ์ต์Šคํ”Œ๋กœ๋Ÿฌ ์™ธ์—๋„ ํŒŒ์ด์–ดํญ์Šค๋‚˜ ์‚ฌํŒŒ๋ฆฌ, ์—ฃ์ง€ ๋“ฑ๋“ฑ์˜ ์—ฌ๋Ÿฌ ๋ธŒ๋ผ์šฐ์ €๋“ค์€ ์ €๋งˆ๋‹ค ๊ฐ๊ฐ ๋‹ค๋ฅธ ์†์„ฑ๋“ค์„ ๊ฐ€์ง€๊ณ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋™์ผํ•˜๊ฒŒ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•œ๋‹คํ•ด๋„ ๋ธŒ๋ผ์šฐ์ €๋งˆ๋‹ค ๋‹ค๋ฅด๊ฒŒ ๋ณด์ผ ์ˆ˜ ์žˆ์–ด์„œ ์ ์–ด๋„ ํ‘œ์ค€ ์›น๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋น„์Šทํ•˜๊ฒŒ ๋งž์ถฐ์ฃผ์–ด ์‚ฌ์šฉ์ž๊ฐ€ ๋ฐฉ๋ฌธํ–ˆ์„ ๋•Œ ์ •๋ณด๋กœ์„œ์˜ ์†Œ์™ธ๊ฐ์„ ๋Š๋ผ์ง€ ์•Š๋„๋ก ํ•ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

    ๋Œ“๊ธ€ 0

Designed by Tistory.