[이슈해결노트]ssr > ssg로 전환 중 i18n build 오류 정리

이나현·2022년 10월 27일

오라운드

목록 보기

9/18

SSR > SSG로 전환

SSG(getstaticprops) : 첫 요청때 해당 페이지를 pre-rendering하여 정적 문서로 생성해두고 그 다음 요청때에는 생성된 문서 반환

개발모드에서는 SSG로 작성하더라도 매 요청마다 페이지를 재생성한다. 개발의 용이성을 위해 그런 듯

SSR(getServerSideprops) : 요청이 올 때마다 해당하는 HTML 문서를 그때 그때 생성하여 반환

과정

(1) index 페이지에 <ThemeProvider></ThemeProvider>로 감싸져있는 부분을 _app.js로 옮기고 getServerSideProps에 있는 useCookie와 deviceType체크하는 부분을 없애기

⇒ 이유? getStaticProps와 getServerSideProps가 가지고 있는 ctx의 값이 다르기 때문

(2) getStaticProps로 변경하고 deviceType체크 하는 부분을 _app.js로 옮겨 npm run dev를 했을 때에는 잘 구동

⇒ 이유? 명확한 이유는 모르지만 개발환경일 때에는 ssg로 작성하여도 ssr처럼 매번 html을 재생성하여 그런 거 아닌가 싶음

(3)next build 시, 오류

Error occurred prerendering page "/ko". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: cookies.push is not a function
    at Cookie.set (/Users/s-a-073/Desktop/oround/oround_webstorm/node_modules/next-cookie/dist/next-cookie.js:107:21)
    at Function.MyApp.getInitialProps (/Users/s-a-073/Desktop/oround/oround_webstorm/.next/server/pages/_app.js:13067:14)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Object.loadGetInitialProps (/Users/s-a-073/Desktop/oround/oround_webstorm/node_modules/next/dist/shared/lib/utils.js:69:19)
    at async renderToHTML (/Users/s-a-073/Desktop/oround/oround_webstorm/node_modules/next/dist/server/render.js:372:13)
    at async /Users/s-a-073/Desktop/oround/oround_webstorm/node_modules/next/dist/export/worker.js:273:36
    at async Span.traceAsyncFn (/Users/s-a-073/Desktop/oround/oround_webstorm/node_modules/next/dist/trace/trace.js:74:20)
Error occurred prerendering page "/jp". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: cookies.push is not a function
    at Cookie.set (/Users/s-a-073/Desktop/oround/oround_webstorm/node_modules/next-cookie/dist/next-cookie.js:107:21)
    at Function.MyApp.getInitialProps (/Users/s-a-073/Desktop/oround/oround_webstorm/.next/server/pages/_app.js:13067:14)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Object.loadGetInitialProps (/Users/s-a-073/Desktop/oround/oround_webstorm/node_modules/next/dist/shared/lib/utils.js:69:19)
    at async renderToHTML (/Users/s-a-073/Desktop/oround/oround_webstorm/node_modules/next/dist/server/render.js:372:13)
    at async /Users/s-a-073/Desktop/oround/oround_webstorm/node_modules/next/dist/export/worker.js:273:36
    at async Span.traceAsyncFn (/Users/s-a-073/Desktop/oround/oround_webstorm/node_modules/next/dist/trace/trace.js:74:20)

Error occurred prerendering page "/en". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: cookies.push is not a function
    at Cookie.set (/Users/s-a-073/Desktop/oround/oround_webstorm/node_modules/next-cookie/dist/next-cookie.js:107:21)
    at Function.MyApp.getInitialProps (/Users/s-a-073/Desktop/oround/oround_webstorm/.next/server/pages/_app.js:13067:14)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Object.loadGetInitialProps (/Users/s-a-073/Desktop/oround/oround_webstorm/node_modules/next/dist/shared/lib/utils.js:69:19)
    at async renderToHTML (/Users/s-a-073/Desktop/oround/oround_webstorm/node_modules/next/dist/server/render.js:372:13)
    at async /Users/s-a-073/Desktop/oround/oround_webstorm/node_modules/next/dist/export/worker.js:273:36
    at async Span.traceAsyncFn (/Users/s-a-073/Desktop/oround/oround_webstorm/node_modules/next/dist/trace/trace.js:74:20)
info  - Generating static pages (3/3)

