# ISR

28개의 포스트

Rendering 방식들

CSR CSR이란? client side rendering을 줄여서 말한 것으로 rendering을 하는 주체자가 client라는 것이다. 나는 react로 web을 개발하기 때문에 여기서는 Browser라고 표현하면 되겠다. csr은 사용자가 브라우저에 접속을 하게되면 browser에서 server로 요청을 하게 된다. 이렇게 되면 처음에 빈 html 파일이 오게 되고 그다음에 react와 js 소스 코드를 받게 된다. 이 모든 것을 받아서 browser에서 dom 요소로 변환해서 보여주게 되는데, 이것을 CSR 이라고 보면 되겠다. 장점 일단 글을 보면 알겠지만 처음에 모든 것을 로딩을 하기 때문에 한번 로딩을 하게 되면 빠르게 UX를 제공한다. update가 일어나거나 하면 부분적으로만 서버에 요청을 하기 때문에 서버의 부하가 작다. 단점 처음에 서버에 html을 포함하여 전부 요청을 하기 때문에 page 로딩시간 (

2023년 9월 13일
·
0개의 댓글
·

SSG, SSR, CSR, ISR

react 웹 페이지를 렌더링하는 여러 방법 1. CSR(Client Side Rendering) 웹 페이지의 내용을 브라우저(클라이언트)에서 직접 생성 csr test 장점: 제공되는 데이터는 최신 상태, 서버 부하가 줄어듬 단점: 초기 로드 시간이 길어진다, SEO에는 적합하지 않음 2. SSR(Server Side Rendering) 웹 페이지의 내용을 서버에서 미리 생성 ssr test 장점: 초기 페이지 로드 시간이 빠르고 SEO에 유리함, 데이터가 최신임 단점: 서버에 부담이 올 수 있음 3. SSG(Static Site Generation) 웹 페이지를 미리 정적 파일로 생성 빌드 시간에 웹 페이지의 모든 가능한 버전을 미리 생성 사용자가 페이지를 요청하면 이미

2023년 9월 11일
·
0개의 댓글
·

블로그 ISR도입기

coding.gif 이번에 블로그를 다시 만들었다… (블로그 최종최최종_최최최종…) 이번 블로그의 가장 큰

2023년 8월 20일
·
0개의 댓글
·

[web] SSG, CSR, SSR, ISR

ChatGPT 3.5 turbo SSG (Static Site Generation) 정적 사이트 생성은 미리 빌드된 HTML 파일을 생성하여 서버에 저장하고, 클라이언트 요청에 따라 해당 정적 파일을 제공하는 방식입니다. 정적 파일이 미리 생성되므로 서버 사이드 렌더링보다 빠른 응답 속도를 제공합니다. 주로 정적 컨텐츠가 자주 변경되지 않는 사이트에 적합합니다. 정적 사이트 생성의 특징 초기 로딩 속도가 매우 빠르며, CDN을 통한 전송으로 더욱 최적화될 수 있습니다. 컨텐츠 업데이트마다 사전에 빌드해야 하므로 업데이트에는 시간이 소요될 수 있습니다. 동적 컨텐츠의 경우 추가적인 데이터 로딩이 필요할 수 있습니다. 일반적으로 선택하는 방식은 앱의 특성에 따라 다릅니다. 정적 사이트 생성은 컨텐츠가 자주 변경되지 않는 블로그나 정보 사이트에 유용하며, 서버 사이드 렌더링은 동적인 요소가 많은 앱에 적합합니다. 최근에는 이 두 방식을 혼합한 Hybrid Appr

2023년 8월 4일
·
0개의 댓글
·
post-thumbnail

[Next.js] ISR 특징, 장/단점

ISR이란? Incremental Static Regeneration SSG를 보완하기 위해 나온 것으로 주기적으로 다시 만들 수 있는 방식이다. 렌더링의 주체자는 서버이고, 주기적으로 렌더링을한다. 기본적으로는 SSG와 동일한 원리이지만 우리가 설정한 주기만큼 페이지를 계속해서 다시 만들어준다. ISR의 장점 SSG의 장점들 + 데이터가 주기적으로 업데이트 됨 ISR의 단점 실시간 데이터가 아님 주기적으로 업데이트가 되기는하지만 여전히 실시간으로 변하는 데이터를 반영할 수 없음 여전히 사용자별 정보 제공이 어려움

2023년 7월 14일
·
0개의 댓글
·
post-thumbnail

원티드 프리온보딩 챌린지 7월 - 사전과제

사전 과제 Assignment) 개인 블로그에 아래 질문에 대한 포스팅을 하고 링크를 제출해주세요. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요. Next.js 프로젝트에서 yarn start(or npm run start) 스크립트를 실행했을 때 실행되는 코드를 Next.js Github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요. > https://nextjs.org/docs/getting-started (Next.js 세팅 가이드) https://github.com/vercel/next.js/ (Next.js Github 레포지토리) document.js, app.js, getServerSideProps 같은

