코린이의 개발 일지

이전 글에서 Server에서 Components 컴파일해서 HTML문서 생성하고 클라이언트에서 응답으로 받은 HTML에 다운 받은 JavaScript 파일을 Hydration해서 이벤트 동작까지 하는 과정을 살펴봤다. 웹팩 설정하기: https://polarmin.tistory.com/73 서버 구축하기 : https://polarmin.tistory.com/74 React로 Server Side Rendering 구현하기 - 1. 웹팩 설정 Next.js 쓰면 되는데, SSR을 직접 구현하는 이유? Next.js를 다뤄 보면서 내가 SSR에 제대로 이해하지 못하고, 구현에 급급하여 사용하고 있다는걸 느꼈다. Server Side Rendering을 조금 더 깊게 이해해보고 polarmin.tistory..

서버 구축 이제 서버 사이드 렌더링을 처리할 서버를 작성할 차례이다. Express를 설치한다. npm install express 앞서 만들어 뒀던 index.server.tsx 파일 내용을 초기 렌더링을 해서 정적파일을 클라이언트에 넘겨주는 형태로 바꿔줄 것이다. 서버에서 렌더링해서 클라이언트로 넘겨주기 // ./src/index.server.tsx import React from 'react'; import ReactDOMServer from 'react-dom/server'; import express from 'express'; import { StaticRouter } from 'react-router-dom'; import App from './App'; const app = express(..

Next.js 쓰면 되는데, SSR을 직접 구현하는 이유? Next.js를 다뤄 보면서 내가 SSR에 제대로 이해하지 못하고, 구현에 급급하여 사용하고 있다는걸 느꼈다. Server Side Rendering을 조금 더 깊게 이해해보고자 React로 직접 구현해보기로 했다. 프로젝트 목표 기존에 구현했던 CSR 프로젝트를 SSR로 바꿀 것이다. 구현이 완료된 이후에는 기존 CSR 프로젝트와 SSR 프로젝트의 성능을 비교해볼 예정이다. 순전히 궁금증과 학습을 위해서 시작한 프로젝트이기 때문에 SSR을 처음 접하는 분이라면 Next.js를 사용하는걸 추천한다. Next.js가 리액트 라우터와 호환이 안되는게 불만이라면 Remix라는 프레임워크를 추천한다. 우선 서버 사이드 렌더링의 기본 동작 과정부터 살펴보..