> Build error occurred
Error: Export encountered errors on following paths:
        /en
        /jp
        /ko
    at /Users/s-a-073/Desktop/oround/oround_webstorm/node_modules/next/dist/export/index.js:493:19
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Span.traceAsyncFn (/Users/s-a-073/Desktop/oround/oround_webstorm/node_modules/next/dist/trace/trace.js:74:20)
    at async /Users/s-a-073/Desktop/oround/oround_webstorm/node_modules/next/dist/build/index.js:970:17
    at async Span.traceAsyncFn (/Users/s-a-073/Desktop/oround/oround_webstorm/node_modules/next/dist/trace/trace.js:74:20)
    at async /Users/s-a-073/Desktop/oround/oround_webstorm/node_modules/next/dist/build/index.js:844:13
    at async Span.traceAsyncFn (/Users/s-a-073/Desktop/oround/oround_webstorm/node_modules/next/dist/trace/trace.js:74:20)
    at async Object.build [as default] (/Users/s-a-073/Desktop/oround/oround_webstorm/node_modules/next/dist/build/index.js:82:25)

오류

(1) index 페이지를 언어 별로 생성해야하는데 prerendering에 실패함
- 추가적인 typeError로 next-cookie에 cookies.push가 작동하지 않으면서 Cookie.set이 안됌
(2) warning: You have opted-out of Automatic Static Optimization due to getInitialProps in pages/_app. This does not opt-out pages with getStaticProp

⇒ 그저 warning일 뿐 다른 예제에서 작동이 안되지 않음

관련 레퍼런스

(1) https://codegino.com/blog/nextjs-i18n

해당 레퍼런스에는 getInitialProps가 없이 페이지에 getStaticProps를 사용

(2) react-i18next 공식문서 내 자료
- Looking for an optimized Next.js translations setup? ⇒ https://dev.to/adrai/all-side-optimized-nextjs-translations-4n9i
- Using SSG / next export? ⇒ https://dev.to/adrai/static-html-export-with-i18n-compatibility-in-nextjs-8cd

next static 관련 래퍼런스로 테스트 해본 결과 getInitialProps내에 떴던 오류들이 모두 뜨지 않고 잘 해결됌

https://github.com/adrai/next-static-i18n-test

하지만 빌드결과를 봤을 때, SSG로 만들어진 모든 페이지가 locale에 따른 router가 prerender되어서 생성되어야 함!!
제이콥과 논의 시, 우리 서비스에 과연 SSG가 맞을까하는 고민 필요!!

Page                                       Size     First Load JS
┌ ○ /                                      2.51 kB         101 kB
├   /_app                                  0 B            98.9 kB
├ ● /[locale] (1534 ms)                    1.05 kB         115 kB
├   ├ /en (776 ms)
├   └ /de (758 ms)
├ ● /[locale]/blog (488 ms)                3.78 kB         111 kB
├   ├ /de/blog (436 ms)
├   └ /en/blog
├ ● /[locale]/blog/[slug] (1289 ms)        8.21 kB         122 kB
├   ├ /en/blog/postOne (785 ms)
├   └ /de/blog/postOne (504 ms)
├ ● /[locale]/second-page (1020 ms)        1.12 kB         115 kB
├   ├ /en/second-page (513 ms)
├   └ /de/second-page (507 ms)
├ ● /[locale]/third-page (935 ms)          604 B           115 kB
├   ├ /en/third-page (483 ms)
├   └ /de/third-page (452 ms)
├ ○ /404                                   2.53 kB         105 kB
├ ○ /blog                                  2.52 kB         101 kB
└ ○ /second-page                           2.52 kB         101 kB
+ First Load JS shared by all              98.9 kB
  ├ chunks/framework-0f8b31729833af61.js   42.4 kB
  ├ chunks/main-b3ad75c2b76b5926.js        27.9 kB
  ├ chunks/pages/_app-4655b9edc0f4ba41.js  27.2 kB
  ├ chunks/webpack-1ced6a1b45cfb5a0.js     1.44 kB
  └ css/ed77d6b27a8db5d2.css               5.79 kB

○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

이나현

technology blog

이전 포스트

[이슈해결노트]SAFARI(IOS)date format이 달라서 기간한정 기능이 작동 안하는 문제 해결

다음 포스트

[이슈해결노트]ssr > ssg로 전환 중 i18n build 오류 정리

오라운드

[이슈해결노트]SAFARI(IOS)date format이 달라서 기간한정 기능이 작동 안하는 문제 해결

[이슈해결노트] 이미지 최적화 작업

0개의 댓글