2023년 6월 28일
·
0개의 댓글
·
post-thumbnail

Next.js의 렌더링

SSR & SSG 웅서트 스터디 세 번째 주제 - SSR & SSG in Next.js 넥스트의 렌더링 방식에 대해 아주 간략하게 알아보자! Next.js 넥스트는 SSR, SSG을 지원하는 React 기반의 Js 프레임워크이다. 특징 & 장점 Page 기반 라우팅 pre-rendering(SSR & SSG) SEO 최적화 SSR(Server Side Rendering) 말 그대로 서버단에서 페이지(html)을 렌더링 하여 보내주는 방식이다. 그래서 이게 뭐가 좋다고? 페이지를 미리 렌더링하여 사용한다. 이것은 유저에게 측에 훨씬 빠르게 페이지를 렌더링해줌으로써 더 좋은 경험을 제공해줄 수 있다. But 쉽게 말해 렌더링 작업을 서버에 떠넘긴다. 페이지를 요청할 때마다 서버에서 렌더링 해주어야 하기에 서버 부하가 크다. SSR vs CSR 기본적으로 Plain React 환경을 포함한 기본 자바스크립

2023년 6월 2일
·
0개의 댓글
·
post-thumbnail

Next.JS를 현명하게 사용하는 방법

필자의 경험 필자는 교내 학생이나 선생님, 여러가지 사건/사고 등을 나무위키나 위키백과 등의 문서처럼 문서화시켜 학생들이 자유롭게 문서를 수정할 수 있는 교내 위키를 개발해본 적이 있다. 처음 만들 때에는 이를 React와 TypeScript를 이용해서 작성했는데, 검색 엔진 최적화가 자동으로 되지 않는다는 단점도 있고, 그 외에도 여러가지의 작은 버그나 이슈들이 많이 있었다. 그래서 내 팀원과 함께 이를 Next.JS로 마이그레이션 하는 겸, 코드까지 같이 리팩토링해서 안정화된 위키 서비스로 업그레이드시키자고 마음 먹었다. 그러나... 그렇게 처음 SSR과 SSG에 대해 공부하고나서 막상 비주얼 스튜디오 코드를 켜서 "적용해보자!"라고 생각하고 코드를 본 순간 뇌가 멈춰버렸다. "그런데, SSR이 더 좋을까, SSG가 더 좋을까?"라는 생각이 들며 내 뇌는 무한루프를 돌리다가 시간 초과로 메모리가 터져버렸던 적이 있다^^... 왜 공부할 때 이를 자세하게 알

2023년 6월 2일
·
0개의 댓글
·
post-thumbnail

[React] Next.js를 공부하며 알아보는 웹앱의 렌더링 방식

