SSR은 풀스택이 아니다.

내가 지금 Next.js 프로젝트로 삽질하고 있었는데,
내가 여태까지 SSR에 대해 알고있는 지식과 달리 진실은 오히려 좁았다.
일단 너희들이 알고 있는 대략적인 SSR 특징에서 딱히 벗어난 건 아니지만,
나처럼 오바하지 말라는 의미에서 글을 싸지르도록 하겠다.

SSR은 풀스택이 아니다.

내가 가장 많이 착각한 부분이다. 그럼 뭐냐? 당연히 프론트엔드다.
그럼 서버단 렌더링이라면 서버단 코드가 돌아가는 건 당연한 거 아니냐고?

서버단 렌더링은 JSP, PHP, ASP 처럼 말 그대로 서버단에서 처리해 주는 게 아니다.
만약 이렇게 이해하고 있다면 너는 SSR을 상당히 잘못 이해하고 있는 것이다.

SSR 원리를 대충 설명하겠다. 상세한 설명은 구글링 해서 찾아라. 이 SSR을 언급할 때 가장 많이 쓰는 용어가 Hydrate인데, 우리말로 하면 수화(水化). 화학 용어다. 한자 그대로 물같이 변한다는 뜻이다. 너희들이 생각하는 뉴스같은 방송에서 오른쪽 아래에 손으로 까딱하는 그 수화(手話) 말고.
SSR 에서 말하는 수화는, 네가 작성한 코드의 초기화를 서버에서 해석하여 결과물인 HTML, CSS, JS 로 준비해서 뿌려준다는 거다.
그리고 상태 관리는 서버단에서 안 한다. 클라단이다.
위키백과에서 말하는 수화 반응은 이렇게 정의하였다.

수화 반응(水化反應 또는 水和-, hydration reaction)은 탄소-탄소 이중결합에 히드록시기와 수소 이온이 끼어들어가는 반응으로, 주로 강산성의 수용액에서 잘 일어난다.

이걸 리액트로 비유하자면, 네가 만든 컴포넌트 코드는 탄소-탄소 이중결합, 히드록시기는 리액트의 hydrate 함수, 수소 이온은 웹 번들러라고 보면 되며, 화학에서 이 반응으로 결과가 나온 수용액은 비유하자면 브라우저에 뿌릴 HTML, CSS, JS 코드인 셈이다.
hydrate 함수 원리 또한 구글링 하면 나와 있으므로 이거 자세하게 알려달라고 글 쓰는 본인 피곤하게 하지 않길 바란다.
여기서 주의할 점은, 렌더링을 해야 하기 때문에 렌더링과 관련 없는 코드는 표현할 수가 없다. 가장 대표적인 예로 서버단 자원을 가져다 써야 하는 코드. 예를 들면 파일 입출력, DB 연동 등이다. 왜냐면 결과물만 뿌리고 나머지 모든 작동은 클라이언트가 하기 때문에, 클라이언트에서 파일 입출력과 DB 연동? 될 수가 없다.
Next.js 의 경우 getServerProps 함수 뿌려서 서버단에서 파일 입출력이나 DB 연동 후 처리한 결과를 페이지 컴포넌트 속성에 주입하는 방식으로는 가능하지만, 대신 컴포넌트 마운트 속도가 확~ 느려지는 건 감안해야 한다.
다행히도 process.env 요건 된다. 왜냐면 이건 그냥 번들러가 환경변수를 가져와 문자열로 뿌리면 되는 문제기 때문이다. 하지만 이는 곧 내부 속성이 유출되어, 비밀 키 따위 또한 공개적으로 노출되기 때문에, 결국 아무리 SSR 이라도 비밀리에 써야 하는 양식은 쓰지 말아야 하는 결론이 나온다.
결국 서버단 처리를 하려면, Next.js 의 경우 API 기능 등의 서버단 전문 처리라던가, 별도의 API 서버를 구축해야 하는 것이다.

근데 Next.js 는 서버단 컴포넌트 기능을 구현 중이다. 하지만 기대할 수 없는 게, Edge Runtime 아래 샌드박스 형식으로 돌아가기 때문에, process.env 에서 가져오는 비밀은 지킬 수 있지만 여전히 파일 입출력이나 DB 연동하는 node.js 특화 코드는 쓸 수가 없다. 단지 보안을 요하는 내부 API 호출 정도는 사용할 수 있다. 일단, Next.js 는 서버리스 배포에 특화되도록 짜고 있기 때문이다. Vercel 도 장사해야지 ㅋㅋ.

하지만 이를 뛰어넘어 아예 서버단 컴포넌트답게 시도하는 놈이 하나 생겼다. Deno 의 Fresh가 그것인데, 컴포넌트 상태관리까지 모두 서버단에 맡기고 결과물만 뿌리기 때문에, 위 Next.js 와는 달리 컴포넌트 내에 파일 입출력이나 DB 연동까지 가능하다는 것. 참고로 프론트엔드는 리액트와 유사한 Preact 를 쓴다고 한다.
그래서 이걸로 존나게 갈아타고 싶다. 마음같아선. (어쩌면 갈아탈 수도 있다.)

결론은, 일단 늬들이 쓰는 프론트엔드는, 프론트엔드 범위 외로 벗어날 수가 없다는 걸 알라는 거다.
물론 아까 말한 Deno의 Fresh 처럼 풀스택 컴포넌트라는 기발한 시도를 하고 있어서 나도 존나게 쓰고 싶지만...

너희들 알잖아. 특히 자바 개발자들. "님"이 검증하지 않은 기술은 기술이 아니라고...