| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
| 29 | 30 |
- 리액트
- client components
- iron-session
- @tailwind base
- dynamic pages
- sever action
- 클로저
- supabase realtime
- 프로그래머스
- revalidatetag
- commit phase
- @tailwind
- RECOIL
- 3진법 뒤집기
- server components
- createbrowserrouter
- @tailwind components
- SSR
- sever components
- 타입스크립트
- CSS
- image component
- static pages
- revalidatepath
- 자바스크립트
- js
- unstable_nostore
- render phase
- interceptor routes
- @tailwind utility
- Today
- Total
목록SSR (2)
개발하는 너구리
Next.js의 렌더링 기법 (SSG, ISR, SSR, CSR)
Next.js는 기본적으로 렌더링 할 경우 서버에서 사전 렌더링(pre-rendering) 하는 방식을 사용합니다.HTML을 미리 렌더링 한 후 사용자의 요청이 오면 Chunk 단위로 Javascript를 보내주어 이벤트가 작동하도록 합니다. 이를 Hydrationd 이라고 합니다.서버에서 사전 렌더링 하는 방법은 SSG와 SSR로 나뉘어집니다. (둘의 차이는 HTML을 생성하는 시기에 있습니다.)Next.js는 다양한 렌더링 방식을 사용는데 각각의 방식의 동작원리와 특징에 대해 알아보려합니다.SSGStatic Site Generation: 정적 사이트 생성빌드 시 HTML이 생성되고 이는 CDN으로 캐시됩니다. 그 후 모든 요청 시 캐시된 HTML을 재사용합니다.웹 페이지를 미리 렌더링하여 HTML 파..
SSR, React Server Components(RSC), Client Components
Next.js Server-Side Rendering (SSR) **Server-Side Rendering (SSR)**는 페이지를 서버에서 렌더링하고, 완전히 렌더링된 HTML을 클라이언트로 보내는 방법입니다. 클라이언트는 초기 렌더링을 기다릴 필요가 없으며, 즉시 사용자에게 완전한 페이지를 제공합니다. Next.js는 기본적으로 SSR을 지원합니다.특징:초기 로드 속도: 서버에서 렌더링된 HTML을 전송하므로 초기 로드 속도가 빠릅니다.SEO 친화적: 검색 엔진이 완전한 HTML을 크롤링할 수 있어 SEO에 유리합니다.데이터 보안: 데이터가 서버에서만 렌더링되므로 보안이 강화됩니다. React Server Components React Server Components는 React에서 새로운 기능..