SPA와 CSR 리액트로 만든 애플리케이션은 주로 SPA(Single Page Application)와 CSR(Client Side Rendering) 방식을 사용함. SPA(Single Page Application)란? 하나의 페이지에서 모든 기능과 렌더링을 수행하는 방식. ↔ MPA(Multi Page Application) 장점 전체 페이지를 다시 로드하지 않고 필요한 부분만 업데이트하므로 빠른 상호작용과 반응성을 제공함. 이어지는 페이지 로드 없이 원활한 애플리케이션 간 이동이 가능하기에 쾌적한 사용자 경험을 제공함. 클라이언트에서 처리되는 동적 렌더링과 로직으로 서버 부하 감소. 웹과 모바일 앱 간 공통 코드를 재사용할 수 있어 개발 효율성이 좋음. 단점 필요한 모든 코드를 한 번에 로드해야 하기에 초기 로딩 속도가 느림. 클라이언트 측에서 동적 렌더링을 수행하기 때문에

2023년 6월 2일
·
0개의 댓글
·

Front-end에서의 렌더링 방식

🧐 Next.js를 학습하기에 앞서... Next.js는 리액트 기반의 프레임워크로 웹 애플리케이션을 만드는 데 필요한 전체적인 솔루션을 제공한다. 기본적으로 React로 만든 애플리케이션은 SPA로 간주하는데 이는 Client Side Rendering 방식을 채택한다. Next.js를 사용하면 Server Side Rendering 뿐만 아니라 하이브리드 렌더링도 가능하기 때문에 많은 개발자들이 사용하는 프레임워크인데 이러한 Next.js를 사용하기에 앞서 렌더링 방식의 종류와 각 방식의 장∙단점에 대해 짚고 넘어가고자 한다. 💡 CSR(Client Side Rendering) > : 렌더링하는 주체가 클라이언트, 즉 브라우저인 렌더링 방식으로 서버에서 HTML 파일, React 라이브러리, 작성한 js 코드 등을 다운받아 브라우저에서 DOM요소로 변환하여 보여주는 방식 장점 첫 번째 로딩 이후부터는 빠른 UX 제공

2023년 5월 10일
·
0개의 댓글
·
post-thumbnail

웹 랜더링 방식 CSR, SSR, SSG, ISR

CSR, SSR에 대해서는 알고있었는데 Next.js 공부중 처음 접해보는 랜더링 방식인 SSG, ISR에 대해서도 이해할겸 간단한 장단점 정리와 언제 어떤 방식을 사용하는게 좋을지에 대해서 공식문서들을 바탕으로 정리해보자 CSR (Client Side Rendering) 동작원리 유저가 웹 페이지를 방문하면, 브라우저는 빈 HTML 파일을 다운로드 한다. 브라우저는 JS 번들 파일을 다운로드한 다음 AJAX를 통해 API 요청을 수행하여 동적 컨텐츠를 가져오고 파싱하여 최종 컨텐츠를 랜더링한다. 사용자가 페이지를 이동할 경우, 서버에 추가 요청하지 않고 이미 다운받은 JS를 이용하여 랜더링 한다.

2023년 3월 17일
·
0개의 댓글
·

CS | Rendering 종류

브라우저의 Rendering 기본적인 렌더링의 설명이다. 아래 링크에 자세한 자료와 설명이 있다. 영상 - https://www.youtube.com/watch?v=oLC_QYPmtS0 자료 - https://davidhwang.netlify.app/Developments/browser-rendering-process/ 1. CSR(Client Side Rendering) Build -> Static Server -> Runtime(Web Browser) Build 과정에서 각각의 script와 CSS 파일들이 생성되고, 이 생성된 파일들이 웹 브라우저에서 렌더링 된다. 모든 로직, 데이터 페칭, 템플릿 및 라우팅은 서버가 아닌 클라이언트에서 처리된다. > ### CSR의 장점 동적인 콘텐츠가 많이 포함된 웹 페이지라면 CSR이 적절하다. 브라우저는 서버에 최초 요청에서 html, js, css 파일을 받고 js 파일 다운이 완료되면 비어있는 html 위에

2023년 2월 2일
·
0개의 댓글
·
post-thumbnail

[Next.js] CSR vs SSR

