# ssg
Next.js를 공부하며 알아보는 웹앱의 렌더링 방식
리액트로 만든 애플리케이션은 주로 SPA(Single Page Application)와 CSR(Client Side Rendering) 방식을 사용함.하나의 페이지에서 모든 기능과 렌더링을 수행하는 방식. ↔ MPA(Multi Page Application)장점전체 페
NEXT.js 파고들기
Next.js 는 React로 SSR(Server Side Rendering) 을 보다 쉽게 구현하기 위한 프레임워크 이다. 따라서 그 전에 SSR과 그와 관련한 CSR, SSG에 대해서 먼저 알아보자.
Front-end에서의 렌더링 방식
Next.js는 리액트 기반의 프레임워크로 웹 애플리케이션을 만드는 데 필요한 전체적인 솔루션을 제공한다. 기본적으로 React로 만든 애플리케이션은 SPA로 간주하는데 이는 Client Side Rendering 방식을 채택한다. Next.js를 사용하면 Server
SSG를 위한 Vite 셋업
하나의 정적 페이지를 서비스하고자 한다. HTML과 CSS만 사용하는 것이 배포 단계에서는 이상적이나 개발 과정 끔찍하다. 개발 과정에서는 JS를 활용하고 싶었기에 SSG를 채택하여 빌드 시에 정적 페이지를 렌더링하는 방법을 알아보게 되었다.
[Next] CSR SSR RSI SSG 장단점
한 번 로딩 되는데는 시간이 걸리지만, 그 이후 필요한 부분만 변경할 수 있어 빠른 UX를 제공서버가 하는 일이 적어 상대적으로 서버에 부하가 적음페이지 로딩 시간(Time To View)이 길어 사용자가 처음 화면을 마주하는 데(First Contentful Pain
CSR | SSR | SSG
클라이언트(브라우저)에서 페이지를 렌더링하는 방식으로 SPA(react,vue)에서 쓰이는 기법.서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내주고, 클라이언트는 그것을 받아 렌더링을 시작함CSR은 HTML,CSS,JS 파일을 한번에 모두 다운로드한 뒤 뷰가
페이지 렌더링 방식
페이지를 효율적이고 빠르게 보여주기 위한 렌더링 기법들을 정리한다. CSR (Client Side Rendering) 서버에서 빈 HTML과, js파일을 전부 가져와 클라이언트(브라우저)에서 HTML을 구성하는 방식 👍장점 최초로 다운받은 후에는 서버에서 html
[Next.js] Next.js의 역할
내가 공부하려고 정리하는 글웹팩과 같은 번들러로 코드를 번들바벨과 같은 컴파일러를 사용해 변환(브라우저에 적용되지 않을 수 있는 코드들을 문법에 맞도록 변환)코드스플리팅으로 production 최적화성능 또는 SEO를 위한 pre-render (SSR, CSR 사용)\
Next.js - SSR & SSG
SSR 및 SSG관련 내용을 정리하다가 문득 HTML생성시점이 헷갈려서 정리해 본다위의 이미지들과 같이 SSR의 경우, build 시 HTML파일을 생성하지 않는다.따라서, 유저가 해당 페이지에 접속한 경우에 HTML을 생성하여 전달해준다.반면, SSG는 build 시
웹 랜더링 방식 CSR, SSR, SSG, ISR
웹 랜더링 방식 CSR, SSR, SSG, ISR 에 대한 장단점 정리와 언제 어떤 방식을 채택해야 할지에 대한 간단 정리
💻 TIL 23.03.10
🫠 업로드가 느렸던 이유... 기존 ClubStudy 페이지는 하드코딩으로 작성되어있었다..(작업 초반 나의 실력 미숙과 기한이 짧았어서) 그래서 해당부분을 API를 받아와서 적용하려하다 보니 발생하는 오류가 있었다. 하지만 오류가 하나를 해결하니 다른 오류가 계속
대부분이 모르는 Next에서 SSG가 작동하는 방식 | 리팩토링을 통해 서비스 최적화하기 2편
많이들 이용하는 Static Site Generation은 사실 HTML이 아니라 다른걸 미리 생성합니다... SSG의 정확한 작동 방식에 대해 살펴보고, SSG을 이용해 로딩 속도를 개선한 경험을 말씀 드리고자 합니다.
Next.js 삽질 getStaticPaths fallback
안녕하세요~ 고영이에요. 👋오늘은 next.js 개발중에 겪은 삽질을 적어보려고 해요.Next.js는 SSG, SSR, CSR을 모두 지원하는 정말 짱짱한 FE 프레임워크에요.✨SSG는 Static Site Generation 이라고 해서, 정적 페이지를 빌드타임때