안녕하세요 질문드립니다

Question

css ssr 이후로 back서버쪽이나 front 서버쪽 오타나 데이터 타입에러떄문에 에러나면 모두 아래처럼 에러 메시지가 뜨는데 ....모든 에러가 다 이렇게 뜨니깐 에러 해결하기가 너무 힘드네요 ㅠㅠ  _document.js 파일은 제로초님이랑 동일하고  MyDocument.getInitialProps() 안에 개체가 들어가야되는데  undefined가 들어가는 이유가 ... ssr할때 서버에서 완성된 파일을 내려줘서 들어가야되는데 서버에러가 떴을 때 res를 못해주니 저곳에 아무것도 안들어가니깐 저런 에러가 발생하는 걸까요 ?  그렇다면 _document.js 만들기 전에는 왜 저런 에러가 나지 않았던걸까요 ?  그리고 혹시 해결방법이 없을까요 ?  Server Error Error: "MyDocument.getInitialProps()" should resolve to an object. But found "undefined" instead. This error happened while generating the page. Any console logs will be displayed in the terminal window. Call Stack loadGetInitialProps file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/next-server/lib/utils.js (5:295) async renderToHTML file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/next-server/server/render.js (54:1107) async file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/next-server/server/next-server.js (109:97) async file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/next-server/server/next-server.js (102:142) async DevServer.renderToHTMLWithComponents file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/next-server/server/next-server.js (134:387) async DevServer.renderToHTML file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/next-server/server/next-server.js (135:923) async DevServer.renderToHTML file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/server/next-dev-server.js (35:578) async DevServer.render file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/next-server/server/next-server.js (72:236) async Object.fn file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/next-server/server/next-server.js (56:580) async Router.execute file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/next-server/server/router.js (23:67) async DevServer.run file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/next-server/server/next-server.js (66:1042) async DevServer.handleRequest file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/next-server/server/next-server.js (34:504)

jjongrrr · Answer

오잉...다시 아래 소스로 붙이니깐 잘 되네요 ...;;;;; 제로초님 소스 붙여도 똑같길래 안되는 줄 알았는데 ...잘 되네요 ..... 윗댓글에 id password만 가져왔던건 postcard에 nickname[0] 이 없어서 에러가 났던거였네요 import React from 'react' ; import Document , { Html , Head , Main , NextScript } from 'next/document' ; import { ServerStyleSheet } from 'styled-components' ; export default class MyDocument extends Document { static async getInitialProps ( ctx ) { const sheet = new ServerStyleSheet (); const originalRenderPage = ctx . renderPage ; try { ctx . renderPage = () => originalRenderPage ({ enhanceApp : App => props => sheet . collectStyles ( < App { ... props } /> ), }); const initialProps = await Document . getInitialProps ( ctx ); return { ... initialProps , styles : ( <> { initialProps . styles } { sheet . getStyleElement () } ), }; } finally { sheet . seal (); } } render () { return ( < Html > < Head /> < body > < Main /> < NextScript /> ); } }

jjongrrr · Answer

프론트나 백에서 에러가 나지 않으면 잘 작동합니다..! 근데 제가 기능 추가하다가 아래처럼 작성했었는데 오류가 나더라구요 ... 이렇게 서버쪽에 에러가 있을 때 저런식으로 뜹니다  예를 들어 아래처럼 유저모델에 id랑 password만 가져오면 저게 문제라고 에러가 나야되는데 위에 소스처럼 에러가 납니다. 아래 소스는 nickname이나 email을 가져오면 잘 되구요  include : [{      model :   User ,       attributes :  [ 'id' ,  'password' ]  }

jjongrrr · Answer

아래입니다! import React from 'react' import Document , { Html , Head , Main , NextScript } from 'next/document' ; import { ServerStyleSheet } from 'styled-components' export default class MyDocument extends Document { // styled components ssr static async getInitialProps ( ctx ) { const sheet = new ServerStyleSheet (); const originalRenderPage = ctx . renderPage ; try { ctx . renderPage = () => originalRenderPage ({ enhanceApp : App => props => sheet . collectStyles ( < App { ... props } /> ), }); const initialProps = await Document . getInitialProps ( ctx ); return { ... initialProps , styles : ( <> { initialProps . styles } { sheet . getStyleElement () } ), }; } catch ( error ) { console . error ( error ); } finally { sheet . seal (); } } // 아래가 기본꼴. _app.js 위에 _document.js가 있고 여기에 ssr하면 됨. 여기에서 html head body 수정가능 // https://polyfill.io/ 에서 폴리필 체크해서 복사하고 NextScript 얘보다 위에 폴리필 등록 render () { return ( < Html > < Head /> < body > < script src = "https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019" > < Main /> < NextScript /> ) } }

zerocho · Answer

_document.js 보여주세요.