Next.js | 웹 브라우저의 사용성 개선 과정과 현황

Intro

---

Point 1. 웹 브라우저 런타임에서 Javascript는 왜 라이브러리와 프레임워크가 존재하는가?

• Javascript - 웹 브라우저에서 사용하는 프로그래밍 언어
• React.js - Javascript 라이브러리
• Next.js - React 프레임워크

Point 2. 웹 브라우저에는 어떤 사용성 개선이 필요했나?

• UX - User Expierence
• DX - Developer Expierence

Point 3. 웹 브라우저는 어떤 배경에서 어떻게 사용성을 개선해왔는가?

• Web page
  • 1 Generation (1990~): Static web page - HTML, HTTP, Browser
  • 2 Generation (1995~): Dynamic web page - HTML, CSS, Javascript
• Web application
  • 3 Generation (2005~): Multi page application - Ajax
  • 4 Generation (2013~): Single page application - React.js
  • 5 Generation (2017~): Hybrid page application - Next.js (now)

*Required knowledge

렌더링은 사용자 경험과 개발자 경험에 큰 영향을 미침

• 렌더링이란
  • HTML, CSS, Javascript 소스코드를 브라우저에 출력하는것
  • 모든 브라우저에는 렌더링 엔진이 존재
• #렌더링 과정
  • 1 HTML파일 디코딩
  • 2 문자열 토크나이징
  • 3 노드 객체 생성
  • 4 노드 트리 구조(DOM) 생성
• #렌더링 종류
  • 렌더링에는 여러 방식이 존재하며, 목적에 따라 렌더링 방식이 달라진다.
  • SSR(Server-Side-Rendering)application
  • SSG(Static-Site-Generation)
  • CSR(Client-side-Rendring)

1 Static web page - HTML, HTTP, Browser

---

최초의 웹 사이트

배경

• 전 세계의 대학 및 연구기관에서 상호 연구를 위해 흩어져있는 문서들을 체계화하여 정보를 신속하게 교환이 필요
• 문서뿐만 아니라 소리, 동영상 등을 망라하는 데이터베이스를 구축하고 이를 전문 열람 소프트웨어로 열람하는 방식을 생각

구성요소

• HTML
  • 텍스트, 링크, 이미지 등의 요소를 사용하여 문서의 내용과 구조 구성
• HTTP
  • 웹 서버와 웹 클라이언트 간에 정보를 주고받기 위한 프로토콜
• Browser
  • URI에 해당하는 웹서버에서 응답받은 HTML문서를 시각적으로 표현

렌더링 방식

• Static SSR

2 Dynamic web page - HTML, CSS, Javascript

---

배경

• 정적인 HTML에 User Interaction을 통해 동적으로 변경하고 싶다
• 정적인 데이터를 포함하는 HTML이 아닌 사용자 요청에 따른 동적 데이터를 포함한 HTML을 얻고싶다
• 문서의 내용과 구조만 구성하던 HTML에 style을 추가하고 싶다

구성요소

• HTML
  • 텍스트, 링크, 이미지 등의 요소를 사용하여 문서의 내용과 구조 구성
• CSS
• Javascript

렌더링 방식

• Dynamic SSR

문제점

• UX
  • SSR은 URI에 따라 HTML을 요청하므로 화면 새로고침이 발생
• DX
  • 중복되는 HTML 코드를 다시 한번 전송을 받음으로써 많은 대역폭을 낭비
  • 새로고침이 발생하면 연속적인 동적 UI 개발에 제한이 존재

3 Multi page application - Ajax

---

배경

• HTML파일 전체가 아니라 필요한 데이터만을 웹서버에 요청해서 받은 후, 클라이언트에서 데이터에 대한 처리를 하고싶다.

구성요소

• Ajax (Asynchronous JavaScript and XML)
  • 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능

렌더링 방식

• SSR with Ajax

문제점

• UX
  • SSR은 URI에 따라 HTML을 요청하므로 화면 새로고침이 발생
• DX
  • UI 업데이트를 DOM API를 사용하여 일일이 명령적으로 프로그래밍 해야함
  • HTML, CSS, JS는 항상 같이 사용하는데 파일이 분리되어 있어서 재사용 가능한 모듈을 갖추지 못함

4 Single page application - React.js

---

배경

• URI에 따라 HTML을 요청하고 싶지 않다
• UI를 선언적으로 관리하고싶다
• HTML, CSS, JS를 함께 재사용 가능한 모듈로 관리하고 싶다

구성요소

• 렌더링 함수
• 렌더링 라이프사이클
• 컴포넌트

렌더링 방식

• CSR

문제점

• UX
  • JS 용량이 크다면 초기 로딩 속도가 느리다
  • 네트워크 지연이 생긴다
• DX
  • Routing 처리를 해줘야한다
  • JS 파일을 최적화하여 bundling 해야한다
  • bundling한 파일이 크기때문에 현재 route에 필요한 JS 파일만 로딩하도록 코드 분할을 해야한다
  • JSX는 브라우저에서 이해하지 못하므로 js로 변환해주어야한다
  • ...

5 Hybrid page application - Next.js

---

배경

구성요소

렌더링 방식

• CSR with Pre-rendering