問題タブ [server-side-rendering]

サーバー側のレンダリングでVue を使用したいのですが、テンプレート内のコンテンツ データは他の CMS サーバーから要求する必要があります。

非同期リクエストであるためaxios.get、サーバーはリクエストが完了する前に空のコンテンツを送信します。

curl を使用してコンテンツをリクエストします。

サーバー側で CMS コンテンツ データをレンダリングできることを確認するにはどうすればよいですか?

overpassturbo-eu から抽出した 2 つの大きな json/geojson ファイルがあります。

OSM でこのデータ セットをレイヤーとしてプロット/追加しようとしています。

さまざまなズーム レベルでデータ セットをフィルター処理する必要があります。

これらのファイルは大きすぎるため、クライアント側でデータ セットを分析するためにファイル全体を効率的にダウンロードすることはできません。

これらのデータセットをサーバー側でフィルタリングする効率的な方法はありますか?

Vue アプリにサーバー側のレンダリングを持たせようとしています。私はvue-server-renderer（https://www.npmjs.com/package/vue-server-renderer）を使用しています。クライアント側のレンダリングは正常に機能しています。

私のアプリの使用vue-routerとaxios

これが私のものserver.jsです：

getInfo()サーバーデータを取得する方法です。

ここにあるgetInfo()：

私のサーバーエントリは次のとおりです。

ただし、 のすべてのコンポーネントにまたはrouter.getMatchedComponents()がないことにすぐに気付きます。したがって、メソッドは機能しなくなります。$route$setgetInfo()

https://router.vuejs.org/en/api/router-instance.htmlのドキュメントは非常に短く、多くの情報を提供していません。

router.getMatchedComponents()

現在のルートに一致するコンポーネント (インスタンスではなく、定義/コンストラクター) の配列を返します。これは主に、サーバー側のレンダリング中にデータのプリフェッチを実行するために使用されます。

どうすれば問題を解決できますか?

requireBabelフックなしでサーバー側レンダリングを使用する良い方法はありますか?

現在、サーバーでのコンパイルjsxと ES6 モジュールのインポート/エクスポートに使用しています (これらは .NET ではまだサポートされていないためNode.js)。のインポート/エクスポートをやめることができると思いますがrequire、 にとどまりたいjsxです。私が require フックで遭遇する主な問題は、デバッグとサーバーの起動の遅さです。

デバッグの問題を解決するために gulp を使用してソースマップをロードする人がいることは知っていますが、私にはやり過ぎのように思えます。

それで...

私は問題に直面しています...

不変違反: 要素の型が無効です: 文字列 (組み込みコンポーネントの場合) またはクラス/関数 (複合コンポーネントの場合) が必要ですが、オブジェクトを取得しました。

...そして、「エクスポートのデフォルト」に関して同じ応答を複数回見つけました。私の問題の解決策が、TypeScript のコンパイル、ECMA バージョンの互換性などに関する単純なものであることを願っていますが、どんな助けも大歓迎です。

tsconfig.json

「ターゲット」を指定していないことに気付いたので、tsc のデフォルトは「es3」であり、これが下位互換性に最適であると考えました。「es5」にアップデートしようとしましたが、問題は解決しませんでした。

server.ts

tsconfig.json の「jsx」プロパティに「react」を指定しているため、コンパイルされたファイルは .js になりますが、React.createElement などの呼び出しが含まれているため、JS ファイルに高速ビュー エンジンを指定しています。統合プロジェクトの反応エンジンを使用します。以前はexpress-react-viewsを使用していましたが、ここでの戦略に関する情報は役に立ちます。

index.tsx

index.ts

...どんな助けでも大歓迎です!

これは私の高速サーバー設定です

localhost:3000/ でアプリケーションを起動すると、すべてのルートが正常に機能しますが、localhost:3000/login または他のルートに直接アクセスしようとすると、Cannot GET /loginエラーが発生します...

サーバーサイドレンダリングをreactミドルウェア（以前に使用したことがあります）で使用したくないので、動作させる方法はありますか？

そのため、SEO に最適化されたコンテンツ (=== サーバー上でレンダリングされる) が必要な POC アプリに取り組んでいます。ただし、同じルート内に、さまざまなソースからの動的データが存在する可能性があり、そのすべてのデータをキャプチャするのに時間がかかる場合があります。この動的データは SEO には必要ないため、非同期ロードが実装されます。

私がこれまでに持っているのは、次のようなものです (これは単なるサンプルであることに注意してください):

ExpressJS を使用している server.js (その小さなスライス):

// server.js app.get('*', (req, res) => { ReactRouter.match({ routes, location: req.url }, (err, redirectLocation, renderProps) => {

ご覧のとおり、解決された Promise を返す preRenderMiddleware があり、これは私が間違っていると思われる部分です。

したがって、私の問題は、サーバーから期待されるマークアップを取得することです-AboutContainer this.props.data でデータを取得しています。しかし、クライアント側が起動すると、 this.props.data は未定義です。

誰かが私に良い解決策を教えてくれますか? 私はこの問題を抱えた最初の人ではないと確信しています。これに対するいくつかの解決策に出くわしましたが、クライアント上で再要求された同じデータはすべて回避したいものであり、同じことは少し奇妙です。

また、Redux / Fluxを使用したくありません。

何かご意見は？

サーバー側とクライアント側で同じコードを実行できるように NodeJS を学びたいとずっと思っていました。Express と EJS で NodeJS を使用しています。そう。多くの HTML、JS、CSS、およびテンプレート付きの小さなビットを含む .ejs ページがあります。正義のために、次のようにします。

the_list --> some.ejs

サーバー上でいくつかのレンダリングを行った後、完全なリストができました。

そう。今、クライアントで再レンダリングしたいと思います。ajax リクエストを行ったところ、the_list に新しいアイテムが追加されました。正しい方法は何ですか？