프론트 서버 관련 복습

프론트도 서버다!

서버사이드렌더링의 그 서버는 프론트엔드 서버를 의미한다.
프론트엔드서버/백엔드서버 이렇게 2종류가 있는 셈.
나도 모르게 '서버'라고 하면 백엔드서버를 떠올린 것이다.

관련 포스팅: https://lemontia.tistory.com/938

[frontend] SSR, 서버사이드 랜더링(next.js, getInitialProps)

"SSR은 모든 리소스를 서버(frontend 서버)에서 렌더링할 후 리턴한다.
즉, SSR의 모든 처리가 끝나고 완전한 HTML을 전달한다!

다만, SSR의 경우 API 호출까지 완료해서 전달하는게 가능한데,
API 속도에 따라서 CSR보다 더 느려보일 수는 있다.
모두 완료될 때까지 화면 구성을 받을 수 없기 때문이다.(이렇게 개발하면 안되겠지)

CSR은 우선 빈화면을 보여주고 API호출로 데이터 통신을 할 수 있는데,
일단 데이터만 없을 뿐 흰 화면은 아니니 뭐라도 뜬 것처럼 보일 수 있다."

API 호출???

"기본적으로 Next.js는 모든 페이지를 Pre-Rendering하는 기법을 사용함.
이 pre-rendering하는 형태 2가지가 SSG / SSR이다.
Next.js 9버전부터 getStaticProps와 getServerSideProps 2가지 개념이 나왔는데,
각각이 SSG(Static Generatoin), SSR(Server-side rendering) 2가지 방식이다.

공식문서에서는 SSG로 만들기를 추천한다.
캐싱을 해놓기 때문에 더 좋은 성능을 보여줄 수 있기 때문이라고.
HTML은 build-time에 만들어지고, 각각 request 보낼 때 재사용함.
getStaticProps를 export 해서 사용.

getServerSideProps는 aync로 export 해주면 매 request때마다 페이지에 있는 내용들을 pre-rendering해준다.
마찬가지로 client 사이드에서 실행되지 않고, page에서만 사용할 수 있다.
그래서 페이지를 렌더하기 전에 꼭 fetch 해야 하는 데이터가 있을 경우 사용하라고 되어있다.
매 요청시마다 서버에서 계산해야 하므로 더 느릴 수밖에 없다고 한다."

그러니까, 처음부터 있어야 하는 데이터는 getServerSideProps로 백엔드서버에 요청해서 가져오고,
데이터를 채운 상태로 화면을 그려낸다는(pre-rendering)
보통 웹사이트는 계속 변하는 데이터가 많으니까 getServerSideProps를 많이 쓴다고 함.

노드버드 6챕터 강의 필기를 자세히 보는 것을 추천.
6챕터에 있는 내용들을 다시 보니까 더 이해가 잘 된다. 그땐 막연했는데.

1. CSR / 2. SSR

(csr은 로그인한 상태에서 새로고침을 하면, 프론트서버로 가기 때문에
잠시 로그인이 풀렸다가 그때 백엔드서버로 요청을 보내서 로그인이 된 상태로 돌아옴.)

SSR은 처음 주소를 요청했을 때 바로 데이터를 받아와서 화면에 그려줌
그래서 CSR은 2번 요청 보내야 하는데, SSR은 1번만 보내도 돼서 초기 로딩 속도가 빨라지는 느낌.

getServerSideProps를 사용하면, 데이터를 채운 다음에 화면을 렌더링함.

리덕스서버사이드렌더링의 원리가 뭐냐면
처음엔 초기상태로 있다가, getServerSideProps가 실행되고나서 실행된 결과를 HYDRATE로 보내줌

getServerSideProps는 프론트서버에서 실행되는 코드임.

 

 

그렇다. 프론트도 서버다.
그러다 백엔드서버 또는 API서버에게 데이터 요청을 보내고, 응답을 받을 뿐.
이제 모든 궁금증이 풀렸다!