getInitialProps vs getServerSideProps

sy uยท2022๋…„ 7์›” 11์ผ
3

๐Ÿšช ๋“ค์–ด๊ฐ€๊ธฐ

getInitialProps๋Š” ์„œ๋ฒ„์—์„œ ํŽ˜์ด์ง€์— ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ์ฑ„์šฐ๊ณ  ๋ Œ๋”๋งํ•œ ํŽ˜์ด์ง€๋ฅผ ํด๋ผ์ด์–ธํŠธ์— ๋ณด๋‚ธ๋‹ค. ๋”ฐ๋ผ์„œ SEO์— ์นœํ™”์ ์ด๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ Next 9.3์—์„œ getServerSideProps๊ฐ€ ๋„์ž…๋˜๋ฉด์„œ getServerSideProps๊ฐ€ getInitialProps๋ฅผ ๋Œ€์ฒดํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

์–ด๋–ป๊ฒŒ getServerSideProps๊ฐ€ getInitialProps๋ฅผ ๋Œ€์ฒดํ•˜๊ฒŒ ๋˜์—ˆ์„๊นŒ?
์ด ๊ธ€์—์„œ๋Š” ๋‘ ๊ฐœ์˜ ๊ณตํ†ต์ ๊ณผ ์ฐจ์ด์ ์„ ์•Œ์•„๋ณด๊ณ ์ž ํ•œ๋‹ค.

โš™๏ธ getServerSideProps์™€ getInitialProps์˜ ์ž‘๋™ ๋ฐฉ์‹

getServerSideProps๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํŽ˜์ด์ง€๋Š” ํŽ˜์ด์ง€ ์š”์ฒญ ๋งˆ๋‹ค ํ•ด๋‹น ์š”์ฒญ์— ๋Œ€ํ•œ ์‘๋‹ต ์ „์— ์„œ๋ฒ„์—์„œ ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”๋งํ•œ๋‹ค.

์š”์ฒญ๋งˆ๋‹ค ์„œ๋ฒ„์—์„œ ๋งค๋ฒˆ ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”๋งํ•ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— SSG ๋ณด๋‹ค๋Š” ํŽ˜์ด์ง€์˜ ๋กœ๋”ฉ ์†๋„๊ฐ€ ๋Š๋ ค์งˆ ์ˆ˜ ์žˆ์ง€๋งŒ CSR์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹ ๋ณด๋‹ค๋Š” ์„ฑ๋Šฅ์ด ์ข‹๊ณ  SEO์— ์นœํ™”์ ์ด๋‹ค.

getInitialProps๋Š” getServerSideProps์™€ ๊ฑฐ์˜ ๋น„์Šทํ•˜๊ฒŒ ์ž‘๋™ํ•œ๋‹ค.

๊ทธ๋ ‡๋‹ค๋ฉด ์™œ getServerSideProps๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ• ๊นŒ?
getInitialProps๋ณด๋‹ค getServerSideProps๋Š” ๋ญ๊ฐ€ ์œ ์šฉํ• ๊นŒ?

๐Ÿ”Ž getServerSideProps์™€ getInitialProps์˜ ์ฐจ์ด์ ์€ ๋ฌด์—‡์ผ๊นŒ?

getInitialProps๋Š” URL์„ ํ†ตํ•œ ์ดˆ๊ธฐ ๋กœ๋“œ ๋ฐ <\lta />\gt ํƒœ๊ทธ์˜ href์†์„ฑ์œผ๋กœ ์ด๋™ํ•  ๊ฒฝ์šฐ์—๋Š” ์„œ๋ฒ„์—์„œ ์‹คํ–‰๋˜์ง€๋งŒ next/link, next/router๋ฅผ ์‚ฌ์šฉํ•œ ์ด๋™ ์ฆ‰ ํด๋ผ์ด์–ธํŠธ ์ธก์—์„œ ํŽ˜์ด์ง€๋ฅผ ์ด๋™ํ•  ๊ฒฝ์šฐ ์„œ๋ฒ„๊ฐ€ ์•„๋‹Œ ํด๋ผ์ด์–ธํŠธ์—์„œ ์ž‘๋™ํ•œ๋‹ค.

