vite plugin ssr svelte

vite + svelte + vite-plugin-ssr 정적 프레 렌더 스타터 프로젝트!

Vite-Plugin-SSR 모듈의 벨트 버전.

이 모듈은 올바른 수화 설정으로 완전히 사전 사전 사전 HTML을 수행하여 앱이 모든 컨텍스트에서 원활하게로드되도록합니다.

여기에서 시도해 볼 수 있습니다 : https://ryanweal.github.io/vite-plugin-ssr-velte/

Sveltekit을 사용하지 않는 이유는 무엇입니까? vite-plugin-ssr 사용하면 거의 모든 것을 무시할 수 있으며 보다 구체적인 page.client.js 및 page.server.js 파일을 제공하여 특정 경로에 다른 프레임 워크 (예 : VUE, React, Other)를 추가 할 수도 있습니다.

상자에서 작동하는 것

이 저장소는 다음 프로젝트의 스타터로 사용될 수 있습니다. 일반적인 프레임 워크 작업을 수행하도록 설정되었습니다.

• dev에서 핫 재 장전을 사용하여 svelte를 사용하여 페이지와 구성 요소를 만듭니다.
• 빌드 시간 동안 모든 컨텐츠를 전진하십시오
• 모든 클라이언트 측 JS로 사전 렌더링 된 콘텐츠를 수화시킵니다
• 예제 구성 요소를 사용하여 메타 태그를 쉽게 설정할 수 있습니다
• 자산 폴더는 빌드 폴더에 직접 복사하여 1999 년과 같은 이미지를 참조 할 수 있으며 가져 오는 것에 대해 걱정하지 않습니다.

또한 데이터를 가져 오기 위해 서버 측에서 API 호출을하는 몇 가지 예가 포함되어 있습니다.

사용 된 vite 플러그인

• Vite-Plugin-SSR
• vite-plugin-svelte
• Express.js (사전 렌더링 프로세스에 사용)

설치 및 실행

1. 이 저장소를 복제하십시오
2. 의존성 설치 : npm i
3. 실행 : npm run dev 하고 작업 할 때 핫로드를 즐기십시오.
4. 브라우저에서 http://localhost:3000 방문하십시오.
5. 빌드 : npm run build
6. 서빙 : npx serve dist/client

업데이트

이 패키지를 업데이트하려면 일반 NPM 업데이트 절차를 따라갈 수 있습니다.

내장 npm shrinkwrap 명령을 사용하여 npm 설치 프로그램으로 사용하는 경우이 리포지트를 "알려진 양호한"상태로 고정시키는 일반적인 package-lock.json 대신 npm-shrinkwrap.json 을 제공했습니다.

npm-shrinkwrap.json 파일을 변경하는 경우 업데이트를 완전히 테스트하십시오.