인프런 커뮤니티 질문&답변

url을 입력하면 프론트엔드 서버로 갑니다. getInitialProps는 프론트엔드 서버입니다. 프론트(브라우저)랑 프론트엔드 서버는 다릅니다.

1. next를 사용하지 않으면 서버 자체를 직접 구축하셔야 합니다. 서버를 직접 구축하는 경우나 next나 모두 요청이(localhost:3060) 가면 서버로 먼저 갑니다. 그 후에 서버가 리액트 관련 js 파일들을 제공하고, 브라우저가 제공받은 js파일을 실행합니다.

2. next에서도 프론트로 먼저가지 않고 서버로 먼저 가서 getInitialProps가 실행되어 데이터들을 채워넣은 HTML이 한번에 리턴됩니다.

그냥 리액트에서는 자체 서버가 있다면 그 서버로 가서 html과 js파일만 받아옵니다. 브라우저가 html + js를 실행한 후 데이터 가져오는 코드를 확인하여 데이터를 한 번 더 가져옵니다. 즉 요청이 크게 두 가지 유형으로 보내지는 겁니다(초기 html+js, 그리고 데이터 로딩)

3. 자체 구축 서버도 서버에서 html 보내줍니다. html을 안 보내주면 브라우저는 아무것도 실행할 수 없습니다.

next는 거기에 데이터까지 넣어서 보내주는 것입니다.

네네 과정은 맞습니다. 다만 화면이 표시되는 것은 ssr을 하지 않았을 때 더 빠릅니다. 화면에 데이터까지 다 표시되는 것은 ssr이 더 빠릅니다.

아!! 이해됐습니다 감사합니다.

그러면 ssr을 하지않았을때는 . 프론트=브라우저가 리액트자체서버를 통해  html과 js를 받아오고 useEffect를 사용하여 api로 백엔드 서버에서  데이터를 받아오느라 2번 요청을 해서 느린것이고, ssr을 할 때는 next 프론트엔드서버에 접속하면 getinitialprops에서 바로 백엔드 데이터를 받아서 html과js까지 같이 프론트=브라우저에 넘겨주느라 빨라서 ssr이 속도가 훨씬 빠른게 맞나요?!

그거는 아까 답변해주신거를 읽고 이해를 했는데요 . 제가 이해가 안가는 부분은

url을 입력하면 백엔드 서버로 먼저가서 getinitialprops가 실행된다고 하셨는데 

그러면 getinitialprops가 백엔드 서버라는 말씀인데 거기서 어떻게 리덕스사가가 실행되죠?

getInitialProps 안에서 리덕스 사가가 실행되는게 바로 프론트 서버에서 실행되는 겁니다. 브라우저에서 실행되는 게 아닌 것이고요.

next는 서버가 2개인 상황이고, 자체구축서버는 서버가 1개뿐입니다. next가 서버가 2개라서 헷갈리시는 것 같습니다. next는 기존 브라우저 - 백엔드 서버 구조에 가운데 프론트 서버가 하나 더 추가된 것 뿐입니다. SSR을 위해서요.

그냥 리액트에서는 자체 서버가 있다면 그 서버로 가서 html과 js파일만 받아옵니다. 브라우저가 html + js를 실행한 후 데이터 가져오는 코드를 확인하여 데이터를 한 번 더 가져옵니다. 즉 요청이 크게 두 가지 유형으로 보내지는 겁니다(초기 html+js, 그리고 데이터 로딩)

리액트 자체서버에가서 html과 js파일을 받아오는건 백엔드 서버가 저절로 하는건가요 url입력하고 접속하면??

근데 왜 url을 3060(프론트엔드서버)로 접속하는건가요??

3. 자체 구축 서버도 서버에서 html 보내줍니다. html을 안 보내주면 브라우저는 아무것도 실행할 수 없습니다.

이렇게 말씀하셨는데 자체구축서버에 html을 보내주는거는 백엔드 서버라는 말이신가요!/>?

그럼  처음 접속시 getinitialProps가 서버에서 실행될때 getinitialProps안에서 리덕스 사가가 실행되는건 어떻게 될수있는건가요? 원래 리덕스사가는 프론트엔드 서버에서 실행되는거아닌가요:?!