NextJs์˜ getIntialProps ๋ฌธ์„œ์—์„œ๋„ ํ•ด๋‹น ๋‚ด์šฉ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

For the initial page load, getInitialProps will run on the server only. getInitialProps will then run on the client when navigating to a different route via the next/link component or by using next/router. However, if getInitialProps is used in a custom _app.js, and the page being navigated to implements getServerSideProps, then getInitialProps will run on the server.
๐Ÿ”– getInitialProps ๊ณต์‹๋ฌธ์„œ

์ด๋ ‡๊ฒŒ ์ž‘๋™ํ•˜๋Š” ๊ฒƒ์— ๊ฐ€์žฅ ํฐ ๋ฌธ์ œ์ ์€ getInitialProps ๋‚ด๋ถ€์— ํด๋ผ์ด์–ธํŠธ ์ธก์—์„œ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์—†๋Š” ๋กœ์ง(์ง์ ‘ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์— ์ ‘๊ทผํ•˜๋Š” ๋“ฑโ€ฆ)์ด ์กด์žฌํ•˜๋Š” ๊ฒฝ์šฐ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

๋˜ํ•œ ์„œ๋ฒ„์—์„œ๋งŒ ์ˆ˜ํ–‰ํ•˜๋Š” ๋กœ์ง๋งŒ ์กด์žฌํ•œ๋‹ค ํ•˜๋”๋ผ๋„ ํด๋ผ์ด์–ธํŠธ ์ธก์—์„œ๋„ ์ž‘๋™ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํด๋ผ์ด์–ธํŠธ ์ธก ๋ฒˆ๋“ค์—๋„ ํฌํ•จ๋˜์–ด ๋ฒˆ๋“ค ์‚ฌ์ด์ฆˆ๊ฐ€ ์ปค์ง€๊ฒŒ ๋œ๋‹ค. ์ด๋Š” ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์„ฑ๋Šฅ๊ณผ๋„ ์—ฐ๊ฒฐ๋œ๋‹ค.

๋ฐ˜๋ฉด getServerSideProps๋Š” ์ดˆ๊ธฐ ํŽ˜์ด์ง€ ๋กœ๋“œ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ next/link, next/router๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•  ๊ฒฝ์šฐ์—๋„ ์„œ๋ฒ„์—์„œ ๋ Œ๋”๋ง์„ ์‹คํ–‰ํ•˜๊ณ  ๊ฒฐ๊ณผ๋ฅผ ํด๋ผ์ด์–ธํŠธ ์ธก์— ์ „๋‹ฌํ•œ๋‹ค. ์ด๋Š” getServerSideProps ๋‚ด๋ถ€์—์„œ ํด๋ผ์ด์–ธํŠธ ์ธก์—์„œ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์—†๋Š” ๋กœ์ง์ด ์กด์žฌํ•ด๋„ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค.

์–ด๋–ป๊ฒŒ getInitialProps๊ฐ€ ํด๋ผ์ด์–ธํŠธ์—์„œ๋„ ์ž‘๋™ํ• ๊นŒ?

๋‚˜๋Š” ์–ด๋–ป๊ฒŒ getInitialProps๊ฐ€ ํด๋ผ์ด์–ธํŠธ์—์„œ ์ž‘๋™ํ•˜๋Š”์ง€ ๊ถ๊ธˆํ•ด์กŒ๋‹ค.

ํ…Œ์ŠคํŠธ๋ฅผ ํ•˜๊ธฐ ์œ„ํ•ด SSG(getStaticProps), SSR(getServerSideProps), legacy(getInitialProps)๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํŽ˜์ด์ง€๋ฅผ ๊ฐ™์€ ๋‚ด์šฉ์œผ๋กœ ์ƒ์„ฑํ•ด ์‹คํ–‰ํ•˜๊ณ  ๋นŒ๋“œ ํ•ด ๋ณด์•˜๋‹ค.

