hydrate

이전에 동일한 JSX를 갖고 html과 React App을 렌더링하고, 이 둘을 연결시켜보았다.이번에는 Next(12버전)의 핵심 기능중 하나인 getServerSideProps를 구현하고, 이걸 클라이언트와 연동시켜보고자 한다. getServerSideProps아래는 Next docs에서 가져온 사진이다.이걸 어떻게 사용하는지는 이미 알고있다고 가정하고, 이 코드들의 특성을 분석해보자. 이 코드를 보면 네가지를 알 수 있다.getServerSideProps는 page컴포넌트에 작성되어야한다.함수 이름은 getServerSideProps이며, export되어야한다.page컴포넌트에 getServerSideProps에서 반환된 값을 props로 넘겨준다.page컴포넌트 자체는 default export되어..

이전 게시글에서 호환 가능한 JSX 컴포넌트를 만들었다.이제는 JSX를 사용해서 SSR에서 반환할 HTML과 클라이언트에서 hydrate, 업데이트할 코드를 작성해볼 것이다. 이번 게시글에서 할 일jsx함수로 부터 반환된 miniReactNode객체를 서버에서 HTML String으로 변환할 것이다.(클라이언트로 js파일을 여기서 보내 줄 것이다.)jsx함수로 부터 반환된 miniReactNode객체를 클라이언트에서는 DOM으로 변환할 것이다.클라이언트에서는 이전에 만들어둔 miniReact를 활용하여 useState을 통해 update할 것이다.update는 VDOM을 비교하여 바뀐부분만 업데이트한다.받은 클라이언트는 js파일을 통해 hydrate를 하여 miniReact로 동작하는 어플리케이션을 조작..