Jak korzystać z SSR w Vue 3

Nio 2020-10-07 07:42.

Mam działającą aplikację Vue 2 z renderowaniem po stronie serwera. Teraz próbuję uaktualnić do Vue 3, ale utknąłem w części SSR, ponieważ pakiet vue-server-renderer zgłasza następujący błąd:

Vue packages version mismatch: - [email protected] - [email protected] This may cause things to work incorrectly. Make sure to use the same version for both.

Ale nie ma wersji 3.0.0 dla vue-server-renderer ...

Dzięki googlowaniu znalazłem ten problem w repozytorium vue-next: https://github.com/vuejs/vue-next/issues/1327

Ale dla mnie nadal nie jest jasne, jak osiągnąć SSR w wersji 3 vue. Czy to już możliwe? Czy jest przykład, jak używać SSR z Vue 3?

vue.js server-side-rendering

1 answers

Uli Krause 2020-11-01 18:43.

Vue-server-renderer może być używany tylko z vue w wersji 2. Jedną z dużych zmian w wersji 3 jest to, że ma teraz wbudowaną obsługę SSR.

Więc zamiast używać vue-2.0 server-renderer, teraz wystarczy użyć vue's createSSRApp. Na serwerze, aby wyrenderować utworzoną w ten sposób aplikację jako ciąg znaków, który możesz wysłać do przeglądarki, użyj renderToStringmetody, z której możesz importować @vue/server-renderer(pamiętaj, że musisz zainstalować ten pakiet osobno).

Jako super podstawowy (bez pakietu lub czegokolwiek) przykład wyglądałby tak:

const express = require('express');
const { createSSRApp } = require('vue');
const { renderToString } = require('@vue/server-renderer');

const app = express();

const example= {
  template: `
    <div>
      Hello World
    </div>`,
};

function renderVueApp(req, res) {
  const vueApp = createSSRApp(example);

  (async () => {
    const html = await renderToString(vueApp);

    res.send(`
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <script src="https://unpkg.com/vue@next"></script>
          <title>About blank</title>
        </head>
        <body>
          <div id="app">${html}</div> <script> const example = { template: '<div>Hello World</div>}; Vue.createSSRApp(example).mount('#app', true); </script> </body> </html> `); })(); } app.get('/', renderVueApp); const port = process.env.PORT || 8080; app.listen(port, () => console.log(`Server started at localhost:${port}. Press ctrl+c to quit.`)
);

W front-endzie pozwalasz vue przejąć znaczniki z serwera, czyli tworzysz i montujesz aplikację w trybie hydratacji.

Moduł renderujący pakiet, do którego odwołałeś się w swoim pytaniu, jest mniej więcej wyodrębniony z mechanizmu renderującego vue-2.0. Aby z niego skorzystać, będziesz musiał użyć wtyczki-klienta i wtyczki-serwera z pakietu vue-2.0 server-renderer i podłączyć je do procesu webpacka, aby uzyskać pakiet serwera i manifest klienta.

Zauważ, że w tej konfiguracji moduł renderujący pakunki będzie wprowadzał tylko skrypty wejścia / początkowe z rel = "preload". W tej chwili „nowy” program ładujący vue nie wstrzyknie żadnej logiki rejestracji komponentów do komponentów (tak jak robi to „stary” program ładujący vue). Mimo to, vue-bundle-renderer może i będzie wstrzykiwać fragmenty asynchroniczne z rel = "preload", o ile są przywoływane w ssrContext._registeredComponents. Jeśli więc potrzebujesz tej funkcji w swojej aplikacji, będziesz musiał sam napisać tę logikę.

Oczywiście jest to jeden ze sposobów. Jestem pewien, że jest o wiele więcej dróg, które prowadzą do tego samego celu.

Napisałem wersję vue3 klonu vue2 hackernews, która wykorzystuje wszystkie opisane / wymienione rzeczy.

Znajdziesz go tutaj: https://github.com/raukaute/vue-hackernews-3.0

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

MORE COOL STUFF