Next.js를 도입하게 되면서, 다양한 pre-render 방식에 대해 접하게 되었다. 하지만 자료를 읽으며 용어에 혼란이 온 부분이 있었다. 가령 SSG도 넓은 범위에서는 서버 사이드 렌더링의 정의에 속하지만, 현재 나오는 Next.js의 pre-render 방식과 관련해 정의한 문서들은 SSG를 서버 사이드 렌더링과 다른 방식인 것처럼 정의내렸다. 더 나아가 CSR과 SSR을 설명함에 있어 중요한 MPA와 SPA를 다루지 않는 글도 많았다. 그래서 개념 정리를 위해, 그리고 이 글을 보는 누군가도 개념을 확실히 잡기를 바라는 마음에서, CSR/SSR/SSG/ISR로 나누어 설명하는 render 방식을 CSR과 SSR이라는 큰 틀로 나누어 설명하고자 한다. 잘못된 설명이나 지적, 수정이나 질문은 언제나 환영입니다! 어떻게 쓰는가에 대해서는 Next.js 공식문서에 잘 정의되있어서, 원론적인 부분만을 다루려 합니다. TL;DR CSR과 SSR은 모두

2023년 1월 20일
·
2개의 댓글
·
post-thumbnail

next JS 강의 정리 - 1 (nextJS & data Fetching)

패스트컴퍼스 강의를 듣고 정리한 내용입니다. public폴더 - /접근 가능 ex) src= '/varcel.svg' SSR - server side render : 서버작동( 터미널에 찍힘 ) 서버 부하를 일으킴 CSR - client side render : 클라이언트 작동( 개발자도구 콘솔에 찍힘) SSG - static site Generation : 정적인 사이트 생성한다 yarn build 시 생성한다 , 새로고침 해도 시간변화 없음 yarn dev로 바로 실행 시 SSR처럼 동작 꼭 yarn build 후 진행 (Generation 타이밍이 build 시점) ( * 생성한다 : 데이터를 가져와서 그려둔다 ) 빌드 할 시점에 데이터를 가져와서 정적사이트를 생성해둠. (사용자 급증시 서버의 부하를 줄이기 위해 정적인 사이트에만 사용) getStaticProps

2023년 1월 10일
·
0개의 댓글
·

[용어] CSR, SSR, SSG, ISR

Nextjs 이야기를 나누다 보면 많이 나오는 단어인데 명확한 차이를 몰라 정리하였습니다. CSR client side rendering 의 약자로 서버에서 데이터만 받아와서 클라이언트 단에서 데이터가 담긴 컴포넌트들이 랜더링 됩니다. 보통 SPA(single page application)에서 많이 사용됩니다. SPA에 대해 간략히 이야기하자면 브라우저에서 처음에 도메인을 입력하면 DNS서버를 통해 ip를 받고 그 ip에 있는 서버에 요청하게 되는데 페이지를 달라고 요청을 하게 되고, 응답으로 html 파일을 하나 주게 됩니다. 그 이후에는 javascript 로 하나의 html에서 이페이지 저페이지를 랜더링하면서 페이지를 이동하는것입니다. 그러면, html을 이미 받아왔기 때문에 다른 페이지에 가더라도 랜더링 된 html 파일을 받아오는게 아니라, 데이터만 요청하고, 받아온 데이터를 기반으로 컴포넌트를 랜더링 해주는 방식이기 때문에 CSR 방식

2023년 1월 6일
·
0개의 댓글
·
post-thumbnail

Next js 동적 SEO 구현기

SEO란? SEO는 Search Engine Optimization의 약자로, Google과 같은 검색 엔진에서 상위 노출될 수 있도록 사이트를 최적화하는 일을 의미한다. 쉽게 말해 사용자가 특정 검색어를 쳤을 때, 우리 서비스가 최대한 상단으로 노출될 수 있도록 최적화하는 작업이다. 수많은 웹사이트를 돌아다니며 정보를 수집하는 웹 크롤러에게 적절한 정보를 제공함으로써 최적화를 이뤄낼 수 있다. 구현 배경 숙박 예약 서비스는 SEO 중요도가 높다. 예약할 숙소에 대한 검색 결과를 따라서 자연 유입되는 케이스가 많이 발생하기 때문이다. 그렇기 때문에 우리 서비스에서도 SEO가 중요했다. 특히 숙소 상세 페이지에 대해서 SEO를 구현하는 일이 중요했다

