1. Isomorphic Javascript ?

iso는 same을 morphic은 form을 뜻한다.

Front-end와 Back-end에서 모두 사용가능한 Universal한 Javascript를 칭하는 용어.

Javascript가 Node.js의 등장으로 서버단에서도 사용되기 시작했다. 하지만 SEO와 SSR의 필요성에 대한 필요성이 제기되는 과정에서 브라우저와 Node.js의 서로 다른 환경에서 여러가지 문제점이 발생했고.

이런 문제들을 해결하기 위해 여러 라이브러리 및 프레임워크가 생겨났고 Next.js가 그 중 하나이다.

2. Next.JS의 이점

2.1 Configuration

Front-end configurations
React components
React routing
Babel
Webpack
TypeScript
SourceMap
Dev Server
HMR (Hot module Replacement)
etc…

Back-end configurations
REST API
SEO (Search Engine Optimization)
SSR (Server Side Rendering)
SSG (Static Site Generation)
Dynamic Routes
Middleware
public assets
etc…

등의 복잡한 설정을 자동으로 해주어 구현해만 집중할 수 있게 해준다.

물론 모든 프레임워크가 그렇듯, 추상화될수록 블랙박스 영영이 커지며 부작용이 발생할 수 있지만, 소규모 웹 기반 스타트업에게는 현재 최고의 솔루션이다.

2.2 Next.js의 렌더링 메소드

Next.js는 기본적으로 첫 페이지는 SSR로, 그 이후에는 CSR 방식을 혼용하는 하이브리드 방식을 사용한다.

Next.js 는 서버사이드렌더링을 위한 프레임워크로 시작하였으나 점점 그 범위가 확장되었고 현재 여러가지 옵션의 렌더링 메소드들을 지원하고 있다.

1) 서버사이드 렌더링(SSR)

리퀘스트가 들어올 때마다 서버 상에서 컨텐츠가 생성되고 브라우저에 전송된다.

2) 프리 렌더링(정적 생성, SSG)

페이지가 빌드 타임에 렌더링된다.
서버사이드 렌더링과 프리 렌더링을 혼합한 방식은 Next.js에서 최초로 도입되었고, 이후 Gatsby와 Nuxt라는 프레임워크들이 등장하는 배경이 되었다.

3) Deferred Rendering(지연 렌더링, ISR- Incremental Static Regeneration)

프리 렌더링과 비슷하지만, 빌드 타임에 모든 페이지를 렌더링하지 않고, 유저에 의해서 리퀘스트가 최초로 일어나는 순간 페이지가 렌더링된다. 트래픽발생 정도가 낮은 페이지들의 렌더링을 지연시키는 방식으로 빌드시간을 대폭 줄일 수 있다.

최근에는 ODR(On-demand Revalidation)이 도입되기도 하였다.

4) What method to use?

Q. 모든 유저에게 동일하다?
PR or DR
Q. 유저마다 다른 페이지를 제공해야한다?
SSR or DR
Q. 유저마다 다른 페이지를 제공해야하지만, Lightweight하거나 real-time 업데이트가 필요하다?
CSR

3. Next.JS의 단점

• 파일 베이스 라우팅을 강제로 사용해야한다.
• Dynamic routing을 사용하기 위해선 node.js를 사용해야 함.

4. Jamstack ?

https://velog.io/@perfumellim/JAMstack%EC%9D%B4%EB%9E%80
https://www.bottlehs.com/etc/jamstack-%EC%9D%B4%EB%9E%80/

Javascript + APIs + Markup

기존에 사용되던 용어인 'LAMPStack'(Linux, Apache, MySql, PhP)'처럼 최근 웹 기술에서 구성해야할 요소들의 모음.

• Javascript
  Client의 모든 처리는 Javascript에게 맡긴다.
• API
  모든 기능 및 비즈니스 로직은 재사용 가능한 API로 추상화한다.
• Markup
  SSG나 Template Engline(webpack 등)을 이용해 Markup을 미리 생성한다.

기존 SPA의 방향과 많은 부분에서 일치하나 몇 가지 추가적인 기능을 포함한다.

장점

• 빠른 성능
• 확장성 및 낮은 비용
• 쉬운 자동화

단점

• 긴 빌드 시간
• 실시간 변경 콘텐츠

References

https://launchdarkly.com/blog/whats-so-great-about-nextjs/
https://techblog.lotteon.com/next-js-%EB%A1%9C-%EA%B5%AC%ED%98%84%ED%95%98%EB%8A%94-isomorphic-javascript-c77595b626c5
https://velog.io/@rex/Next.js-%EB%A1%9C-%EA%B5%AC%ED%98%84%ED%95%98%EB%8A%94-Isomorphic-JavaScript