1. ๋ฒˆ๋“ค ํŒŒ์ผ ํ™•์ธํ•˜๊ธฐ

์•„๋ž˜ ์‚ฌ์ง„์œผ๋กœ๋งŒ ํ™•์ธํ•ด๋„ getInitialProps๊ฐ€ ์กด์žฌํ•˜๋Š” ํŽ˜์ด์ง€์˜ ํด๋ผ์ด์–ธํŠธ ๋ฒˆ๋“ค ํŒŒ์ผ์ด ํฐ๋‹ค๊ณ  ๋Š๊ปด์ง„๋‹ค.

2. ๋นŒ๋“œ ํ›„, /.next/server/pages ํด๋” ํ™•์ธํ•˜๊ธฐ

์‹คํ–‰ ํ›„ ๋กœ๋“œ๋œ js ํŒŒ์ผ์€ SSR(getServerSideProps), legacy(getInitialProps) ๋งŒ ํ™•์ธํ•ด ๋ณผ ์˜ˆ์ •์ด๋‹ค.
๋‚ด๊ฐ€ ํ…Œ์ŠคํŠธ๋กœ ์ž‘์„ฑํ•œ ํŒŒ์ผ์€ getServerSideProps๊ณผ getInitialProps ๋ชจ๋‘ ๋‚ด๋ถ€์— lodash๋ฅผ ์‚ฌ์šฉํ•ด ๋ณด์•˜๋‹ค.
์šฐ๋ฆฌ๊ฐ€ ๊ณต๋ถ€ํ•œ ๋‚ด์šฉ์— ์˜ํ•˜๋ฉด ํด๋ผ์ด์–ธํŠธ ์ธก ๋ฒˆ๋“ค์— lodash๊ฐ€ ์—†์–ด์•ผ ํ•œ๋‹ค.
๊ฒฐ๊ณผ๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด getInitalProps์—๋งŒ lodash๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ๋Š” ๊ฑธ๋กœ ํ™•์ธ๋œ๋‹ค.

๋นŒ๋“œ ํ›„, /.next/server/pages ํด๋”์— ์žˆ๋Š” ํŒŒ์ผ์€ ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

  • ์ž๋™ ์ •์  ์ตœ์ ํ™”๋œ ํŒŒ์ผ์ด๋‹ค. ํ•ด๋‹น ๋‚ด์šฉ์€ ์•„๋ž˜์—์„œ ์‚ดํŽด๋ณผ ์˜ˆ์ •์ด๋‹ค.
  • getInitialProps๋ฅผ ์‚ฌ์šฉํ•œ ํŒŒ์ผ์ด๋‹ค.
  • getStaticProps๋ฅผ ์‚ฌ์šฉํ•œ ํŒŒ์ผ์ด๋‹ค.
  • getServerSideProps๋ฅผ ์‚ฌ์šฉํ•œ ํŒŒ์ผ์ด๋‹ค.

3. ๋„๊ตฌ๋ฅผ ํ†ตํ•ด ํ™•์ธํ•ด๋ณด๊ธฐ

https://next-code-elimination.vercel.app/
์œ„ ์‚ฌ์ดํŠธ๋Š” ํด๋ผ์ด์–ธํŠธ ์ธก ๋ฒˆ๋“ค ํŒŒ์ผ์—์„œ ์„œ๋ฒ„ ์ธก ์ฝ”๋“œ๊ฐ€ ์‚ฌ๋ผ์ง„ ๊ฒฐ๊ณผ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.
์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ•ด ์ˆ˜์ •๋„ ํ•ด๋ณผ ์ˆ˜ ์žˆ๋‹ค.

์•„๋ž˜ ์‚ฌ์ง„๊ณผ ๊ฐ™์ด ํด๋ผ์ด์–ธํŠธ ์ธก ๋ฒˆ๋“ค ํŒŒ์ผ์— getInitialProps์˜ ๋‚ด๋ถ€ ๋กœ์ง์ด ๊ทธ๋Œ€๋กœ ๋‚จ์•„ ์žˆ๋Š”๊ฑธ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