Jana Duggar: Wszystko, co powiedziała o miłości i jej 5-letnie okno na znalezienie „jednego”

Jana Duggar otwarcie mówiła o swoich poszukiwaniach miłości. Oto wszystko, co powiedziała na ten temat i jej pięcioletnie okno na małżeństwo.

2023-06-12.

Sam Heughan dokładnie wie, co weźmie z zestawu „Outlander” - „Czuję się, jakbym był Jamiem, kiedy je zakładam”

Gwiazda „Outlandera”, Sam Heughan, niedawno ujawnił, co zabierze z planu, aby upamiętnić Jamiego Frasera, rolę, która uczyniła go gwiazdą.

2023-06-12.

Piosenka wczesnych Beatlesów, która była jednym z „najbardziej ekscytujących występów” zespołu, według Insidera Fab Four

„She Loves You” została napisana w godzinę, nagrana w jeden dzień i była piosenką The Beatles z jednym z ich najlepszych wykonań w karierze.

2023-06-11.

Dolly Parton pomogła swojej „inwalidzkiej” babci, gdy żadne inne wnuki by tego nie zrobiły - ona też zrobiła jej psikusa

Dolly Parton i jej babcia Bessie miały szczególny związek. Babcia Parton była bardzo chora, ale to nie powstrzymało Dolly przed zrobieniem jej psikusa.

2023-06-11.

10 najstraszniejszych stworzeń morskich kryjących się w głębinach oceanu

Ocean jest pełen piękna, ale kryje też jedne z najstraszniejszych stworzeń morskich na świecie. Wiele z nich czai się głęboko pod powierzchnią oceanu, w mrocznym, podciśnieniowym świecie głębin morskich.

2025-10-29.

10 najlepszych zaklęć miecza w grze Minecraft

Jeśli walczysz z wrogimi mobami lub przygotowujesz się do scenariuszy PvP, znajomość najlepszych zaklęć miecza w Minecrafcie może dać ci znaczną przewagę. Zaklinanie mieczy pozwala zadawać większe obrażenia, zwiększać liczbę przedmiotów wypadających z potworów i wydłużać trwałość miecza.

2025-10-29.

13 krajów socjalistycznych, które wyglądają zupełnie inaczej

Kiedy ludzie mówią o krajach socjalistycznych, często wyobrażają sobie pełną kontrolę rządu i brak własności prywatnej. Jednak w praktyce gospodarki socjalistyczne są bardzo zróżnicowane.

2025-10-29.

Podsumowanie Niedźwiedzia: Czy Marcus jest najmilszym, najłagodniejszym i najszczerszym mężczyzną w Chicago?

W „Children” pojawia się epizod ze znanym nazwiskiem i kilka druzgocących wiadomości

2024-07-03 19:12.

Czy za 9800 dolarów „zapakowałbyś ich” do tej siedmiomiejscowej Toyoty RAV4 z 2008 roku?

Uważa się, że ten RAV4 jest w doskonałym stanie i jest przygotowany do gry w muzyczne krzesła.

2024-07-03 19:04.

Furgonetka dostawcza Amazon zapala się w wyniku ognistej eksplozji podczas letnich upałów w Houston

Na nagraniu z drona uchwycono strażaków, którzy najwyraźniej walczyli o ugaszenie pożaru.

2024-07-03 19:04.

Marvel's Black Panther Show będzie najważniejszym serialem animowanym w historii

Eyes of Wakanda jest bezpośrednio powiązany z MCU, a także aktualizacje X-Men '97, What If..., Daredevil i nie tylko.

2024-07-03 19:03.

Aktorzy serialu Laguna Beach: Gdzie są teraz?

„Laguna Beach” opowiadało o życiu licealistów Lauren Conrad, Kristin Cavallari, Stephena Collettiego i innych w połowie lat 2000. Oto, gdzie obecnie znajdują się członkowie obsady reality show MTV.

2024-07-15.

Historia randek Avy Gardner: spojrzenie wstecz na małżeństwa i romanse ikony Hollywood

