1. 페이지 라우팅의 원리

**라우팅(Routing)**은 사용자가 웹사이트의 특정 URL을 요청했을 때, 해당 URL에 맞는 **적절한 콘텐츠(페이지 또는 데이터)**를 사용자에게 보여주는 과정을 의미합니다. 쉽게 말해, 사용자가 웹사이트를 탐색하며 다른 페이지로 이동하는 길을 안내하는 역할을 합니다.

웹에서 페이지 라우팅은 크게 두 가지 방식으로 이루어집니다:

• 서버 라우팅 (Server-Side Routing): 전통적인 방식입니다. 사용자가 새로운 페이지를 요청할 때마다 서버가 해당 URL에 맞는 HTML 파일을 완전히 새로 생성하여 클라이언트(브라우저)에게 전송합니다. 브라우저는 이 새로운 HTML 파일을 받아 전체 페이지를 새로고침하여 렌더링합니다. MPA 방식에서 주로 사용됩니다.
• 클라이언트 라우팅 (Client-Side Routing): 주로 SPA(Single-Page Application)에서 사용되는 방식입니다. 애플리케이션이 처음 로드될 때 모든 필요한 자원(HTML, CSS, JavaScript)을 한 번에 가져오고, 이후 페이지 이동이 발생하면 서버에 새로운 HTML을 요청하는 대신, 클라이언트(브라우저)에서 JavaScript를 이용하여 DOM을 동적으로 변경하여 새로운 페이지처럼 보이게 합니다. 이때 브라우저의 History API를 활용하여 URL을 변경하고 뒤로 가기/앞으로 가기 기능을 지원합니다.

2. 서버사이드 렌더링 (SSR: Server-Side Rendering)

서버사이드 렌더링은 웹 페이지의 최초 렌더링을 서버에서 수행하여 사용자에게 완성된 형태의 HTML을 전달하는 방식입니다.

원리:

1. 사용자가 웹 페이지를 요청하면, 서버는 해당 요청을 받습니다.
2. 서버는 요청된 페이지에 필요한 데이터를 가져오고, 이 데이터를 기반으로 HTML, CSS, JavaScript를 포함하는 완성된 형태의 웹 페이지를 서버 자체에서 구성합니다.
3. 서버는 이렇게 완성된 HTML 파일을 클라이언트(브라우저)에게 응답으로 보냅니다.
4. 브라우저는 서버로부터 받은 HTML을 즉시 화면에 표시합니다. 이 시점에서 사용자는 페이지의 내용을 볼 수 있습니다.
5. 이후 클라이언트(브라우저)로 전송된 JavaScript가 실행되면서 페이지가 동적으로 상호작용할 수 있도록 "하이드레이션(Hydration)" 과정을 거칩니다.

장점:

• 초기 로딩 속도 향상: 사용자가 빈 화면을 보지 않고 바로 완성된 페이지를 볼 수 있어 초기 사용자 경험이 좋습니다. (FCP - First Contentful Paint가 빠름)
• SEO(검색 엔진 최적화) 유리: 검색 엔진 봇은 JavaScript를 완전히 실행하지 못하는 경우가 많으므로, 서버에서 미리 완성된 HTML을 제공함으로써 검색 엔진이 페이지 콘텐츠를 더 잘 파악할 수 있습니다.
• 첫 사용자에게 빠른 콘텐츠 제공: 데이터가 필요한 페이지의 경우, 서버에서 데이터를 미리 가져와 HTML에 포함시키므로 클라이언트에서 추가적인 데이터 로딩 없이 바로 내용을 볼 수 있습니다.

단점:

• 서버 부하 증가: 모든 요청에 대해 서버에서 페이지를 렌더링해야 하므로 서버에 부하가 갈 수 있습니다.
• TTV(Time To View) 증가 가능성: 서버에서 페이지를 렌더링하고 전송하는 데 시간이 걸릴 수 있어, 브라우저가 첫 바이트를 받기까지의 시간(TTFB - Time To First Byte)은 CSR보다 길어질 수 있습니다.

3. MPA (Multi-Page Application) 방식

**MPA (Multi-Page Application)**는 여러 개의 독립적인 HTML 파일로 구성된 전통적인 웹 애플리케이션 아키텍처입니다.