지금 https://vitejs-kr.github.io/guide/ssr.html#setting-up-the-dev-server 이 부분 보면서


ts-node로 server.ts를 실행시키고 서버에서 solid를 렌더링해서 클라이언트에 보여줘야 하는 방식인데


server.ts에서 solidjs식으로 작성된 entry-server.tsx를 가져오는게 문제가 되는것 같음.


위 링크에서처럼 vite.ssrLoadModule('entry-server.tsx') 로 가져오면 tsx식으로 작성된 부분(<div></div> 이렇게 된 부분)이 아무런 변환도 없이 가져오니까 문법오류난다고 뜸


이 문제가 애초에 ssrLoadModule이 tsx, jsx말고 그냥 ts나 js를 가져오는 용도로 만들어서 그런건지 아니면 tsconfig.json에 jsx 옵션이 preserve라서 그런지는 모르겠는데

똑같은 이유로 그냥 tsx를 import해서 가져오는것도 안됨


일단 solidjs 문서에서는 jsx옵션을 preserve로 쓰라해서 위에처럼 ssrLoadModule로나 import로 tsx를 가져오는건 안되는거 같고

(만약에 react를 쓰기로 했다면 jsx를 react-jsx로 해서 해결 될 거 같은데 바로 아래에서 쓰는 내용의 오류가 나타나는진 모르겠음(변환되면 ReactDOM.~~로하니까 내부에 document를 사용하는 로직이 있다면 똑같을듯))


몇 가지 방법을 더 시도해봤는데 

1. 미리 vite build로 먼저 entry-server.tsx를 entry-server.js로 변환해서 ssrLoadModule로 가져온다거나

2. tsconfig에 allowJs활성화 해서 1번으로 만들어진 js를 import해서 쓴다거나


아무튼 이 방법이 안되는 이유는 node에서 실행시키느라 document가 없다고 뜨니까 빌드하면서 변환된 document.create~~를 못쓰게됨

이걸 해결하려고 보니까 jsdom이란것을 설치하라는데 이거는 어쨋거나 모듈이니까 document를 사용하려면 해당 파일에서 new JSDOM... 해서 document를 가져와되는데 이렇게 해결하려면 vite build로 생성된 파일을 직접 수정해서 jsdom을 사용하도록 해야되니까 이건 말도 안되는일같음.


결국 해결하려면

A. node에서 실행되는 환경에서 dom api를 사용하도록 해야할거같은데, 위에처럼 모듈 설치하는 법 말고

B. 아니면 tsconfig에 리액트러첨 jsx를 solid-jsx처럼 넣는 옵션이 있다던가

C. 아니면 어찌저찌해서 ssrLoadModule가 jsx, tsx도 잘 가져오게해주는 방법이 있다던가

C가 되면 좋겠지만 안되고 만약에 B처럼 하더라도 또 내부적으로 dom을 사용해야돼서 모듈을 설치해야된다면 A도 해결해야 할거같고


근데 생각해보면 애초에 jsx문법이 다 dom쓰는 방식으로 바뀌는거 아님? 위에서 언급했던 리액트도 결국 내부에는 dom쓰게되는거 아닌가?

-> 이게 맞으면 애초에 jsx를 쓰는 프레임워크가 서버사이드렌더링이 가능한건지?

-> 이게 아니면 리액트는 어떻게 처리하는건지?

도 답변해주면 ㄳㄳ


원하는 구조는 깔끔하게 server.ts에서 import { render } from './entry-server.tsx' 해서 render함수를 쓰고싶은데

혹시 이런식개발을 해보셨던분 있으시면 답변부탁드립니다...




디시 글에 글 쓸때 특수기호 몇개 필터링된다 들었는데(특히 꺾쇠?) 하나 쓴거 있지만 다른부분들도 깃갤분들은 그정도는 다시 머리에서 복구해줄거라고 믿음..ㅎㅎ