2023년 1월 5일
·
6개의 댓글
·
post-thumbnail

SSG SSR CSR ISR 그리고 SPA MPA

| 구분 | ssg | ssr | csr | isr(ssg) | | --- | --- | --- | --- | --- | | 줄임말|static side generation|server side rendering|client side rendering|Incremental Static Regeneration 렌더링 기점|서버에서 html을 미리 다 만들어 둔다 빌드 시 이미 만들어진 html을 확인 할 수 있다|서버에서 렌더링을 마치고 요청이 있을 때 마다 HTML을 던져준다 MPA 구조에 주로 쓰임 (깜빡임 현상) | 브라우저(client)가 최초 로딩시 CSS,javascript,js 파일을 받아온다 DOM 내용만 교체해서 사용하는 동적 렌더링이며 SPA 구조에 주로 쓰임 | ssg에 속하는 방식으로 일정한 시간단위로 빌드를 업데이트 해준다 | ![](https://velog.velcdn.com/images/1whtndus

2022년 12월 9일
·
0개의 댓글
·
post-thumbnail

[Kafka]Broker, Replication, ISR

카프카 중요요소 살펴보기 Broker, Replication, ISR Replication(복제) : 카프카 아키텍쳐의 핵심! : 클러스터에서 서버의 장애가 생겼을 때, 가용성을 보장하는 가장 좋은 방법이 복제이기 때문! Broker 카프카가 설치되어 있는 서버의 단위 보통 3개 이상의 Broker로 설정해서 사용하는 것을 권장! Ex) 파티션이 1개이고, Replication이 1인 Topic이 존재하고 브로커가 3대라면, 브로커 3대중 1대에 해당 토픽의 정보(데이터)가 저장된다 ![](https://

2022년 11월 14일
·
0개의 댓글
·
post-thumbnail

Next.js 의 pre-rendering(SSG, SSR, ISR)

Next.js 란? Next.js는 React로 만드는 서버사이드 렌더링 프레임워크이다. 제공하는 여러가지 기능(hot reloading, automatic routing, single file components...)이 있지만 오늘은 Next.js의 pre-rendering과 Data fetching에 대해서 말하려고 한다 ! Pre-rendering 이란? Next.js에서는 기본적으로 모든 페이지를 프리 렌더링 한다. 이 말은 Next.js가 모든 페이지에서 미리 HTML을 생성한다는 말이다. 이때의 HTML은 해당 페이지에 최소한으로 필요한 자바스크립트 코드와 연결되어있다. 페이지가 브라우저에 의해 로드될 때 자바스크립트 코드가 동작하고 페이지가 인터랙티브하게 동작된다. 이 과정을 Hydration(하이드레이션)이라고 한다. 일련의 과정으로 프리 렌더링을 수행하면 결과적으로 더 높은 성능의 SEO를 제공할 수 있다.

2022년 9월 27일
·
0개의 댓글
·
post-thumbnail

Next.js 에 대한 거의 모든 것

면접 준비를 하면서 Next.js 를 깊게 공부할 기회가 생겼다. 이번 기회에 평소 헷갈렸던 Next.js 개념들을 정리해보고자 한다. 상당히 내용이 많으므로 Next.js 가 CSR을 사용하는지, SSG 는 언제 사용하는지 SSR 는 어떻게 사용하는지 빠르게 알고싶다면 맨 밑부터 읽으면 된다. Next.js 를 시작하기 전에 : CSR와 SSR CSR CSR(Client Side Rendering)은 뼈대가 되는 빈 HTML 과 JS 파일을 전부 가져와 클라이언트(브라우저) 측에서 HTML 을 구성하는 방식이다. 초기에 빈 HTML 파일을 보여준 후 API 요청을 통해 데이터를 받아와 다시 렌더링 하기 때문에 사용자가 화면을 인식하는데 상대적으로 오래걸린다. 하지만 초기 로딩 후

2022년 9월 11일
·
10개의 댓글
·