2. ์ž๋™ ์ •์  ์ตœ์ ํ™” (Automatic Static Optimization) ์ง€์› ์—ฌ๋ถ€

NextJs๋Š” ์ฐจ๋‹จ ๋ฐ์ดํ„ฐ(blocking data) ์š”์ฒญ์ด ์—†๋‹ค๋ฉด ํŽ˜์ด์ง€๊ฐ€ ์ •์ (์‚ฌ์ „ ๋ Œ๋”๋ง ๊ฐ€๋Šฅ)์ธ์ง€ ์ž๋™์œผ๋กœ ํ™•์ธํ•œ๋‹ค.
์ด ํ™•์ธ์—๋Š” ํŽ˜์ด์ง€์— getInitialProps์™€ getServerSideProps๊ฐ€ ์—†์„ ๋•Œ ๊ฒฐ์ •๋œ๋‹ค.

์ •์ ์œผ๋กœ ์ƒ์„ฑ๋œ ํŽ˜์ด์ง€๋Š” ํด๋ผ์ด์–ธํŠธ ์ธก์—์„œ JS ํŒŒ์ผ์ด ๋กœ๋“œ๋˜๊ณ  ์ •์ ์ธ HTML์— ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ (hydation) ์™„์ „ํ•˜๊ฒŒ ์ƒํ˜ธ์ž‘์šฉ์ด ๊ฐ€๋Šฅํ•œ ํŽ˜์ด์ง€๊ฐ€ ๋œ๋‹ค.

์ž๋™ ์ •์  ์ตœ์ ํ™”์˜ ์ตœ๋Œ€ ์ด์ ์€ ์„œ๋ฒ„ ์ธก ๊ณ„์‚ฐ์ด ํ•„์š”ํ•˜์ง€ ์•Š์œผ๋ฉฐ CDN์—์„œ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ฆ‰์‹œ ์ŠคํŠธ๋ฆฌ๋ฐํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉ์ž๊ฐ€ ํŽ˜์ด์ง€๋ฅผ ์ด์šฉํ•  ๋•Œ, ๋น ๋ฅธ ๋กœ๋”ฉ ์†๋„๋ฅผ ๊ฒฝํ—˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

getInitialProps๋ฟ๋งŒ ์•„๋‹ˆ๋ผ getServerSideProps ๋˜ํ•œ ํŽ˜์ด์ง€ ๋‚ด์— ์กด์žฌํ•  ๋•Œ, ํ•ด๋‹น ํŽ˜์ด์ง€๋Š” ์ž๋™ ์ •์  ์ตœ์ ํ™”๋˜์ง€ ์•Š๋Š”๋‹ค.

์ž๋™ ์ •์  ์ตœ์ ํ™” ํ…Œ์ŠคํŠธ ํ•ด๋ณด๊ธฐ

๋นŒ๋“œ ํ›„, /.next/server/pages ํด๋”์— ์žˆ๋Š” ํŒŒ์ผ์€ ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

  • ์ž๋™ ์ •์  ์ตœ์ ํ™”๋œ ํŒŒ์ผ์ด๋‹ค. ํ•ด๋‹น ๋‚ด์šฉ์€ ์•„๋ž˜์—์„œ ์‚ดํŽด๋ณผ ์˜ˆ์ •์ด๋‹ค.
  • getInitialProps๋ฅผ ์‚ฌ์šฉํ•œ ํŒŒ์ผ์ด๋‹ค.
  • getStaticProps๋ฅผ ์‚ฌ์šฉํ•œ ํŒŒ์ผ์ด๋‹ค.
  • getServerSideProps๋ฅผ ์‚ฌ์šฉํ•œ ํŒŒ์ผ์ด๋‹ค.

    ์œ„์˜ ํŒŒ์ผ๋“ค์„ ๋ณด๋ฉด ์ •์  ํŒŒ์ผ html ํŒŒ์ผ์ด ์ƒ์„ฑ๋œ ๊ฒƒ์€ ์ž๋™์œผ๋กœ ์ •์  ์ตœ์ ํ™”๋œ aso ํŒŒ์ผ๊ณผ getStaticProps(SSG) ํŒŒ์ผ์ด๋‹ค.

