7월 1일 학습목표
SSR
어제까지 우리가 한 배포과정
근데!
최초접속에 데이터가 포함되어 있는 상태로 받아와야 하는 경우가 생긴다(최적화 등)
현재 구조 (데이터를 2번 받아오는)에서는 ...
특히 opengraph 할 때
터미널에서 하드코딩 한 부분은 데이터를 가져 올 수 있지만
useQuery를 통한 부분은 데이터를 가져 올 수 없었다
-> useQuery는 브라우저에서 2차적으로 렌더링 된 것이기 때문에 터미널에서 볼 수 없음
따라서! 프론트 서버에서는 백엔드에서 useQuery데이터까지 받아서, 한 번에 브라우저로 보내주어야 한다
24시간 프로그램이 켜져있어야 백엔드로 서버를 요청할 수 있기 때문에 storage 방식은 불가능
⭐️SSR은 서버가 있어야 한다⭐️
리액트18이전에는, 이 과정이 매우 복잡하고 어려웠다 (node.js를 통해 백 서버를 구축해야할 정도) 그래서 NEXT.JS에서 함수를 통해 이 과정을 단축! 했는데.. 리액트18에서는 SSR까지 지원한다고 한다. 18이 더 상용화 되면 배워야겠지?
우리가 SSR이 필요한때는?
상품 ID에 따라 contents를 비롯한 내용이 바뀌어야 할 때 - 하드코딩 불가능
SSR 과정
받은 props로 바꿔주기
단 yarn dev , yarn start가 되었을 때!!!
여기는 서버라서 아폴로를 사용할 수 없으니까... graphql-request를 사용하자(리프레쉬토큰처럼)
yarn add graphql graphql-request
받아온 쿼리를 resul에 담아주고
기존에 사용하던 쿼리를 적어주면
이 페이지는 서버사이드렌더링이 가능해진다.
모든 페이지에서 서버사이드렌더링이 가능한 것은 아니고, 이 작업을 해야만!
서버가 켜져있어야 하기 때문에 static 페이지를 만들수 없어 yarn dev:ssg 불가능
out폴더에 boardId부분은 없어진다
터미널에서도 이제 확인 가능 자쟌
프론트엔드 개발자의 미래
최근의 트렌트 : 프로그레시브 웹앱 (PWA) -> 접속해서 클릭하면 자동으로 화면에 어플(?)이 만들어지고 접속도 가능해진다. 아직까지 게임과 같은 고사양은 불가능하지만, 간단한 푸쉬알림등은 가능
리액트 개발자 : PC, 태블릿, 모바일 + 리액트 네이티브(앱 - 안드로이드, ios)
앞으로 해야할 것 실무형 알고리즘 공부하기
