search

Kyounghwan01 / blog-comment

blog 코멘트 링크 레포
0 stars 0 forks source link

blog/React/next/getInitialProps/ #5

Open utterances-bot opened 3 years ago

utterances-bot commented 3 years ago

next.js getInitialProps 사용법 | 기억보다 기록을

next.js getInitialProps 사용법, react, seo, ssr, getStaticProps, getStaticPaths, getServerSideProps

https://kyounghwan01.github.io/blog/React/next/getInitialProps/

DoGukKim commented 3 years ago

Next.js의 페이지 최적화 기능을 무효화 시키기 때문에 _app.js에서 커스텀 getInitialProps 를 정의하면 안된다는 글을 본 것 같은데 이에 대한 의견이 궁금합니다.

Kyounghwan01 commented 3 years ago

Next.js의 페이지 최적화 기능을 무효화 시키기 때문에 _app.js에서 커스텀 getInitialProps 를 정의하면 안된다는 글을 본 것 같은데 이에 대한 의견이 궁금합니다.

처음 듣는 말이라 답변을 못드릴것 같네요.. 혹시 그 레퍼런스 공유해주실수있나요??

DoGukKim commented 3 years ago

https://github.com/kirill-konshin/next-redux-wrapper에 보시면 Next.js provides generic getInitialProps when using class MyApp extends App which will be picked up by wrapper, so you must not extend App as you'll be opted out of Automatic Static Optimization: https://err.sh/next.js/opt-out-auto-static-optimization. Just export a regular Functional Component as in the example above. 라는 글이 있어서 질문드렸습니다 ㅎ

DoGukKim commented 3 years ago

https://simsimjae.medium.com/next-redux-wrapper%EA%B0%80-%ED%95%84%EC%9A%94%ED%95%9C-%EC%9D%B4%EC%9C%A0-5d0176209d14 이 블로그에도

_app.js에서 커스텀 getInitialProps를 정의하지마라. 확장하는 순간 next.js의 페이지 최적화 기능을 무효화 시키기 때문이다.

이런 글이 있습니다!

inyong-e commented 3 years ago

안녕하세요~! 저두 그 부분에 대해 궁금해서 여기저기 돌아다니다가 들어오게 되었습니다ㅎㅎ @DoGukkim님 말씀대로 Next.js 공식문서에도 Cumstom _app에 getInitialProps를 쓰는 것보다 각 페이지에 선언하는게 더 나을 수도 있다고 나와있긴 한데, 정확히 이게 어떤 차이가 발생하는지 잘 모르겠네요.

어차피 getIntialProps를 쓰는지 여부에 대해서는 해당 페이지를 정적 파일로 사용하냐는 차이인데, 각 페이지에 getInitialProps를 쓰게되면 결국 Custom app에 쓴거랑 차이가 없지 않나 생각이 드네요

Kyounghwan01 commented 3 years ago

@DoGukKim @inyong-e 내부적인 최적화 이슈로 인해 사용하지 말라는 건지, 이게 어떤 차이로 인해 _app에 사용하지 말라는지 잘 모르겠네요 ㅜㅜ 혹시 이 글을 읽고 댓글의 내용에 대해 아시는 분 있으시면 설명해주시면 좋을꺼같아요!!

DoGukKim commented 3 years ago

개인적으로 _app에서 커스텀을 필요로 하는 경우가 흔하지 않은 것 같아서, 만약 이러한 가능성을 가지고 있다면 우선 지양하는 것이 좋은 것 같습니다. :)

inyong-e commented 3 years ago

@Kyounghwan01 내부적인 최적화 라기보다는, getStaticProps,getStaticPath의 경우에는 빌드 후에 고정된 정적 페이지로 사용할 수 있기 때문에, 유저가 해당 페이지를 요청할때마다 서버사이드 렌더링을 하지 않고 바로 정적 페이지로 넘길 수 있고 CDN 등으로 캐싱된 파일로도 바로 넘길 수 있어서 로딩 퍼포먼스적으로 매우 좋다는 거구, getServerSideProps, getInitialProps는 유저 요청이 있을때마다 서버사이드 렌더링을 해버려서 앞의 두개보단 어쩔 수 없이 성능 퍼포먼스가 떨어질 수 밖에 없다고 알고 있습니당ㅎㅎ

https://nextjs.org/docs/advanced-features/automatic-static-optimization 여기도 보시면, getInitialProps를 쓸때랑 안쓸때랑 빌드 후 생성되는 파일이 어떻게 다른지 설명해주고 있기도 하네요..! :)

근데 제가 가지고 있는 의문은, 일반적으론 정적 페이지로 쓸 수 있는 것은 렌딩페이지 밖에 없지 않나 생각도 들고,

https://nextjs.org/docs/messages/opt-out-auto-static-optimization 요기 글에 보시면, custom app에 getinitialProps를 선언하는 것보단, 각 페이지에 선언하는게 더 좋을수도 있다고 나와있는데, 이게 어떻게 다른건지 궁금해서요 😂