getInitialProps์™€ getServerSideProps๋Š” .jsํŒŒ์ผ๋กœ ๋นŒ๋“œ ๋˜์—ˆ๋‹ค.

์ปค์Šคํ…€ App ํŒŒ์ผ์— ์กด์žฌํ•˜๋Š” getInitialProps

getStaticProps๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š์•„๋„ getInitialProps๋‚˜ getServerSideProps๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š๋Š” ํŽ˜์ด์ง€๋Š” ์ž๋™์œผ๋กœ ์ •์  ์ตœ์ ํ™”๊ฐ€ ๋œ๋‹ค.
๊ทธ๋Ÿฌ๋‚˜ ์ปค์Šคํ…€ App ํŒŒ์ผ ๋‚ด๋ถ€์— getInitialProps๊ฐ€ ์กด์žฌํ•œ๋‹ค๋ฉด getStaticProps๊ฐ€ ์—†๋Š” ํŽ˜์ด์ง€๋Š” ์ตœ์ ํ™”๊ฐ€ ๋˜์ง€ ์•Š๋Š”๋‹ค.

๊ฒฐ๋ก 

์ด๋ฒˆ ๊ธ€์„ ์ž‘์„ฑํ•˜๋ฉฐ ๋‚˜์˜ ๊ฒฐ๋ก ์€ getInitialProps ์‚ฌ์šฉ์„ ํ•˜์ง€ ๋ง์ž์ด๋‹ค.
์‚ฌ์‹ค ์ฒ˜์Œ๋ถ€ํ„ฐ ๋‹ต์€ ์ •ํ•ด์ ธ ์žˆ์—ˆ์ง€๋งŒ ๊ทธ๋ž˜๋„ ์™œ getInitialProps ์‚ฌ์šฉ์„ ์ง€์–‘ํ•˜๋Š”์ง€์— ๋Œ€ํ•ด์„œ๋Š” ์•Œ์•„๋ณผ ํ•„์š”๊ฐ€ ์žˆ์—ˆ๋˜ ๊ฑฐ ๊ฐ™๋‹ค.

์•„์ง App ํŒŒ์ผ์—์„œ์˜ getInitialProps์˜ ๋™์ž‘๊ณผ ์ปค์Šคํ…€ _document์—์„œ์˜ getIntialProps๋ฅผ ์™œ ์‚ฌ์šฉํ•˜์ง€๋Š” ๋ชจ๋ฅธ๋‹ค. ์•ž์œผ๋กœ ์ด ๊ณผ์ •์„ ๋” ์•Œ์•„๊ฐ€๋ณด๋„๋กํ•˜์ž

์ž˜๋ชป๋œ ๋‚ด์šฉ์ด๋‚˜ ์ถ”๊ฐ€ํ•  ๋‚ด์šฉ์ด ์žˆ๋‹ค๋ฉด ๋Œ“๊ธ€ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์ฐธ๊ณ ํ•œ ๊ธ€

Next.js - Automatic Static Optimization

VERY ODD issue. Please advise. "getInitialProps" is not called if page has "getStaticProps"

getInitialProps vs. getServerSideProps in Next.js

[Nextjs] How getInitialProps Works

vercel/next.js

[Nextjs] getInitialProps ๋ฅผ ์ด์šฉํ•œ ServerSideReandering

2๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2023๋…„ 1์›” 30์ผ

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ
comment-user-thumbnail
2023๋…„ 2์›” 24์ผ

์ข‹์€ ๊ธ€์ด๋„ค์š”. ์ž˜ ๋ณด๊ณ ๊ฐ‘๋‹ˆ๋‹ค!

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