Next.js: getInitialProps()에서 데이터 가져오기: 서버 측 대 클라이언트 측

Next.js: getInitialProps()에서 데이터 가져오기: 서버 측 대 클라이언트 측

Next.js를 사용하고 있으며 Express를 사용하는 커스텀 서버가 있습니다.데이터베이스에서 데이터가 필요한 페이지가 있습니다.

getInitialProps(), 서버에서 실행할 때는 데이터베이스에서 데이터를 가져와 반환하면 됩니다. 아무 문제가 없습니다.하지만,getInitialProps()클라이언트 측에서 실행할 수도 있습니다(사용자가 처음에 다른 페이지를 요청한 후 이 페이지로 이동할 때).그 경우, 제가 고객이기 때문에 당연히 데이터베이스에서 데이터만 가져올 수는 없습니다. 서버와 대화하고 검색을 위해 AJAX를 사용해야 합니다.

물론, 이것은 또한 제가 이 요청을 처리하기 위해 서버에 새로운 Express 경로를 정의했다는 것을 의미합니다. 이 경로는 서버측 부분과 정확히 동일한 코드를 포함할 것입니다.getInitialProps(), 매우 바람직하지 않은 일입니다.

이 문제를 해결하는 가장 좋은 방법은 무엇입니까?

getInitialProps()는 항상 요청 및 응답을 서버에서만 설정된 매개 변수로 수신합니다.

static async getInitialProps({req}){
 if(req){
   // called on server
 } else {
   // called on client
 }
}

https://github.com/zeit/next.js#fetching-data-and-component-lifecycle

좋은 해결책이 없었던 것 같아 이 문제에 대한 간단하고 우아한 해결책인 넥스트 익스프레스를 제공하기 위해 도서관을 만들어 출간했습니다.

당신의getInitialProps데이터베이스에서 가져올 논리를 가진 새로운 고속 경로에 http 요청을 해야 합니다.그 논리는 결코 UI 계층에 있어서는 안 됩니다.

그러면 사용자가 클라이언트에 있든 서버에 있든 관계없이 이 경로를 호출해야 합니다. 코드 분기를 수행할 필요가 없습니다.

다음 .js 앱과 구분되는 API를 만듭니다.다음 앱을 서버에서 페이지를 렌더링하는 프론트엔드 클라이언트로 생각합니다.

시간이 지남에 따라 새로운 솔루션이 등장합니다.
Nextjs는 주로 이러한 사용 사례를 위한 새로운 방법을 도입했습니다.

getServerSideProps only runs on server-side and never runs on the browser. 

제가 발견한 가장 빠른 방법은 데이터를 수집하는 것입니다.__NEXT_DATA__

MyApp.getInitialProps = async (): Promise<AppCustomProps> => {
  const isInBroswer = typeof window !== 'undefined';
  if (isInBroswer) {
    const appCustomPropsString =
      document.getElementById('__NEXT_DATA__')?.innerHTML;

    if (!appCustomPropsString) {
      throw new Error(`__NEXT_DATA__ script was not found`);
    }

    const appCustomProps = JSON.parse(appCustomPropsString).props;
    return appCustomProps;
  }

// server side, where I actually fetch the data from db/cms and return it
}

언급URL : https://stackoverflow.com/questions/49415755/next-js-fetching-data-in-getinitialprops-server-side-vs-client-side