날씬/공병 vs 뷰

그중에서 저는 Sapper와 Vue의 차이를 강조했습니다.
그래서 저는 귀여운 글을 썼습니다. 예를 들어 Vue과 친구를 Svelte과 Sapper과 비교했습니다.하지만 두 번은 환어음이 입금을 거부해서 포기했다.이해하고자 하는 요점은 .vue 구성 요소의 가독성이 .svelte 구성 요소보다 훨씬 높다는 것이다.그러나 모든 면에서 날씬함은 더 적은 코드를 필요로 한다. 이것은 그들의 입버릇이다(이것은 좋은 입버릇이다).하지만 세이퍼가 기준에 맞지 않는 게 하나 있다.

SSR 및 국가 관리

Sapper에서는 표면 서버측 렌더링(SSR)이 훨씬 쉬웠지만, 아직 잘 알려지지 않았다.우리는 어떻게 서버 상태를 클라이언트에 전달합니까?일단 뷰를 보여드릴게요.

Vue SSR 및 Vuex

Vuex은 Vue 애플리케이션에서 상태를 중앙 집중식으로 관리하는 데 도움이 됩니다.guide을 따르는 경우 Vuex 스토어는 단일 항목으로 설정됩니다.이렇게 보여요.

import Vuex from 'vuex'

const store = new Vuex.Store({
  ...
})
export default store

이것은 고객에게 매우 좋다. 우리는 단지 가게가 하나 있을 뿐이다.그러나 SSR을 실행할 때, 우리는 많은 클라이언트와 요청에 서비스를 제공해야 한다. 우리는 이 요청들 사이에서 저장소를 혼동할 수 없기 때문에 지금 이렇게 해야 한다.

import Vuex from 'vuex'

export default function createStore(){
 return new Vuex.Store({
  ...
  })
}

현재 너는 너의 많은 요청을 위해 많은 상점을 초기화할 수 있다.같은 원칙은 Vue 응용 프로그램 자체와 Vue Router, Apollo에도 적용된다.다음은 간단한 예이다.

import Vue from 'vue'
import createStore from './store'

export default createApp(){

  const store = createStore()

  const app = new Vue({
    store
  })

  return { app }
}

entry-client.js년

import createApp from './app'

const { app } = createApp()

app.mount("#app")

서버에서 프로그램이 루트를 처리하고 상태를 바꾸며 HTML을 보여주면, Vuex 상태가 수합물로 변하기 전에 클라이언트에게 전달해야 합니다. 그렇지 않으면 새 상점에서 수합물로 변합니다. 현재 당신의 프로그램은 당신의 상점과 동기화되지 않습니다. (큰일입니다.)이것은 매우 간단합니다. 당신은 read about it here을 선택할 수 있습니다.간단히 말해, 스토리지 상태는 서버가 표시하는 HTML의 <script> 태그에 저장되며, 클라이언트에서 Vue를 초기화하면 클라이언트 상태를 지우고 업데이트하여 일치시킵니다.

공병

만약 당신이 Sapper가 무엇인지 모른다면, 그것은 Nuxt에 해당하지만, 날씬하기에 적합하다.창조자 리치 해리스(Rich Harris)는 nice article형 공병을 보유하고 있다.
SSR로 돌아가면 공병들 사이에서는 다르다.우리는 같은 Vue 클래스 개념이 없습니다. 공유기, 상점, Apollo 클라이언트 등 내용을 초기화하고 제공할 수 있습니다.날씬함에서 우리는 stores이라는 개념을 가지고 있지만 싱글로서는 그렇지 않다.
서버에서 스토리지에 쓰기 작업을 수행하면 요청이 중단됩니다.이것은 나쁜 소식입니다. 사용자에게 부정확한 데이터를 보낼 수 있을 뿐만 아니라 다른 사람의 데이터도 보낼 수 있습니다. (Yikes!)따라서 서버의 스토리지를 변경하지 않는 것이 가장 좋습니다.
그러나 우리는 클라이언트 컴퓨터에 저장된 것을 좋아하기 때문에 서버의 상태가 떨어지기를 바란다.Sapper는 이를 구현할 수 있는 몇 가지 방법이 있습니다.

세션 데이터

서버에서 Sapper는 sessions을 사용자 데이터로 사용하여 서버에 데이터를 설정하여 클라이언트에게 전달할 수 있습니다.

사전 로드

preload 함수에서 우리는 렌더링하기 전에 서버 측의 데이터를 얻을 수 있다.그래서 하나의 구성 요소에서 너는 이렇게 쓸 수 있다

<script context="module">
  export async function preload(page, session) {
     let animal = "dog";
   return { animal }
  }
</script>

<script>
  export let animal;
</script>

<p>
  { animal }
</p>

그리고 클라이언트의 사용자가 onMount 갈고리에 동기식으로 저장합니다.서버에서 onMount이 호출되지 않았기 때문에 클라이언트에서만 실행된다고 확신할 수 있습니다.
그러나 preload의 기능은 Nuxt의 asyncData과 비슷하다.js, 서버와 클라이언트에서 실행할 수 있습니다.process.browser 변수를 사용하고if 블록에서만 서버 논리를 실행함으로써 이 문제를 해결할 수 있습니다. 그러나 이것은 매우 번거롭습니다.

아폴로 고객

아폴로의 가장 큰 특징은 캐시다.Vue에서 만약에 우리가 Apollo를 사용하여 일부 데이터 서버 측을 가져오면 우리는 Vuex 상태를 사용하는 것처럼 Apollo 상태를 전달할 수 있다.위에서 말한 바와 같이 당신은 무거운 물건을 스스로 처리해야 합니다. 추천/기록할 방법이 없고 Vue SSR에서 당신이 좋아하는 것(또는 적어도 내가 좋아하는 것) 중 일부는 Sapper로 실현할 수 없습니다.그게 중요한 건 아니지만 그게 없으면 아폴로의 우위를 잃게 될 거야.

요약

우리는 모두 도망가서 날씬한 몸매를 배워서 밥그릇을 지켜야 합니까?
위에서 언급한 주 관리와 솔로 문제는 제쳐두고...아니오, 만약 당신이 반응이나 Vue를 할 수 있다면, 당신은 여전히 좋습니다.만약 당신이 이 두 가지를 할 수 없다면, 나는 당신이 전단 개발자가 되고 싶다면, 하나를 배우라고 강력히 건의합니다.그러나, 우리는 흥미로운 시기에 처해 있다. 왜냐하면 Svelte 패키지는 Vue보다 훨씬 작기 때문이다. 이것은 Svelte를 사용할 때, 당신의 상호작용 시간 (TTI) 도 훨씬 적다는 것을 의미한다.