search

jl917 / learn3

0 stars 0 forks source link

React(SSR) #1

Open jl917 opened 2 years ago

jl917 commented 2 years ago

Suspense react-router, react-query, recoil style

loadable https://loadable-components.com/

jl917 commented 2 years ago

react-dom 중 render를 사용하지 않고 hydrate를 사용할 경우 css modules 스타일을 실시간으로 가져오지 못하는 경우가 있음. 초기 랜딩시 import './style.css' 방식으로 가져오기 필수

jl917 commented 2 years ago

hydrate ❌ <h1 className={s.heading}>recoil count</h1>
✅ <h1 className="s_h">recoil count</h1> ✅ <h1 style={{color: 'red'}}>recoil count</h1>

vite 공홈에서 지정한 서버 사용시 css module 이슈 없음.

jl917 commented 2 years ago

express 서버 빌드 필수.

jl917 commented 2 years ago

react-router 서버단 StaticRouter 컴포넌트 사용 칼라이언트 BrowserRouter 컴포넌트 사용

req.originalUrl 사용할것.

jl917 commented 2 years ago

react 17까지 suspense 사용시 ssr지원이 안됨 Error: ReactDOMServer does not yet support Suspense.

jl917 commented 2 years ago

Loadable Components는 webpack만 지원. split, fallback(로딩)까지 처리 되지만 서버에서 컴포넌트를 불러 못옴

jl917 commented 2 years ago

vite로 dev 모드 사용시 style 늦게 불러오는 이슈로 화면이 깜박이는 이슈가 있음. 빌드이후 css가 번들링 되어서 해결됨.

jl917 commented 2 years ago

SSR同构难点

服务端开发：Node开发能力和掌握框架提供的服务端渲染技术 性能和监控：服务端渲染性能，服务端异常监控和处理 路由同构：如何同一套路由兼容Node环境和浏览器环境 请求和cookie：如何兼容两端请求，服务端缓存请求用户身份以及cookie的转发 状态数据共享：服务端store的如何共享给客户端 构建和部署：两端js的构建，Node服务的部署和客户端js的部署