서버사이드렌더링에서 서버는...? 프론트 서버 vs 백엔드 서버

 

 

서버 = 백엔드, DB 라고 생각했던 사람, 나야 나 🙋🏻‍♀️...

그래도 프론트엔드 개발자로 입사하고, 백엔드 개발자들과도 얘기해보면서

백엔드 개발이 서버와 DB 다루는 거구나 라고 이해하게 되었다.

그런데 Next.js 공부를 하면서 접한 서버 사이드 렌더링...

이 서버도 그 서버야? 하는 의문이 들었다.

그리하여 찾아보고 정리하는 포스팅!

 

서버란?

서버 : 클라이언트의 요청에 응답하는 프로그램

요청에 따라 html, css, js 등 정적 파일을 보내주는 프론트엔드 서버와,

DB 데이터를 보내주고 연산하는 백엔드 서버로 나눌 수 있다.

 

 

 

프론트 서버

주로 정적 리소스(static resources)를 다루는 데 사용된다.

정적 리소스는 서버 측에서 동적으로 생성되는 게 아니라, 이미 저장되어 있는 리소스들을 말한다.

요청을 받으면 응답만 해주면 되는 것들로 어느 사용자에게도 동일한 결과값을 보여준다.

예를 들어 HTML 파일, CSS 파일, JavaScript 파일, 이미지 파일들이 여기에 해당된다.

프론트엔드 서버는 이러한 정적 리소스들을 사용자의 브라우저로 보내어 웹 페이지를 렌더링하는 데 활용된다.

Next.js

Next.js의 경우에는

SSR(Server-Side Rendering)과 SSG(Static Site Generation) 기능을 제공하기 때문에

프론트 서버에서 정적 리소스와 동적 리소스를 둘 다 다룬다고 볼 수 있다.

 

서버 사이드 렌더링(SSR)

• 요청에 따라 동적으로 페이지를 생성하는데 사용
• 사용자의 요청에 따라 페이지를 서버 측에서 렌더링하고 데이터를 주입한 후 HTML을 생성하여 브라우저로 전송
• 백엔드의 동적 리소스 생성과 유사한 역할

 

정적 사이트 생성(SSG)

• 미리 페이지들을 빌드하여 정적 파일로 생성
• 이를 통해 라우팅이 필요한 페이지들을 미리 생성하여 CDN에 배포
• 프론트엔드 서버의 역할

백엔드 서버

주로 동적 리소스(dynamic resources)를 다루는 데 사용된다.

동적 리소스는 요청에 따라 동적으로 생성되거나 데이터베이스와 같은 외부 소스에서 가져와지는 리소스를 의미한다.

따라서 누가, 언제, 어떻게 서버에 요청했는지에 따라 결과값을 다르게 보여준다.

예를 들어, 사용자가 로그인하는 경우 백엔드 서버는 사용자가 제공한 정보를 검증하고, 인증을 통해 새로운 페이지를 동적으로 생성하여 프론트엔드에 전달할 수 있다.

백엔드 서버는 사용자가 프론트 서버에서 입력 및 동작을 했을때 이에 대해 연산, 저장 등의 처리를 하는 서버라고 할 수 있다.

정리

클라이언트에서 어떤 주소에 대한 요청을 보내면,

프론트 서버에서는 HTML, CSS, JavaScript 등의 리소스를 받아와서 사용자가 볼 수 있는 웹페이지로 렌더링한다.

렌더링 과정에서 DB의 데이터가 필요한 경우,

일반적으로 클라이언트에서 프론트 서버로 요청하여 프론트 서버가 백엔드 서버로 요청하는 방식이 주로 사용된다.

하지만 React, Next.js 등 프론트엔드 프레임워크를 사용하는 경우엔

클라이언트에서 백엔드 서버로 직접 요청(useEffect, AJAX 요청 등)하는 경우도 있다.

 

결과적으로,

서버사이드 렌더링을 얘기할 때의 서버는 프론트 서버이고, 백엔드 서버와 혼동하면 안 된다.

Next.js에서 그 경계가 상대적으로 희미하지만, 각각의 역할을 구분해서 이해하는 것이 중요하다.

 

 

 

참고 사이트:

https://velog.io/@mjungpp/%EC%9B%B9%EC%97%90%EC%84%9C%EC%9D%98-%EC%84%9C%EB%B2%84%EC%99%80-%ED%94%84%EB%A1%A0%ED%8A%B8-%EC%84%9C%EB%B2%84%EC%99%80-%EB%B0%B1%EC%97%94%EB%93%9C-%EC%84%9C%EB%B2%84

https://velog.io/@gyutato/%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C%EC%9D%98-%EC%84%9C%EB%B2%84%EB%9E%80-%EC%96%B4%EB%94%94%EC%9D%BC%EA%B9%8C