천리길도 한걸음 부터 : Next.js

D+42

아 코드를 만져보려 했지만, next.js에 대해 이해하지 못하면 건드리기 어려운게 현실이다. 내가 next.js에 기대하는 부분도 있으니 천천히 해보도록 하자. <Real-World Next.js>라는 책을 보며 우선 Next.js에 대해 이해하는 시간을 가져보려 한다.

React의 간략한 역사

근본책은 항상 역사를 다룬다. 역사를 다루는 핵심은 우리가 다루려는게 왜 좋은지 알기 위함이다. Next.js는 React의 한계를 극복하기 위해 만들어졌다. 그래서 React의 간략한 역사를 짚고 넘어가야 한다. React는 크게 퉁쳐 Facebook(지금의 Meta)에서 만들어진 것으로 알려져 있다. 그 중 핵심적인 인물은 Jordan Walke이다. 그가 React를 통해 하고싶었던 것은 재사용 가능한 컴포넌트를 만드는 일이었다. 이야기를 덧붙이자면, Vanilla JS기준으로 하나의 패턴을 재사용하는게 상당히 힘든 일이다. 가령 Loop 등을 사용하려 하면 Vanilla JS에서는 매우 머리를 싸메야 하지만, React에서는 손쉽게 해결할 수 있다.

Jordan Walke

이런 React에도 해결하지 못한 문제가 있다. 근본적으로 client side 에서 돌아간다는 뜻이다. 무슨말이냐. 내 핸드폰이 아이폰 15 프로라면 잘 돌아가는 웹페이지가 아이폰 8에서는 잘 안돌아갈 수있다는 뜻이다. 각 기기의 성능에 구애받는 앱이 되며, 이는 내가 타겟으로 할 수 있는 고객도 제한된다는 말이 된다. 그리고 기술적인 부분이라 잘 모르겠지만 Search Engine Optimization(SEO)에도 좋지않은 영향을 끼진다고 한다. 그러니까 구글링 해도 내 웹사이트가 잘 안나올 수 있다는 것을 뜻한다.

Vercel과 Next.js 그리고 Server side rendering

vercel

그래서 많은 회사들이 이런 문제를 해결하기 위해 노력하게된다. 기술적으로는 pre-render 또는 Server side rendering이라는 기술을 파기 시작한 것이다. 쉽게말해 복잡한 계산은 서버에서 처리하고 웹 하면에는 단순히 최적화된 화면만 보여주는 기술이다. 그 중 Vercel의 next.js가 게임 체인저(game changer)로 우뚝 솟아난 것이다. 이런 성능이 담보되기 때문에 여러 회사의 웹사이트 구축에 쓰이고 있다. 그 예시로는 넷플릭스, 트위치, 틱톡,나이키,우버 등이 있다.