Ava Gardner była żoną Mickeya Rooneya i Franka Sintry, a także spotykała się z kilkoma innymi gwiazdami Hollywood. Oto spojrzenie wstecz na historię randek Avy Gardner.

2024-06-23.

Posiadłość Kim Zolciak-Biermann i Kroy Biermann List w Gruzji na sprzedaż w Splicie

Gwiazda „Prawdziwych gospodyń domowych z Atlanty” i jej były mąż, zawodowy zawodnik NFL, po raz pierwszy kupili rozległą rezydencję Alpharetta w 2012 roku.

2023-10-17.

3 sprawdzone sposoby na poprawę umiejętności pisania

Korzyści płynące z pisania i strategie, które Ci w tym pomogą

W 2022 roku, wraz z wydaniem GPT-3, umiejętność pisania wydaje się tracić na znaczeniu. Dzięki sztucznej inteligencji osoby o słabym pisaniu mogą również generować wysokiej jakości personel.

Powolna erozja: ujawnianie sposobów, w jakie ludzie marnują swoje kariery

W dzisiejszym dynamicznym i konkurencyjnym świecie kariera odgrywa znaczącą rolę w rozwoju osobistym, stabilności finansowej i ogólnej satysfakcji z życia. Jednak wiele osób wpada w nieustający cykl stagnacji i niezadowolenia, stopniowo marnując swoje życie zawodowe.

Co wpływa na podcast?

W zeszłym tygodniu zauważyłem komunikat prasowy, wysłany za pośrednictwem PressGazette (brytyjski serwis informacyjny). W artykule ogłoszono, że Acast, skandynawska firma hostingowa i reklamowa podcastów, będzie przewodzić konsorcjum „prawdopodobnie najbardziej wpływowych” wydawców podcastów.

Language

Japanese

Spanish

German

French

Thai

Portuguese

Russian

Vietnamese

Italian

Korean

Turkish

Indonesian

Polish

Hindi

Jak korzystać z SSR w Vue 3

1 answers

Related questions

MORE COOL STUFF

Jana Duggar: Wszystko, co powiedziała o miłości i jej 5-letnie okno na znalezienie „jednego”

Sam Heughan dokładnie wie, co weźmie z zestawu „Outlander” - „Czuję się, jakbym był Jamiem, kiedy je zakładam”

Piosenka wczesnych Beatlesów, która była jednym z „najbardziej ekscytujących występów” zespołu, według Insidera Fab Four

Dolly Parton pomogła swojej „inwalidzkiej” babci, gdy żadne inne wnuki by tego nie zrobiły - ona też zrobiła jej psikusa

Jakie jest najtwardsze drewno na świecie?

10 najstraszniejszych stworzeń morskich kryjących się w głębinach oceanu

10 najlepszych zaklęć miecza w grze Minecraft

13 krajów socjalistycznych, które wyglądają zupełnie inaczej

Podsumowanie Niedźwiedzia: Czy Marcus jest najmilszym, najłagodniejszym i najszczerszym mężczyzną w Chicago?

Czy za 9800 dolarów „zapakowałbyś ich” do tej siedmiomiejscowej Toyoty RAV4 z 2008 roku?

Furgonetka dostawcza Amazon zapala się w wyniku ognistej eksplozji podczas letnich upałów w Houston

Marvel's Black Panther Show będzie najważniejszym serialem animowanym w historii

Aktorzy serialu Laguna Beach: Gdzie są teraz?

Historia randek Avy Gardner: spojrzenie wstecz na małżeństwa i romanse ikony Hollywood

Kim jest żona Johna Cleese'a? Wszystko o Jennifer Wade

Posiadłość Kim Zolciak-Biermann i Kroy Biermann List w Gruzji na sprzedaż w Splicie

zaimki są bardzo przerażające

3 sprawdzone sposoby na poprawę umiejętności pisania

Korzyści płynące z pisania i strategie, które Ci w tym pomogą

Powolna erozja: ujawnianie sposobów, w jakie ludzie marnują swoje kariery

Co wpływa na podcast?

Language