XE 리액트 조합 어떤가요?

1번은 shadcnUI를 활용해 제작해본 케이스입니다. SEO면에서도 충분히 커버 가능한 수준으로 만들어보려고 하고 있습니다. 부족한 부분 눈에 띄이면 말씀해주세요

pagination 컴포넌트 방식이나, padding 부분들이 shadcnui를 따르지 않는것같아서 뭔가 테일윈드 커스텀하신건줄 알았습니다.

하단부 페이지네이션, 그리고 게시물 추천이나 각종 부분들에서 버튼과 같은 부분들에 padding 규격이 따로 노는 느낌이 있어서 이런 부분을 다시 한번 봐주시면 좋을것같아요.

SEO부분은 쉽지 않으실겁니다. 저도 한참 극초기에 nuxtjs와 연동해서 해보려고 어떻게든 발버둥치다가 포기하고 blade문법으로 개발하기 시작했거든요 ㅠㅠ

완성까지 화이팅입니다!

완벽하게 다 잡은건 아니고, 페이지마다 react로 잡아본건데 이렇게 동작하는구나 하고

다음 스텝으로 SPA 수준으로 만든게 2번째 작업물입니다. 그래서 1번도 완전히 스타일을 다 해놓은게 아니네요 ㅎ

1번은 대신 SEO를 따로 잡지 않아도 되는 수준 같아 보이는데 어떤가요.

2번은 나름 하게 한다고 했는데 어떨지 잘 모르겠네요.

SEO는 1년넘게 씨름하는 입장이라서 검색엔진님께서 마음에 들어하셔야 하는거라.. 검색엔진님이 보기좋다하더라 하면 좋은거고 아니면 아닌거라 뭐라 말씀드리기 어렵습니다 ㅠ

1년넘게 싸우다가 드디어 키워드 상위권으로 올리기 시작해서요..

1번은 페이지가 전환된다는 것이 장점이지만, 전환 후 HTML 소스에 내용이 없습니다. 반면, 2번은 서버 렌더링 컨텐츠까지 넣어두셔서 검색엔진 입장에서는 오히려 더 나을 수도 있어요.

단, 어느 쪽이든 목록 화면에서 JS를 실행하기 전에는 각각의 글읽기 화면으로 연결되는 링크를 찾을 수 없을 테니, 사이트맵 등으로 보완하는 것이 좋습니다.

아무리 요즘 검색엔진이 JS를 실행할 수 있다고 해도, JS를 실행하려면 그냥 HTML만 해석하는 것보다 많은 자원이 필요하기 때문에 크롤링에 소극적일 수밖에 없거든요. 리액트를 사용하지 않는 경쟁 사이트보다 적게 긁어가거나, 늦게 긁어가죠. 어떻게든 검색엔진의 심기를 건드리지 않는 것이 최선입니다...

1번은 만들다가 속도의 효용성을 못 느껴서 바로 2번으로 진입했습니다.

2번은 말씀대로 SEO를 고려해서 최대한 렌더링 전에 api 내용을 받아서 컨텐츠 영역에 집어넣고,

나중에 다시 렌더링한 내용을 덮어씌우는 식으로 작업했습니다.

말씀하신 부분도 리스트에서도 글본문에서처럼 그런 동작을 미리 해놓으면 좋을 거 같네요.