일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- React
- 이분 검색
- tailwind
- app router
- autosize
- 공변성
- Cypress
- 투포인터
- map
- webpack
- 리터럴 타입
- recoil
- ESlint
- 인터섹션
- TS
- CORS
- Jest
- 결정 알고리즘
- useAppDispatch
- RTK Query
- 타입 좁히기
- 무한 스크롤
- Promise
- dfs
- CI/CD
- 반공변성
- SSR
- 호이스팅
- 태그된 유니온
- async/await
- Today
- Total
목록CSR (2)
짧은코딩
Next는 브라우저에서 기본적으로 pre-rendering(사전 렌더링)을 한다. => pre-rendering은 Server에서 DOM 요소들을 Build 하여 HTML 문서를 렌더링 하는 것을 말한다. SSG SSG는 Static Site Generation 빌드 시 html에 데이터를 미리 담아서 파일을 만들고 접속하는 유저들에게 보여주는 방식 장점 이미 만들어진 html를 여러 사람들에게 보여주는 것 서버 부담이 적고 응답 시간이 빠름 보통 마케팅 페이지, 블로그 글 등 한번 만들고 변화가 적은 페이지에 적합함 단점 데이터가 바뀌면 다시 빌드해줘야 함 동적 컨텐츠를 사용하면 SSG는 좋지 않음 SSR이나 CSR을 사용하면 되는 거 아님? -SSR 서버 부하가 높아짐 -CSR 초기 로딩 느림 seo..
Next.js Next.js는 리액트를 기반으로 만들어진 프레임워크이다. 기능이 더 추가 되었지만 프레임워크다 보니까 자유도는 떨어졌다. 그리고 서버 사이드 렌더링(SSR)을 사용한다. 전통적인 SSR 이런식으로 요청을 한다. 이런 방법도 비교적 간단한 방법이다. -단점 사용자는 방문 할 페이지가 1개인데 다른 페이지도 주면 낭비가 될 수 있다. => 코드 스플리팅을 하면 모든 페이지를 불러오지 않아도 되기 때문에 위에서 말한 단점을 해결할 수 있다. Pre-Rendering 프리 랜더링은 검색 엔진이라는 것을 알아차리고 검색 엔진일때만 백엔드 서버에서 데이터를 받아서 html을 완성해서 준다. 일반 유저에서는 리액트 방식처럼 준다. Sever Side Rendering 첫 방문만 전통적인 방식으로 불러..