getServerSideProps()가 nextJS 13으로 호출되지 않습니다.

Question

nextJS 13에 익숙해지려고 노력 중입니다. 내가 만난 것은 getServerSideProps 함수에 미리 렌더링된 페이지 소품이 없다는 것입니다. 처음 시도해보는 거라 제가 잘못하고 있는 것인지 모르겠습니다.

여기는 /app/login/page.js

입니다. 으아악

여기서 달성하려는 핵심은 로그인 페이지를 표시하기 전에 axios 요청을 사용하여 서버의 세션 키를 확인하는 것입니다. 사용자가 로그인한 경우 홈페이지로 리디렉션되어야 합니다. 이 작업을 수행할 수 있다면 미래를 위한 코드는 다음과 같습니다.

으아악

저는 npm run dev를 사용해 보았습니다. 여전히 같은 결과가 나옵니다...

Answer 1

페이지를 표시하기 전에 getServerSideProps를 사용하여 서버 측 렌더링 및 인증 확인을 수행하려는 것 같습니다. 코드를 보면 올바른 방향으로 가고 있는 것 같습니다.

그러나 getServerSideProps 返回的 props 传递给您的 Login 组件。为了将服务器端属性传递给组件，您需要修改 Login 函数以接受 message에서 반환된 props를 Login 구성 요소에 전달하지 않는 것으로 나타났습니다. 서버 측 속성을 구성 요소에 전달하려면 다음과 같이 message 속성을 ​​허용하도록 Login 함수를 수정해야 합니다.

으아악

또한 getServerSideProps，您的 npm run dev 命令不会为您的页面生成静态 HTML 文件。相反，页面将根据每个请求生成。因此，如果您想测试 getServerSideProps 是否正常工作，您需要向浏览器中的页面发出请求，并检查控制台日志以获取 console.log( )을 사용하고 있으므로 npm run dev 명령은 페이지에 대한 정적 HTML 파일을 생성하지 않습니다. 대신, 요청이 있을 때마다 페이지가 생성됩니다. 따라서

가 작동하는지 테스트하려면 브라우저에서 해당 페이지에 요청하고 콘솔 로그에서 console.log( ) 문을 확인해야 합니다.

이 정보가 도움이 되기를 바랍니다! 다른 질문이 있으면 알려주시기 바랍니다. 🎜

Answer 2

그래서 내가 댓글에서 언급한 것처럼 다음 https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#async-and-await-in-server -comComponents을 따라야 합니다. Next 13 및 app 폴더를 사용합니다.

이는 다음과 같은 것을 시도해 볼 수 있다는 것을 의미합니다:

으아악

물론 메시지 소품도 추가해야 합니다.