프로젝트 리액트에서 Next js로 넘어갈때 SEO

제 입장에서는 성원님의 질문 자체가 의아한 부분이 조금 있는 것 같습니다. 의아한 지점을 나열하면 다음과 같습니다. 1. next js로 프로젝트를 한 이유를 묻는 질문에 대하여 왜 SSR, SEO에 관해서 말을 해야하나요? -> 자신이 next js로 프로젝트를 한 이유가 SSR, SEO라면 그렇게 말하면 되고 SSR , SEO가 이유가 아니라면 자신이 next.js 로 프로젝트를 한 이유를 말하면 되는 것인데 왜 두 키워드를 언급해야하는 것인지 이해가 되지 않습니다. 2. 이어지는 상황 가정으로 미루어보아 신입 면접 때 SEO에 대해 경험을 해보신 적이 있으세요?라는 질문에 답을 고민하고 있는 것으로 보여집니다. -> 만약 첫번째 질문에서 거짓말을 한게 아니라 정말 SSR, SEO 가 중요해서 next.js를 사용해야 했던 상황이라면 그냥 프로젝트를 하면서 SEO 때문에 겪었던 일을 이야기하면 될 것입니다. 저는 성원님을 모르고 , 성원님이 어떤 프로젝트를 하셨는지도 모르는 상태입니다. 그렇기에 성원님이 남겨주신 세줄가량의 질문을 읽어보면서 드는 생각은 "이 사람은 면접관의 질문에 대해서 거짓말을 하려고 하는데 거짓말을 안 들킬 방법을 질문하고 있는 건가?" 입니다. 그와 별개로 next.js로 프로젝트를 하는 이유는 SEO를 차치하고도 여러가지가 있을 수 있습니다. 예를 들면 리액트로 구성된 프로젝트에서는 라우팅 , 이미지최적화, 폰트 최적화 등을 일일이 수행하거나 추가적인 라이브러리를 설치해야하지만 next.js로 구성한 프로젝트에서는 프레임워크 차원에서 위와 같은 기능들을 지원해주기에 초기 설정 및 최적화에 들어가는 시간 비용을 많이 절약할 수 있을 것입니다. 다른 관점에서는 생태계가 풍부하다보니 Remix, sveltkit 등 SSR을 지원하는 다른 프레임워크에 비해 디버깅이나 정보를 얻는것도 쉬울 것이고요 app router를 썼다면 제공하는 가이드라인에 맞게 정상적으로 코드를 짜기만 해도 자동으로 코드스플리팅을 수행해주고 에러바운더리도 프레임워크차원에서 지원이 되니 편리한점도 있을거고요 굳이 자기가 안해본 영역을 언급할 필요가 없을 것 같습니다.

편하게 생각하시죠. 알고계시겠지만 SEO는 검색엔진 최적화입니다. 검색해보면 바로 정의가 나옵니다. 저도 안해봤지만 대충 검색하며 써볼테니 같이 얘기를 정리해 봅시다. 검색 엔진 최적화란 뭘까요? 말 그대로 구글 등의 검색엔진이 웹사이트를 쉽게 발견하여 검색 화면의 상단에 올라갈수 있게 하는 방법입니다. 이를 위해선 웹사이트가 충분한 정보를 제공하여야 하는데요, 과거에는 메타 태그, og 태그 등의 정보를 주로 캐치했습니다. CSR은 HTML콘텐츠가 자바스크립트로 되어있고 검색 봇이 이를 잘 수집하지 못하여 결과적으로는 할수는 있으나(별도의 라이브러리를 써서 메타 태그를 삽입할수 있습니다.) 기본적으로는 결국 부적합하다고 합니다. 그래서 SSR을 쓰게 되는 것인데요 SSR의 대표주자는 Next.js이고 Next.js는 빌드타임에 static한 prop을 활용하여 메타 태그를 동적으로 할당이 가능하는 등, 이점이 있어 이를 쓰게 되는 것입니다. 이런 방식이 없다면 SSR을 했다고 해서 무조건 SEO는 아니라고 볼수있겠습니다. 요런식으로 말을 만들어 보세요. ㅎㅎ 저도 하면서 공부가 좀 됐네요.