Next.js: Reactルーター4で使用

作成日 2017年04月05日  ·  122コメント  ·  ソース: vercel/next.js

next.jsを新しいreactrouter v4で使用することは可能ですか?

最も参考になるコメント

@timneutkensがreactルーターの統合を追加すると、nextjsの採用が増え、開発が改善されます。 私のような開発者はこれが起こるのを見たいと思っています。優先順位を上げることを検討してください。

全てのコメント122件

@Knaackee可能性を試しましたか? 誰かがRRのいずれかのバージョンで動作するようになったかどうかも疑問に思っていますか?

次に彼自身のルーターがあります、なぜRRを使うのですか?

@sergiodxa既存のアプリをNextに移植する

@ oyeanuj🤔徐々にNextに移行できます。Next.jsを1つのルートを処理するように設定し、プロキシを使用して現在のアプリとNext.jsの両方を使用し、2番目のルートをRRからNext.jsに移動します。移行中に現在のアプリを維持できる方法で、最終的にはNext.jsにすべてが含まれるようになります

例を見ると、nextにはRRv2-3のような単一のルートテーブルがあり、RRv4のような「ネストされたルート」をサポートしていないようです。 これらはいいです。

私はRRを使おうとしますか、それとも私が知らない大きな警告がありますか?

@iglそれに対する解決策を

ネストされたルートの新しいreact-router4パラダイムはゲームチェンジャーであり、現在のプロジェクトではなくてはならないものです。 誰かがrr4をnext.jsで動作させることに成功したかどうか疑問に思っていますか?

MemoryRouterは、意図したとおりでない場合でも機能します...
それ以外の場合、動的コンポーネントはクライアント側のみであり、 HashRouterは正常に機能します...

const AdminPage = dynamic(
  import('..../AdminPage'),
  { ssr: false }
);

また、 @ malixsysのアプローチに従い、 react-routerを使用してクライアント側のルーティングを処理し、すべてのサーバーがnextルーターを使用してコンテンツをレンダリングしました。

@malixsys @pegiadise次のルーターとreact-routerを一緒に使用する方法の詳細を教えてください。

componentDidMountフラグを設定し、フラグが真実である場合は条件付きで<Router />レンダリングできます。 ( componentDidMountはサーバーでは実行されません😉)

実際、まもなくNext.js内にReactRouterを組み込む予定です:)
https://twitter.com/rauchg/status/948318111828099072

これはまだ起こっていますか? V6カナリアのリリースノートを見ることができますが、それについての言及はありません。

最終的に。 それは間違いなく私たちの心の中にあります。 現在、他の優先事項があります(レイアウトコンポーネント、信頼性の高い開発、その他いくつかの長年の未解決の問題)。

それは残念です。チームにとって優先度は低いかもしれませんが、基本的には、私のような人々がそれを使い始めるのを妨げる唯一のことです。 ルートを2回設定する必要があると言われ、あきらめるまで、チュートリアルを読みました。

@timneutkensがreactルーターの統合を追加すると、nextjsの採用が増え、開発が改善されます。 私のような開発者はこれが起こるのを見たいと思っています。優先順位を上げることを検討してください。

それは残念です。チームにとって優先度は低いかもしれませんが、基本的には、私のような人々がそれを使い始めるのを妨げる唯一のことです。

同じ。

追跡できるように、少なくともこの問題を再度開くことはできますか?

これを再開しますが、これはオープンソースプロジェクトであり、すべてにNext.jsを使用しているため、現時点ではzeit.coの場合はそれほど強力なケースがないことに注意してください。

そのため、長期的な目標の一部であり、すぐに実行することはできないと言っていましたが、現在取り組んでいます。

Next 6で紹介した機能は、実際にはReactルーターのサポートに向けて機能しています。

Next 6には他にも優先事項があり、Next.jsの信頼性とスケーラビリティが大幅に向上しています。たとえば、100倍高速なページ解決、App Component、開発中の次のエクスポート作業の作成、babel7などです。

これが私の以前のコメントを詳しく説明することを願っています。

したがって、TLDRは次のとおりです。

  • 私たちはそれをするつもりですが、すぐにはしません
  • Next 6には、Next.jsのさまざまな部分に多くの改善が加えられています

@timneutkensのコメントをさらに拡張するには、RRが絶対に必要ですが、現在のルーターには、それを優先する差し迫った制限はありません。 想像できるすべてのルーティングのユースケースは、現在のNext.jsAPIで正常に実装されています。

ReactRouterのサポートが本当に必要な理由は2つあります。

  • 独自のNext.jsコードベースを簡素化し、独自のルーターを維持する必要がなく、物事をより小さくモジュール化する
  • すでにRRを使用している大規模なアプリケーションの移行パスを簡素化する

そのため、この問題を未解決のままにしておく必要があることに同意します。

対位法として、react-routerがないということは、nextがrelay-modernでうまく機能することを意味し、古いreact-routerアプリからnextに切り替えた理由の1つでした。

@merry昨年、リレーモダンのRRv4アプリに取り組んだか
どちらかが原因で深刻な問題が発生したことを覚えていません。

@iglこれは、リレーのマニュアルに従って、次のとおりです。 https://facebook.github.io/relay/docs/en/routing.html#react -router-HTTPS-reacttrainingcom反応し、ルータ

問題は、RRv4のコンポーネントアプローチでは、コンパイル前のステップで決定論が許可されないため、クライアントにウォーターフォールが要求される可能性があることです。

@rauchg興味深いことに、Nextのルーターについての私の理解は、ネストされたルーティングの概念をサポートしていないため、ページ内をナビゲートしている間、外部マークアップを維持できるということです。 現在のルーターでこれを可能にする方法があるかどうか知っていますか?

@dbbkはnextgramサンプルアプリ(https://github.com/now-examples/nextgram)をチェックします。

次の5では、すべてのページが拡張するトップレベルのレイアウトコンポーネントを使用して「外部マークアップ」を実現します。ベースレイアウトにはトップナビゲーションがあり、次にリスト/詳細などのベースを拡張するいくつかのサブレイアウトがあります。当社のページコンポーネントは、これらのサブレイアウトを独自の特定のコンテンツで拡張します。 次の6では、 _app.jsを使用して基本的な「外部マークアップ」を実行することもできます。

次のバージョンは、React Routerではないルーティングソリューションを選択するように構成できますか?

こんにちは、私は小道具をページに渡すために反応ルーターだけが必要です( <Route render ={} />代わりに<Route component ={} /> <Route render ={} />使用して)、Nextでそれを行うことができますか?

例を見ると、nextにはRRv2-3のような単一のルートテーブルがあり、RRv4のような「ネストされたルート」をサポートしていないようです。 これらはいいです。

こんにちは、

これは、単一のルートに対して単一のページを作成する必要があることを意味しますか?

2つのルートsign uplog inます。 同じレイアウトを共有する1ページがありますが、唯一の違いはフォームの領域です。 つまり、 pagesフォルダーに1つのファイルを作成する必要があります。 しかし、次のルートでは、 pagesフォルダーに2つのファイルを作成する必要があります。 それは...ですか?

もしそうなら、レイアウトはフォームエリアだけでなく、すべてのナビゲーションで再マウントされますよね?

@ 7c78できることの1つは、すべてのページの永続的なページレイアウトに_app.jsを活用することです。 もう1つ行うことは、探しているものを実現するために、さまざまなページで再利用できる共有レイアウトコンポーネントを作成することです。

// pages/login.js

class LoginPage extends React.Component {
  render() {
    return (
      <AuthForm>    // same component can be reused in signup
        <form>
          ...implementation of login
        </form>
      </AuthForm>
    );
  }
}

さらに、最近行ったことを実行して、ページコンポーネントがすべて拡張する基本レイアウトコンポーネントを定義できます。

//layouts/baseAuth.js

class BaseAuth extends React.Component {
  abstract formContent();  // we use typescript, but you can have the same concepts
  abstract formSubmit():

  render() {
    return (
      <SomeStyledDiv>
        <form>
          {this.formContent()}
          {this.formSubmit()}
        </form>
      </SomeStyledDiv>
    );
  }
}

次に、ログインページとサインアップページでBaseAuthを拡張し、それぞれにformContentformSubmitを定義します(正確な要件がわからないため、これらはおもちゃの例です)。

@merrywhether
私は現在あなたのアプローチを使用していますが、次の例でもそれを使用しています。

しかし、私の懸念は、フォームごとに別々のページを作成する必要があることです。 つまり、レイアウトは再利用されますが、ページは再利用されません。 そして、レイアウトはすべてのナビゲーションで再マウントされます。

RRv4では、単一のページがあり、フォームは(ページ全体ではなく)ルートに基づいてレンダリング/再マウントされます。 ルートは単なるコンポーネントです。

迅速な対応ありがとうございます!

@ 7c78これは再マウントについても当てはまりますが、vDOMが同じ状態に解決されると、DOMノードが再利用されると思います。

また、react-routerとrelay-modernを使用できないため、これまであまり気にかけていなかったので、このパターンを使用する必要がありました。

@merrywetherサーバーがすべてのルートに対して新しいdocument / htmlを返すため、vDOMについてはよくわかりません。 申し訳ありませんが、この仮定は無視してください。私は初心者です。

とにかくこのパターンを使用する必要があることに同意します。 ありがとう!

アプリ全体をpages / index.jsに含めることで、next.jsでRRを使用できますが、すぐに使用できるコード分割など、nextの優れた機能の一部が失われ、自分で設定する必要があります。

リーチルーターを検討したいのですが。 これはreact-routerと非常によく似ており、いくつかの重要な利点があります。

  • リンクの生成とフォーカス管理に関するいくつかの重要な問題を解決します(https://reach.tech/router/accessibility)。
  • 軽量化(執筆時点)

リーチルーターも素晴らしいです🥇

RRスタイルの動的ルートは優れたAPIですが、静的(および静的に分析可能な)ルーティングには多くの利点もあります。 どちらのアプローチもスラムダンクの勝者ではありません。

@sorokinvjこれはプラグインを介してのみサポートされています(現在).. https://github.com/fridays/next-routes

静的リンクは非常に基本的であるため、リンク内のパラメーターもサポートしていません...

私は今のところサードパーティのパッケージnext-routesを使用していますhttps://github.com/fridays/next-routesそれを回避するために

私のiPhoneから送信された

2018年10月24日には、午前23時01分で、アンディ・イングラム[email protected]書きました:

RRスタイルの動的ルートは優れたAPIですが、静的(および静的に分析可能な)ルーティングには多くの利点もあります。 どちらのアプローチもスラムダンクの勝者ではありません。


このスレッドにサブスクライブしているため、これを受け取っています。
このメールに直接返信するか、GitHubで表示するか、スレッドをミュートしてください。

とりあえずnext-routesも使用していますが、次のチームは正規表現ファイル名(Sapperに触発された)を介してファイルシステムルーティングにパスパラメーターを追加する作業をしていると思います。

@merry私もnext-routesを使用していますが、これをNext.jsコアの一部にすることをお勧めします。

あなたが言った

次のチームはパスパラメータの追加に取り組んでいると思います...

興味がありますが、これについて何か参考になりますか? おそらくルートパラメータの未解決の問題ですか? 私はそれを見つけることができません...おそらくプラグインは必要性を解決し、それは将来的に推奨される解決策になるでしょう。

@curranソースは、

この問題は2017年4月5日に発生し、現在は2019年2月27日です。ほぼ2年で、解決策はありません
中途半端な内蔵ルーターを何か良いものに交換する時が来たのでしょうか?

痛い。 これは、ルーティングソリューションに多くの時間を費やしたNextJS開発者にとって非常に侮辱的です。

最初はReactRouterが恋しかった。 今では、誰かが私に思い出させるまで、NextJSが別のルーターを持っていることさえ覚えていません。 たとえば、詳細なLink APIは、プロキシでラップするのは簡単です(データ/ APIアーキテクチャによって異なります)。 このトップシークレットを共有する:😆

import _Link from "next/link"
export function Link({as, children, href}) {
  as = as || QS.parse(U.parse(href).query || "").url || null // QS, U are parsing libs
  return <_Link as={as} href={href}>
    {children}
  </_Link>
}
<Link as="/about" href="/page?url=/about"/> verbose
→
<Link href="/page?url=/about"/> ok

私たちは皆、二次的なものについて不平を言う時間を減らすべきだと思います😉

@ ivan-kleshninニース私は同様のラッパーを追加しました

以前のコメントによると、私はhttps://www.contributor-covenant.org/version/1/4/code-of-conductを指摘したいと思い

私はそのコメントを隠しました。

ほとんどのユースケースでnext/routerに問題はありません。
ただし、 universal routing部分は少し改善されるはずです。
Now 2デプロイメントの場合、 now.jsonを取得し、それを使用してアプリケーションにルーティングしたいと思います。

nextJsプロジェクトにRR4を実装する場合は、次の2つのことを行う必要があります。

  1. NextJS SSRを防止します。 next/dynamicを使用することでそれを行うことができます。
  2. HashRouter代わりにBrowserRouter ->ユーザーがページをリロードすると、ブラウザは前のページ(404ページではない)をロードできます

nextJsプロジェクトにRR4を実装する場合は、次の2つのことを行う必要があります。

  1. NextJS SSRを防止します。 next/dynamicを使用することでそれを行うことができます。
  2. HashRouter代わりにBrowserRouter ->ユーザーがページをリロードすると、ブラウザは前のページ(404ページではない)をロードできます

この返信をありがとう、私を大いに助けました。

@ reach / routerとreact-router5がマージされています: https

これはnext.jsにどのように影響しますか?

@ alp82Next.jsはまだReactRouterまたはReachRouterを使用していないため、Next.jsにはまったく影響しません。

インデックスページで複数のページコンポーネントをレンダリングするには、nextjsのルート切り替え機能が必要です。
では、これをnextjsに実装するにはどうすればよいですか....... ???

nextJsプロジェクトにRR4を実装する場合は、次の2つのことを行う必要があります。

  1. NextJS SSRを防止します。 next/dynamicを使用することでそれを行うことができます。
  2. HashRouter代わりにBrowserRouter ->ユーザーがページをリロードすると、ブラウザは前のページ(404ページではない)をロードできます

404エラーをスローせずに前のページを再レンダリングしたい場合は、エクスプレスサーバーファイルでこのgetrouteを使用してください。

server.get( 'your params'、(req、res)=> {
const actualPage = '/ your_page'
const queryParams = {id:req.params.id}
app.render(req、res、actualPage、queryParams)
})

next.jsreact-router next.jsとともに使用するアプローチを文書化し、ネイティブファイルシステムベースのルーティングの代わりに単一のエントリポイントファイルを提供し、ネイティブSSR機能を完全に

私はフィードバックを受け取り、私がしたことを改善させていただきます。

ドキュメントは次のように入手できます。

乾杯!

最終的に単一のエントリポイントになるため、react-routerをそのように含めることは強くお勧めしません。つまり、開発ビルドが(非常に)遅くなり、クライアント側に大量のコードを送信する可能性が高くなり、自動静的エクスポートなどの最適化の可視性が低下します。

@timneutkensたぶん私は間違っています。 ただし、遅延読み込みでは、ルーティング構成は1つの構成ファイルにすぎません。 ここでは、スケーラビリティやパフォーマンスに影響はないと思います。 これについてもっと知りたいです。
react-routerの利点は、開発者がコードを完全に制御できることです。

@timneutkens 、ここでは議論を始めませんが、コメントを再表示するようにお願いします。 私は自分の仕事を利用可能にしてコミュニティに還元するために時間を費やしましたが、人々を黙らせることがオープンソース開発にどのように役立つかわかりません。

@timneutkensあなたが言及する点に関しては、それはトレードオフの問題です。 私のは、Next.jsを別の設定でどのように使用できるかを調べるための実験です。

クライアント側のコードが多すぎます

最新のバンドルはクライアントアセットをチャンクに分割でき、 react-routerルートは実際には非常に便利な分割ポイントです。

開発ビルド時間が長くなる

それは大きなプロジェクトに支払う代償ですが、適切なwebpackの微調整で対処できないものは何もありません。

静的エクスポートなし

静的エクスポートが重要な最適化レイヤーであることに同意します。 平均的なNext.jsアプリケーションによって提供されるページのほとんどは、とにかく動的データを取得する必要があり、静的エクスポートの恩恵を受けることはできません。

この懸念についての解決策の欠如はありません。 例えば。 静的にエクスポートされるルートのリストを手動で宣言することはまだ可能かもしれません

コメントを非表示にした理由は、これはトラフィックの多い問題であり、Next.jsアプリを構築するための推奨事項を反映していないためです。 誰かがreact-routerの使用を検討していることになった場合、彼らはあなたの例を盲目的に使用し、Next.jsを使用してルーティングを適切に設定する方法を調査しません。

それは大きなプロジェクトに支払う代償ですが、適切なwebpackの微調整で対処できないものは何もありません。

あなたのアプローチに基づいて開発時の起動をスピードアップすることはできません。webpackはインポートするすべてのルートをコンパイルして監視するだけなので、webpack構成の特定の微調整はありません。これにより、一般的なコンポーネントの編集が大幅に遅くなります。 したがって、Next.jsにオンデマンドエントリがある理由: https ://nextjs.org/blog/next-8#improved -on-demand-entries

さらに、ルートなどの(自動)プリフェッチがあります。ここに入ることができる詳細はたくさんありますが、tldrは、開発者のエクスペリエンスとアプリが悪化することになるということです。

コメントを非表示にしないことは、それを使用したいのは、すでにreact-routerを使用しているアプリを移行してから、徐々に複数のページに移動することだけであることを適切に反映している場合は問題ありません。

ねえ@timneutkens
静的に分析可能であることがテーブルにもたらされ、動的ルーティングソリューションでは不可能ないくつかの長所を数えますか?

このようなものhttps://github.com/jaredpalmer/after.js

私はすべてのコメントを読みましたが、ネクスト.jsの将来の反復でRR4 +が含まれるのか、それともオプションになるのかはまだはっきりしていません。 ルーターのロードマップなどですか?

@laurencefass react-routerをサポートする予定はないようです(本日現在)。

私にとって、Next.jsのルーティングシステムは十分に成熟しているので、とにかく(もう)おそらく必要ありません:)

「私にとって、Next.jsのルーティングシステムは十分に成熟しているので、とにかく(もう)必要ないでしょう:)」

既存のコードベースでNext.jsを段階的に採用しようとしている人を除いて。 もっと役立つ議論はおそらく「Next.jsルーティングとreact-routerルーティング」ではないと思います。 より有用な議論は、「react-routerを使用して巨大なアプリをNext.jsに段階的に移行するにはどうすればよいですか?」だと思います。

Nextのルーターには、ルートビューをネストする機能はありませんか? ルートへのすべてのナビゲーションは、DOMを吹き飛ばし、更新します。 ネストされたビューは、かなり一般的な要件です。

@dbbknextjsチームが取り組んでいると聞きました。

next jsは、ルーターに対して非常に柔軟です。 https://dev.to/toomuchdesign/next-js-react-router-2kl8

Webサイトを通常のJSおよびjQueryコードからReactに移動しています。 以前のコードとは異なり、ページを変更するときに音楽が停止しないようにする必要があるため、ReactRouterを使用しました。

今SEOの目的のために、私はグーグル検索からいくつかの良いトラフィックを持っているので、私はそれを維持する必要があります。 したがって、パフォーマンスを向上させるために、Next.jsを使用したSSRを使用したいと思います。

Next.jsはサーバー側でページをレンダリングでき、クライアント側でページが読み込まれると、Next.jsはReact Routerの制御下でナビゲーションを許可するため、ユーザーが音楽を聴いている場合、Next.jsリンクは音楽を停止するために現在のページを離れる必要がありますか?

Next.jsはクライアント側のルーティングのみを作成できますか?

React Routerを統合することでこれを解決できるのであれば、私は参加しています。アプリがクライアント側に到達したら、継続的な音楽再生が必須だからです。

next jsは、ルーターに対して非常に柔軟です。 https://dev.to/toomuchdesign/next-js-react-router-2kl8

@laurencefass 、それは非常に良いアプローチです、私は前にそれを読みました。 そして記事には、Next.jsチームはそれを推奨していないと書かれています。理由はわかりません。 しかし、それは私には良いようです

@KeitelDOGそのためにreact-routerは必要ありません。Next.jsルーティングは同じ利点をもたらします。さらに、自動コード分割のおかげでアプリは軽量になります(react-routerでは簡単にはできません)。

_edit:これを追加します:おそらくreact-routerの唯一の利点は、同じビュー機能にネストされたルートが簡単なことです。Next.jsルーターはユースケースの95%を解決するはずです_

@martpie応答をありがとう、それは私が昨夜Linkコンポーネントで見たものです。 次に、Next.jsは、私が望んでいたサーバーとクライアントの組み合わせです。

また、ネストされたルートを動的に細かく制御するコンポーネントの場合、ReactRouterで非常に気に入っています。 しかし、React WebサイトをNext.jsに変更するのではなく、SEOの利点を失うことなくJS-jQueryWebサイトをReactマルチページアプリケーションに変更することを計画およびテストしているため、回避策を講じることができると確信しています。 Googleで。 だから私はNext.jsで行くべきだと思います

@timneutkens Next.js 10でこれをサポートする計画はありますか?

@TrejGunありがとう、それは間違いなく話題から外れていません。

何か計画はありますか?
next/routerは素晴らしいです、それは多くの助けを提供します。 しかし、複雑なアプリケーションに対処するには、より専門的なルーターが必要です。 React-routerはルーターのリーダーです。
たぶんafter.jsを参照することができます。

ええ、このページベースのシステムは、ネストされたルートの恩恵を受ける可能性のある複雑なデータ駆動型アプリケーションを処理するのに十分なほど洗練されていません。

React-routerはv6バージョンをリリースしようとしています。これはこれまでで最高のルーターになります。 next.jsそれをサポートするのを楽しみにしています。

より良いアプローチは、 next.jsrouterを分離して、人々がお気に入りのrouter自由に選択できるようにすることです。

前のコメントの+1。 next.jsは驚くべきものです。私が使用していない唯一の理由は、ルーターの柔軟性の欠如です。 将来のリリースでReactRouter 6をサポートするか、ルーターを交換可能にしてください。

React Routerに本当に熱心な人は、同じ作成者による新しいプロジェクト「Remix」をフォローすることに興味があるかもしれません。これは、ReactRouterを使用するNext.jsの代替手段です。

問題は、SSR、サーバー側の小道具などのために、フレームワークがそのルーターに深く結びついていることだと思います。

Nextはパフォーマンスを念頭に置いて構築されており、サーバー側のreact-routerは、レンダリングしようとするもの、つまり必要なデータを知る前にDOMツリーをたどる必要があるという点でパフォーマンスに大きな影響を及ぼします。 getInitialPropsの全体的な目的は、データをフェッチする前にreactの使い捨てレンダリングを実行する必要がないようにすることです。これは、多くのフレームワークがサーバー(およびクライアントで次のように現れる)で経験する一般的な落とし穴です。滝をリクエストしてください)。 次に、各トップレベルページに、さまざまなサブコンポーネントが必要とする可能性のあるさまざまなデータパターンのすべてを宣言し、完全なリクエストパスで分岐させる(または大規模な単一のオーバーフェッチを行う)ことでこれを回避できる可能性がありますが、これはすぐに扱いにくくなり、実際には、各ページを個別に宣言することとそれほど違いはありません。

これは、Relayがreact-routerとも互換性がないのと同じ理由であり、facebook.comが複雑なWebサイトではないと非難することはできません。

Nextルーターを使用するための主な成功戦略は、構成可能性(とにかく現代のReactの推進傾向)に傾倒することです。これにより、すべてのデータをフェッチできる効率的なSSRを持ちながら、大きな重複なしにコンポーネントを再利用できます。 ( getInitialProps経由で)Reactレンダラーと話す前に。

木を歩くことによるパフォーマンスのペナルティは誇張されているように感じます。 今日の多くの本番アプリケーションは、たとえばApolloでこれを行っており、問題ないようです。

さらに、サーバーの作業が多すぎるのを本当に軽減したい場合は、応答をCDNキャッシュすることもできます。

確かに、react-routerが(AFAICT)現在の実装でNextと根本的に互換性がない理由の背後にある主な理由を指摘しているだけです。 コールドスタート時間が遅い無料のHerokudynoを喜んで使用している人々が示すように、多くのサイトは実際にはパフォーマンスをまったく必要としません(そして、一部のサイトでもこれを行っているので、これを軽蔑的には言いません。完璧にフィットすることができます)。 しかし、Nextは、サーバーの応答時間がかなり遅くなることを気にするため、パフォーマンスにあまり積極的でない場合、Nextを使用している一部の大企業には人気がありません。 一部のサイトで問題がなければ、2つは言うまでもなく、1つのレンダリングが完了する前に、Reactのストリーミングレンダラーを使用して応答を開始することはありません(そして、改善を熱心に待ちます)。

間違いなくCDNで応答をキャッシュできますが、それによって多くのパーソナライズ/ログインオプションが排除されます(ヒット率を上げるか、部分的なページレンダリングをクライアントに延期するかとのトレードオフであるため)。 アプリ全体をCDNでキャッシュできる場合は、CRAとreact-snapshotを使用し、サーバーを完全に回避することをお勧めします。 サーバーが実行している作業の量ではなく、要求に応答するのにかかる時間の問題である必要があります。

また、Apolloは、Relayのようなより意見の多い/パフォーマンス指向のフレームワークと比較して、パフォーマンスよりも使いやすさを重視するフレームワークの優れた例です。 それはすべてスペクトルです。

ええ、それで十分だと思います。 しかし、remix.runがどうなるか知りたいのですが、おそらく彼らはreact-routerで動作させるための新しいアプローチを思い付くでしょう。 確かに、ネストされたルートは必須ではありませんが、異なるページを持ち、それらの各ページを異なるレイアウトでラップするよりも、内部UIの一部をルートに合わせて変更する方が直感的であることに同意する必要があります。

次の9.3の時点で、 getStaticPathsに加えてgetServerSidePropsがあり、パスにルートパラメータがある場合に、フレームワークが事前レンダリングするパスを検出するのに役立ちます。 たぶん、react-routerでも同様のアプローチを取ることができます。

@merryweather : "Nextはパフォーマンスを念頭に置いて構築されており、サーバー側のreact-routerには、何をレンダリングしようとするかを知る前にDOMツリーを

素朴な質問:クライアントでコードが実行されたら、トップレベルのリンクとフェッチ/プリフェッチ/キャッシュをレンダリングできますか? クライアントがナビゲートする場所がわからない場合、サーバー上のDOMツリーをトラバースすることは理にかなっていますか?

ナイーブな作業シナリオ:クライアントがURLを要求すると、トップレベルのリンクとデフォルトのアクティブなリンクコンテンツをレンダリングし、要求に応じて他のすべてをajax /フェッチします(またはページが読み込まれるとバックグラウンドでプリフェッチします)...他のすべてにはすべての下位レベルが含まれますルート...すすぎと繰り返し...?

@laurencefassですが、トップレベルのリンクでさえコード内にあり、正しく発見する必要がありますか? それとも、トップレベルのリンクを検出できるように、react-routerと一緒にファイルシステムルーティングを使用することを意味しますか?

@ avin-kavish Imは実装の詳細に答えるのに最適な人ではありませんが、クライアントでは最初の画面コンテンツ(トップレベルのリンク+デフォルトのコンテンツ)をレンダリングするだけで済みます。 他のものは最初のロードで冗長だと思います。 では、なぜサーバー上でDOMをウォークするのでしょうか。

Next.jsの主な問題はルーターではなく、 getInitialPropsgetServerPropsまたはgetStaticPropsのデータフェッチパターンです。 どうして ? それはそれを必要とするコンポーネントのデータ分離を壊すからです。 たとえば、メニューのデータを取得したい場合、どこから取得しますか? 知りません。 pagesような上位のコンポーネントは、それについて何も知らないはずですよね?

Next.jsの主な問題はルーターではなく、 getInitialPropsgetServerPropsまたはgetStaticPropsのデータフェッチパターンです。 どうして ? それはそれを必要とするコンポーネントのデータ分離を壊すからです。 たとえば、メニューのデータを取得したい場合、どこから取得しますか? 知りません。 pagesような上位のコンポーネントは、それについて何も知らないはずですよね?

詳しく教えていただけませんか。 そして、代替ソリューションは何ですか?

@lishineここで少し話題から外れて申し訳ありませんが、ほとんどの場合、ルーターがここでの主な問題であるとは思いません。 Next.jsルーターは優れた宣言型であり、設定より規約は優れています。 Next.jsで使用できないのは、 getInitialProps 、..のようなデータフェッチメソッドだけです。
私のアプリでは、各コンポーネントは、graphqlまたはrestに関係なく、同じ場所、同じファイルで独自のデータを宣言する必要があります。
トップページコンポーネントは子コンポーネントを作成するためのものであり、データのフェッチはその仕事ではありません。 子コンポーネントは、親ではなく、それ自体のデータを取得する必要があります。

わかりやすくするために、アプリに使用しているコードのサンプルを次に示します。

const query = `
{
  result:users(
    where:{
      _and:[{
        active:{
          _eq:true
        }
      }, {
        is_exam_manager:{
          _eq:true
        }
      }]
    },
    order_by:{
      created_at:desc_nulls_last
    }
  ){
    id
    key:id
    user_code
    first_name
    last_name
    password
    active
  }
}
`
const Main = (props: any) => {
  const {
    data: { result }
  } = props
  return (
    <div>
      <Add title={'Add user'} role={'exam_manager'} />
      <Table
        columns={columns}
        dataSource={result}
        bordered={true}
        size={'small'}
      />
    </div>
  )
}
const MainWithData = graphql(query)(Main)
export default MainWithData

ご覧のとおり、独自のデータを持つ1つのコンポーネントがあります。 どこにでも置けます。

もちろん、Next.jsパターンは問題なく使用できますが、私の場合は、後で保守とリファクタリングを容易にするために、データとコンポーネントを可能な限り分離することをお勧めします。

私のアプリでは、各コンポーネントは、graphqlまたはrestに関係なく、同じ場所、同じファイルで独自のデータを宣言する必要があります。
トップページコンポーネントは子コンポーネントを作成するためのものであり、データのフェッチはその仕事ではありません。 子コンポーネントは、親ではなく、それ自体のデータを取得する必要があります。

私も同じように使っています。
したがって、SSRフェッチを使用していません...
では、Next.jsで実際にSSRフェッチを行う方法は?!

@linshine必要なものはすべてトップページレベルでダウンロードする必要があります。

@lishineここで少し話題から外れて申し訳ありませんが、ほとんどの場合、ルーターがここでの主な問題であるとは思いません。 Next.jsルーターは優れた宣言型であり、設定より規約は優れています。 Next.jsで使用できないのは、 getInitialProps 、..のようなデータフェッチメソッドだけです。
私のアプリでは、各コンポーネントは、graphqlまたはrestに関係なく、同じ場所、同じファイルで独自のデータを宣言する必要があります。
トップページコンポーネントは子コンポーネントを作成するためのものであり、データのフェッチはその仕事ではありません。 子コンポーネントは、親ではなく、それ自体のデータを取得する必要があります。

わかりやすくするために、アプリに使用しているコードのサンプルを次に示します。

..。

ご覧のとおり、独自のデータを持つ1つのコンポーネントがあります。 どこにでも置けます。

もちろん、Next.jsパターンは問題なく使用できますが、私の場合は、後で保守とリファクタリングを容易にするために、データとコンポーネントを可能な限り分離することをお勧めします。

@ revskill10子にデータフラグメントを宣言させてから、親にそのフラグメントをトップレベルのクエリに含めることができないのはなぜですか? 特に、子に関連付けられたフラグメントをさらに作成すると、完全なデータ分離が可能になります。 子フラグメントを使用して親クエリを作成することは、その子をJSXで宣言することと同じです。したがって、同じレベルの結合を使用できますが、リクエストのウォーターフォールは回避できます(残念ながら、RESTでははるかに困難です)。

Relay-Nextアプリがあり、このパターンはデータのカプセル化と再利用可能な構成で完全に機能し、 getInitialPropsを簡単に活用できます。

@merrywhether much harder in RESTについては言うまでもなく、あなたのアプローチには、どのfragmentsがSSG / SSRになるかCSRになるかを決定できないという問題があります。
私のアプローチでは、そのコンポーネントを{ noSSR: true/false}インポートするのと同じくらい簡単です。

基盤となる実装を主要なルーティングライブラリと共有していないベンダー固有のルーティングライブラリへのロックインは、非常に懸念されます。

最近、Next.jsをレビューして、現在のクライアント用に構築されている多数のフロントエンドアプリケーション間で共有される共通コアのベースとして使用する必要があるかどうかを評価しました。 Next.jsには可能性がありますが、 このルーターは、私がNext.jsを拒否し、代わりにCRAをこれらのアプリケーションのベースとして維持することになった主な理由の1つです。

コンポーネントベースのトップレベルAPIであるreact-router / @reach/routerをSSRのベースとして使用することの難しさを理解しています。 しかし、それは、基礎となる実装が完全にカスタムである理由ではありません。 GatsbyのSSGには、Next.jsと同じ懸念があり、半類似のファイルベースのルーティング構造があります。 しかし、私の理解では、Gatsbyは、車輪の再発明や他のライブラリで使用されているLinkAPIと一致しないLinkAPIを公開する代わりに、内部で@reach/router使用してルーティング実装を強化しています。

@dantmanは、Next.jsの代替として何を選択したかを尋ねることができます。 サーバーサイドレンダリングが必要だと仮定して....私はAfter.jsを試してきましたが、zeitでサポートされていない場合は、Next.jsに実装するためのインスピレーション/アイデアを提供できるかもしれません。

@dantmanは、Next.jsの代替として何を選択したかを尋ねることができます。 サーバーサイドレンダリングが必要だと仮定して....私はAfter.jsを試してきましたが、zeitでサポートされていない場合は、Next.jsに実装するためのインスピレーション/アイデアを提供できるかもしれません。

申し訳ありませんが、役立つ回答がありません。 SSRは難しい要件ではなかったので、プロトタイプが作成されたCRAを使い続けました。

Next.jsは、最近SSR / SSG /クライアントのみのページを組み合わせることができるようになり、同形アプリまたは静的/ PWAアプリとして実行できるようになったため、ユニバーサルフレームワークとして有望だと思いました。 CRAがglobalize-compilerの使用を困難にしているため、WebPackのカスタマイズは魅力的でした。 とにかくGraphQL / RESTブリッジ用のAPIサーバーが必要だったため、Next.jsサーバーはニュートラル/ポジティブでした。 そして、SSR / SSGのオプションは、半ダースのアプリケーションがベースとなるコアを構築しているので前向きであり、将来的に役立つ可能性があることは不可能ではありません。 ただし、Next.jsのSSRの動作方法にもいくつか問題があり、これらの利点はルーターによって引き起こされる問題の価値がありませんでした。

@dantman

基盤となる実装を主要なルーティングライブラリと共有していないベンダー固有のルーティングライブラリへのロックインは、非常に懸念されます。

オープンソースコンポーネントを、その優れた安定性と「ロックイン」としての「製品/市場適合性」のために3年間変更されていないAPIで認定することは非常に奇妙です。

Next.jsは成功し、ルーターのおかげで成長を見せ続けてい

多くの人が私がTwitterでコメントしているのを見てきたように、かつて私たちはいくつかのルーターを真剣にマージすることを楽しんでいました(ただし、どちらが標準であるか、ReachまたはReact Routerで、どのメジャーバージョンであるかについては混乱しています)。 しかし、世界は私たちを他の興味深い方向に引き寄せました。 実際には、誰もがNext.jsで成功し、素晴らしい製品を構築し続けていたため、それを追加することのポイントが何であるかさえわかりませんでした。

私が実際に人々に別のルーターAPIが必要な理由を尋ねるとき、最も頻繁に出てくる理由は、人々がルーター上に構築された自家製のフレームワークソリューションに行き詰まり、イライラしていて、Nextへの移行を待つことができなかったためです。 それは製品デザインに根ざした理由ではありませんでした。

Nextがルーターのおかげで成功したと言うとき、それは2つの問題を排除したからです。
1️⃣ルーターを選択する必要があるという考え。 これを削除することは、振り返ってみると優れた決定です。 安定したルーターを備えたNext.jsが存在する間、ルーターの世界は分裂し、あらゆる種類のAPIの変更を開始しました

2️⃣ルーターの学習曲線。 ルーティングについては多くのワークショップやチュートリアルが用意されていますが、Next.jsファイルシステム-最初のルーティングは2秒の説明で、素晴らしいものを構築するためのプラットフォームを提供し、製品開発にすぐに移行できます。

この最後の点を強調したいと思います。 Next.js上に構築された世界で最も新しく最も急速に成長しているWebサイトの1つであるTikTok.comを考えてみてください。 そのWebサイトのルーティングトポロジ全体は、その2秒の学習曲線で説明できます。 https://www.tiktok.com/@sheezus.christ/video/6824007862197439750pages/[user]/video/[id].jshttps://www.tiktok.com/trendingpages/trending.js

ハイブリッドスタティック/ SSG / SSRなど、最近のNext.jsのイノベーションの多くは、ルーターの設計によっても実現されています。 実際、ルーターは、クライアントに提供するJSを減らすために、将来的に行われる他の多くの同様の最適化も可能にします。

ただし、Next.jsのSSRの動作方法にもいくつか問題があり、これらの利点はルーターによって引き起こされる問題の価値がありませんでした。

これらについて聞きたいです。 上記の例は、Next.jsハイブリッド静的/ SSRを利用しており、全面的に多くの成功を収めています。

これはとても面白いスレッドです。 Nextには、ウォーターフォールルーティング(別名react-routerとその仲間)を回避する具体的な理由があります。 getInitialPropsは多くのパフォーマンスの最適化を可能にし、特に一部の人々が特にそれらの最適化を望んでいるため、Nextのアプローチは非常に人気があります。 パフォーマンスには設計上のトレードオフが伴います。パフォーマンスよりも設計を選択したい場合もありますが、それでもツールが間違っているわけではなく、特定のプロジェクトにとっては間違っています。

結局のところ、react-routerはルーティングソリューションのすべてではありません。 Nextと同様に、長所と短所があります。 FWIW、Facebookはreact-routerを使用しておらず、おそらくReactの使用について1つか2つ知っています。 したがって、代替手段があることは問題ありません。実際、JSエコシステムの優れた点の1つは、アイデアの分野でさまざまなものを競わせ、最終的には全員が前進することです。

問題を解決しているので、ルーティング機能に関するコメント、機能のリクエスト、バグレポートを常に受け​​付けていることを明確にしておきたいと思います。

理想的には、それらは製品主導型です(「Xを実行する必要がありますが、それは不可能です」または「Yは可能ですが、人間工学的ではありません」)。 私たちは常に、優れたユーザーエクスペリエンスを備えた無駄のないウェブサイトやアプリケーションを作成するのに役立つ改善点を探しています🤗

@rauchgリンクhrefas 2つの小道具がある理由を説明できますか? as小道具の値に基づいて目的のページを推測できないのはなぜですか?

たとえば、エクスプレスで/blog/:slugルートがある場合、httpリクエストを/blog/hello-world送信して、ルーターがそれにルーティングすることを期待できます。 /blog/:slugblog/hello-world両方をサーバーに送信する必要はありません。

@ avin-kavishそれは素晴らしい質問です。 URLに表示される内容と読み込まれるページには、重要な違いがあります。 実際のところ、TikTokはそれを使用して特定のものをモーダルでレンダリングし、ページを更新すると他のページになります。 ただし、ここでの大きな改善点の1つは、ファイルシステムに存在する有効なページを参照していることを静的に強制する必要があることです。 これに関するディスカッションを作成してフォローアップし、タグを付けます。

そのhttps://github.com/zeit/next.js/issues/8207にはすでに問題があると思い

誰かがこの問題を「ネストされたルート」機能のようなreact-routerで見た場合、私のようにすべてを再レンダリングせずに新しいページに移動できます。実際には、見たり投票したりできる専用の問題があります。 私はちょうどそれについて知りました: https

@rauchg

私の主な問題は、RR /リーチスタイルコンポーネントAPIの欠如ではありません。この中で明確にするために、私はSSRできるファイル/ configに基づいたAPIで元気です。 私は少し楽観的ですが、将来的にサスペンスが代替のSSR /ルーティングAPIを実行可能にする可能性があると考えています。 私の主な問題は、ルーターが完全にカスタム化されており、実装の一般的な懸念事項が、より広いReactコミュニティの一部と共有されるのではなく、再実装されることです。

ギャツビーのアプローチは受け入れられると思います。 SSG対応のファイル+構成ベースのルーティングAPIがあり、独自の拡張リンクコンポーネントをエクスポートします。 ただし、基礎となる実装を強化するために@reach/routerを使用します。

基盤となる実装を主要なルーティングライブラリと共有していないベンダー固有のルーティングライブラリへのロックインは、非常に懸念されます。

オープンソースコンポーネントを、その優れた安定性と「ロックイン」としての「製品/市場適合性」のために3年間変更されていないAPIで認定することは非常に奇妙です。

ルーターは本質的にNext.jsに関連付けられています。 1つの理由でNext.jsを採用することは、ルーターに縛られることを意味します。 Next.jsを採用し、後でnext / routerに制限があり、それが私たちがやろうとしていることを台無しにしていることが判明した場合、合理的なエスケープハッチはまったくありません。 「ロックイン」は、そのための完全に優れた記述子です。

ロックインだけでは大きな問題にはなりません。 ギャツビーによる@reach/routerの使用もロックインになります。 しかし、 @reach/routerはギャツビー以外で使用されています。 ルータースタック全体を維持するために、Gatsbyコミュニティだけを信頼する必要はありません。 より大きなコミュニティがそれに依存し、より多くの利害関係者(ルーティングスタックに固有)が関与して、それが維持され、困難なルーティングの問題(アクセシビリティなど)に対応し、より多様で多様なコミュニティに依存していることを信頼できます。将来遭遇する可能性のある潜在的に壊滅的な問題を共有する可能性があります。

どちらがあなたの頭の中で標準であるか、ReachまたはReact Router、そしてどのメジャーバージョンであるかについて私は混乱していますが

<Link>がどのように見えるべきかという事実上の標準に関して。 ReachとReactRouter(RR)はどちらも非常によく似たAPIを共有しています。 たとえば、 <Link to='/about'>About</Link>は、RRとReachの両方で有効です(もちろん、拡張Gatsbyによって)。 これにより、Next.jsの特異な<Link href='/about'><a>About</a></Link>非常に不快になります。

Next.jsが使用すべきだと思うものに関して。 私は特定のライブラリに縛られていません。Next.jsがすでにライブラリを使用している場合は、別のライブラリに切り替えることはお勧めしません。 私の主な懸念は、ルーティングの実装がNext.jsの外部のより広いコミュニティを持つライブラリと共有されることです。

実際には、それは比較的議論の余地があります。 これまでのところ、RRとReach以外に大規模なユーザーベースのReactルーターは見たことがありません。 また、RRとReachは1つのライブラリになるため、どちらから始めても最終結果は同じになります。

しばらく前にNextを試しましたが、ルーターに柔軟性がないため、After.jshttps //github.com/jaredpalmer/after.js = hashnode.comというRazzleの実装を発見しました

React Routerは単なるパッケージなので、インポートしてクライアント側にのみレンダリングを制限することはできません。そのため、必要に応じてSPAのように機能し、ネストされたコンポーネントルートを提供しますか? Reactルーターは、他のコンポーネントと同じように、ページに(潜在的に)埋め込まれ、Next.jsページルーターで読み込まれるコンポーネントのセットにすぎませんか?

以前のスレッドで、zeitがRRを統合する計画があることを読みましたが、それは今日でも当てはまりますか?

最後の手段としてnext.jsルーターでネストされたルートを許可し、これらの領域が事前にレンダリングされないことを明確にしないのはなぜですか。 少なくとも、ページ内のサブリソースをルートに基づいて変更する場合に必然的に書き込む必要があるif条件を書き込まないようにする手間を省くことができます。

この問題に投票を追加します。

言及されていない別の利点は、RRがよりテスト可能であり(AFAIKにはルーターテスト用の公式のnextjs APIがない)、テストとストーリーをラップするためのMemoryRouterがあることです。

Next.jsには、多くの優れた機能(自動WebPack、静的ファイル、CRAのようなTypeScriptがありますが、PWA、APIルート、サーバーレスサポート、高速更新、さらにはWeb +ネイティブアプリの実験的なExpoサポート)とコアがあります。 SSRとSSGの場合、APIが優れていなくても。 ただし、組み込みのルーティングシステムとSSR / SSGが機能するものもあります。 他の人にとっては、両方のAPIの制限が、前述のプロジェクトに対して誤ったトレードオフを提供するため、開発を妨げます。

妥協はどうですか。 Next.jsにはすでにプラグインがあります。 ルーターを内部で置き換える代わりに、ルーターとSSR API(つまり、ルートファイルのgetStaticProps / getServerSideProps )をNext.jsのコアから分離した場合はどうなりますか。 たとえば、非常に基本的なコアパーツを@next/coreて、現在の意見のあるルーターとget*Props APIを@next/routerます。 単純さと下位互換性のために、 nextは、 @next/coreを再エクスポートし、Vercelの優先ルーターで事前構成されたフレームワークにすることができます。 しかし、コミュニティがルーターとSSR / SSG APIをさまざまなトレードオフで開発することは可能です。これらのトレードオフは、Next.jsの良い部分をお風呂の水で捨てて行き詰まるプロジェクトに適しています。

Next.jsコアが提供するルータープラグインに必要なものについてのいくつかの考え:

  • リクエスト{url、bodyなど}が与えられると、コアはルータープラグインがこのリクエストをドキュメント(文字列またはストリーミング)にレンダリングするか、レスポンス(つまり、404またはリダイレクト)をスローすることを期待します。
  • エクスポート時に、コアはルータープラグインがレンダリングする必要のあるページのリストを提供することを期待します。

@next/routerは、次のようなことを行うことで、APIを介して同じパターンを実装する可能性があります。

  • リクエストがあった場合、責任のあるルートファイルを特定し、通常どおりにレンダリングします
  • SSR APIを呼び出して必要なルートをレンダリングするタイミングを知るために、現在行っていることと同様のことを行うクライアントで(APIベースのSSR APIを通常の外観のAPIルートに移動する可能性があります)
  • ページファイルツリーとgetStaticPathsを使用してエクスポートすると、静的ページのリストが提供されます

おそらく、React Router v6を@apollo/react-ssr 、Suspenseをreact-ssr-prepassまたはreact@experimental使用してルータープラグインを実験しているのを見ることができます。 これは、同形SSRルートのSSRのみのルートを放棄し、 get*PropsスタイルのAPIを制限せずにSSR / SSGを実装します。

私が気付いたのは、ネストされたルーティング+ SSGは、現在のAPIを壊すことなく実現できるということです。 したがって、現時点ではgetStaticPathsがあり、これを使用して、事前レンダリングのためにネストされたルートをヒントにすることができます。 例えば、

ルート/foo/[...slug]与えられた場合、

function FooPage() {

  return (
      <Switch>
          <Route path="/foo/bar">
              <SomeResource />
              <Route path={`${parenthPath}/baz`} component={SomeSubResource} />
          </Route>
          .... more routes
      </Switch>
  )
}

で事前レンダリングできます、

export async function getStaticPaths() {

  return {
    paths: [
      { slug: [ 'bar' ] },
      { slug: [ 'bar', 'baz' ] },
    ],
  }
}

現在のところ、next.jsはサーバーサイドフレームワークのようなもので、reactでページを作成するのに便利です。 react-routerほど強力ではありません。 ディレクトリベースのルーティングは、前述のようにtiktokのような消費者向けサイトの構築に適している場合がありますが、複雑なデータ駆動型アプリケーションポータルの場合、ネストされたルーティングが依然として重要です。 そもそもシングルページアプリケーションが作成されたのはそのためです。ページ全体を置き換えることなく、UIの一部を変更できます。 これを活用して、リソースとサブリソースの関係を非常に便利にモデル化できます。 現状では、eコマースサイトのような消費者サイトの公開ページを作成する場合はnext.js使用できますが、管理者、購入者、販売者のポータルなどのプライベートエリアを作成する必要がある場合はCRAに切り替えます。

@ avin-kavishの主な問題は、それを機能させることではなく、最適化することです。Next.jsのデフォルトの各ページには独自のバンドルがあり、速度が最適化されています。

あなたがしたように単一のページにたくさんのコンテンツ/サブコンテンツを追加し始めると、最終的にはかなり大きなバンドルになる可能性があります(それ自体は「ひどい」ではありませんが、注意する必要がありますトレードオフ)。 next/dynamic考えで手動最適化を行うことができるかもしれません:)

@rauchg唯一の側面は、次のルーターが良いか悪いかではありません。 もう1つの非常に重要なことは、next.jsとコミュニティサポートとの間の移行です。https: //github.com/vercel/next.js/issues/1632#issuecomment-633310614はそれをうまく表現しています。 Next.jsは、高品質のSSRアプリが必要とする多くの定型文を抽象化するための優れたソリューションであるため、多くのWebアプリにとって非常に魅力的な移行ターゲットです。 現在の問題は、next.jsに移行するためと、必要に応じてそこから移行するための両方で、完全なルーティングの書き換えが必要になることです。

@dantmanが以前に提案したプラグ可能なルーティングは、この問題を非常にエレガントな問題で解決し、誰もが原則を販売する必要はありません😉

react-router(およびネストされたルーティングソリューション)の問題は、特定のURLに関連するコードパスがコード自体を実行(またはシミュレーション)しないと利用できないため、静的分析がはるかに困難になることです。 次は、単なる「WebページにUIを配置する」フレームワークではありません。そのため、たとえば、Chromeチームと協力して、より高度に最適化されたバンドル戦略を作成しました。

react-routerユーザーは、その責任を完全にエンドユーザーに委任するため、react-loadableを直接使用することに慣れていますが、Nextはこれを抽象化して自動化しようとしますが、これは簡単ではありません。 提案されたプラグイン可能なルーターアプローチでは、同じタイプの出力を実現するために、フレームワークに広範なビルド時情報を提供するルータープラグインを使用する必要があります。これは、すべてのルーターが独自のパターンに基づいてそのような情報を生成する方法を知っている必要があるためです。

純粋に推測ですが、ReactがSuspenseを終了する間、多くのことが途方に暮れていると思います。ライブラリのファーストクラスのパターンを作成すると、すべてのルーターライブラリに大きな影響を与え、非同期/ロード可能を構築するための具体的な基盤を提供するからです。バンドルパターン。

短編小説/以下の良い要約:「ワンサイズですべてのソリューションに対応」などというものはありません。 すべてにトレードオフがあります。 Next.jsが現在行っている方法のすべての「利点」には、欠点があります。 最も重要な長所/短所は、プロジェクトごとに異なるものです。 したがって、プラグ可能なルーター/ ssg / ssrアーキテクチャの推奨事項です。 プロジェクトごとに必要なものは異なります。現在、Next.jsは、トレードオフの優先順位がNext.jsでのハードコーディング方法と一致しているプロジェクトに対してのみ機能します。

react-router(およびネストされたルーティングソリューション)の問題は、特定のURLに関連するコードパスがコード自体を実行(またはシミュレーション)しないと利用できないため、静的分析がはるかに困難になることです。

正直なところ、これはSSGを使用していて、動的でないルートがたくさんある場合にのみ重要です。 すべてのルートがSSGまたはクライアントのみの場合、それは役に立ちません。 また、ほとんどのルートが動的である場合は、とにかくgetStaticPathsを使用して明示的に宣言する必要があります。 これは、変更せずに生のreact-routerを使用し、静的ルートを明示的に定義するように要求する、架空のNext.jsプラグインでルートを明示的に定義するのと同じ量の作業になります。

それは確かに利点であり、一部のチームはそれを望んでいます。 ただし、これは潜在的なNext.jsユーザーの1つのサブグループにすぎません。 RRまたは別のルーティングライブラリが提供する利点のいくつかを必要とする可能性のある他のグループがあり、静的ルートを明示的に宣言する必要性は、許容できるトレードオフまたは問題ではありません。 たとえば、私の最後のいくつかのプロジェクトは、100%のものがログインページの背後にあり、静的にレンダリングする意味がない種類のB2B / B2Cアプリでした。 Next.jsには、CRAに比べて、Next.jsが望ましいと思われるいくつかの利点があります。 しかし、ルーターのようなものは大きな危険信号であり、私たちはCRAを使い続けました。 これらのプロジェクトは、生のreact-routerを使用するNext.jsに非常に適していたでしょう。

これは、 next/router望まないすべての人がJSX形式のreact-routerを使用したいとも想定しています。 next/router選択肢はこれだけではありません。

もう1つのタイプのルーターは、Gatsby.jsスタイルです。 プロジェクトがまだファイルシステムベースのページ構造を使用しているが、内部はreact-routerのような別のルーティングライブラリで実装されている場合(Gatsbyは内部で@reach/router使用します)。 この種のルータープラグインは、同じ静的分析の利点を提供します。 ただし、代替ルーターがネストされたルーティングに関連していない利点もあります。 たとえば、ルートAPIの潜在的な設定への対応、アクセシビリティのより適切な処理、そのルーター周辺のエコシステムへのより適切な統合。

そしてもちろん、react-routerエコシステム内でも、JSXフォームがreact-routerを使用する唯一の方法ではありません。 react-router-configもあり

react-routerユーザーは、その責任を完全にエンドユーザーに委任するため、react-loadableを直接使用することに慣れていますが、Nextはこれを抽象化して自動化しようとしますが、これは簡単ではありません。

そして、私たちの何人かは、自分たちでコード分割を処理することに問題はありません。 ネストされたルーティングは、自動コード分割よりもプロジェクトにとって重要な場合があります。 どのトレードオフがプロジェクトに最も適しているかがすべてです。

これは余談ですが、ルートに対してこれを自動的に行うbabel / webpackプラグインの可能性について実際に興味があります。

また、react-loadableは、事実上機能しなくなったライブラリです(公開から2年、バグレポートは受け付けていません)。 個人的には、react-loadableの内部フォークに基づいてNext.jsに自動的に組み込まれているものを使用するよりも、 @loadable/componentsを使用して手動でコード分割を行いたいと思います。

提案されたプラグイン可能なルーターアプローチでは、同じタイプの出力を実現するために、フレームワークに広範なビルド時情報を提供するルータープラグインを使用する必要があります。これは、すべてのルーターが独自のパターンに基づいてそのような情報を生成する方法を知っている必要があるためです。

うん。 これが一般的にプラグインシステムの仕組みです。 正直なところ、この種の情報をプラグインで提供できるという事実は、問題ではなく利点です。 これをプラグインに含めることは、Next.jsがこの情報を収集する方法が一部のタイプのプロジェクトのニーズに適していない場合、それらのプロジェクトのニーズに適合するものに置き換えることができることを意味します。 しかし、そうするためにすべてのNext.jsをフォークして書き直す必要はありません。

純粋に推測ですが、ReactがSuspenseを終了する間、多くのことが途方に暮れていると思います。ライブラリのファーストクラスのパターンを作成すると、すべてのルーターライブラリに大きな影響を与え、非同期/ロード可能を構築するための具体的な基盤を提供するからです。バンドルパターン。

これ自体は、実際には、プラグ可能なルーターシステムで機能するためのかなり良い議論になる可能性があります。 すべてのルーティングおよびSSRものがNext.jsにハードコードされているため、今のところは簡単にNext.js.以内に将来のルーティングシステムのいずれかのタイプに実験を行うことはできません SuspenseはNext.jsのルーティングやその他のルーティングライブラリにどのように影響しますか? Next.jsのチャンクをフォークして書き直さずに、(少なくともNext.jsのSSRとバンドルに関して)実験できるものではありません。

ルータープラグインは、この種の実験を行うのに最適な場所です。 プラグインAPIが十分に低レベルである限り、 next/routerプラグインだけをフォークreact @ experimental + Suspenseベースのバージョンを作成してみることができます。 また、これはプラグイン(Next.jsのすべてのフォークではない)であるため、実験にオプトインして、新しいSuspenseベースのルーターをテストするのは簡単です。 この種の実験が実際のプロジェクトからフィードバックを収集するためにreact @ experimentalが存在する理由であるため、これは後でではなく今重要です。

@dantman私はあなたが言ったことに同意しません。 それはすべてトレードオフに関するものです。 最大のトレードオフは、次のチームが時間を費やすことです。 これまでのところ、低構成の高性能SSRが主な焦点であったようです。 これが必ずしもすべてのユーザーに関係するわけではないことは理解していますが、これはNextが最初に目立つように使用された角度です(これが、職場でそれらを選択する理由です)。 彼らは最近、ギャツビーとジャムスタックの人気のせいで、SSGをさらに掘り下げましたが、それでもSSRimoには最適です。

正直なところ、これはSSGを使用していて、動的でないルートがたくさんある場合にのみ重要です。

SSGとSSRは、最初のページ(「クリティカルパス」JS)に可能な限り最小のJSペイロードを配信しようとしても、動的ルートも重要ではないため、これが何を意味するのかわかりません。 クリティカルパスアセットを最小化することは、SSRアプリにとって一般的に非常に重要であるため(したがってすべての努力)、これは高く評価されています。 そして正直なところ、作成しているのがログインウォールのCSR専用アプリだけである場合、NextにはCRAと比較して多くの欠点があります(SSRはCSRほど便利ではありません)。 特にパフォーマンスの勝利のために、実際にランタイムSSR(ログイン/パーソナライズのサーバー側処理を使用)を実行しているアプリを割り引いているようです。 すべてがSSGとCSRの二分法に適合するわけではありません。

私たちの何人かは、自分でコード分割を処理することに問題はありません

私たちの中には、webpack、react-dom / serverなどを自分で処理する能力が非常に高い人もいます。 Nextのこれまでの目標は、CRAのように、そのような排出をますます希少にすることであるように思われました。 そのスペースには多くのソリューションがあり、Relayなどのライブラリからの新しいデータとコードのパターンでよりエキゾチックになっているだけなので、react-loadable-alikeと言うべきでした。

結局のところ、私はプラグ可能なルーターシステムが良いかもしれないことに同意しません。 次のチームがフレームワークの中心的な信条であるもの(バンドル分割ロジックなど)を削除し、それらをプラグ可能なアーキテクチャに抽出するのは大変な作業になると指摘していました。 そして、私の推測は、私のコア依存関係への今後の変更によって簡単に覆される可能性のある、ライブラリへの基本的な変更の設計を開始したくないという事実を強調していました。 Nextの設計のいくつかの側面が制限されていることには確かに同意しますが、これまでの設計上の制約を考えると、ほとんどの場合、これらの制限は理にかなっています。

正直なところ、これはSSGを使用していて、動的でないルートがたくさんある場合にのみ重要です。

SSGとSSRは、最初のページ(「クリティカルパス」JS)に可能な限り最小のJSペイロードを配信しようとしても、動的ルートも重要ではないため、これが何を意味するのかわかりません。

存在するルートを静的に分析する機能が必要な理由はさまざまだと考えています。 両方とも「静的分析」を「コードを読むだけでビルド時にルートのリスト(例: ['/about', '/', '/profile'] )を識別する機能」として話していると仮定します。

ある種のJSバンドル最適化について話しているようですね。 ドキュメントに情報が見つからないため、静的ルート分析に基づいてどのような種類の最適化を検討しているのか正確にはわかりません。

私の考えでは、このルートの静的分析は主にSSGに役立ちました。 つまり、サイトの構築時にpages/about.jsファイルが存在するため、Next.jsは、 /aboutルートが存在することを認識しており、明示的に指示していなくても、このルートのhtmlを事前にレンダリングする必要があります。事前レンダリングへの/aboutルートがあります。

SSRは、リクエストが届いたときにのみHTMLを作成するため、事前に作成されたhtmlは必要ありません(その時点でコードが実行され、レンダリングするパスが1つあります)。 クライアントでレンダリングされたページには、事前にレンダリングされたhtmlがまったくありません。 また、SSGページが動的である場合は、とにかくすべてのパスを宣言する必要があります。 したがって、私の考え。

そして正直なところ、作成しているのがログインウォールのCSR専用アプリだけである場合、NextにはCRAと比較して多くの欠点があります(SSRはCSRほど便利ではありません)。

Next.jsでCSRアプリに関してどのような欠点を考えていますか? 前述のルーターの問題は別として。

私の理解では、Next.jsはSSR / SSG / CSRルートの全範囲をサポートしています。 したがって、ログインで壁に囲まれたCSR専用アプリの作成にはまだ適していると思われます。

個人的には、私の視点は間違いなく、SSRとSSGのニーズが時折あり、すべてのプロジェクトに単一の堅牢なツールキットを必要とし、必要なSSR / SSG / CSRの組み合わせを問わず、多くのCSRアプリを作成している人からのものです。

私の経験から、CRAには、Next.jsのCSRページを有利にする可能性のあるCSRのみのアプリ内でもかなりの数の欠点があります。 イジェクトなしのWebPack構成のカスタマイズは大きなものです。 これは、i18nをアプリに追加するときにglobalize-compiler WebPackプラグインを単純に使用できなかったときに、多くの苦痛を引き起こしました。 ほとんどのページがCSRである場合でも、特定のページでSSR / SSGにオプトインできることも利点です(たとえば、ページの99.9%がCSRであり、ログインページの背後にありますが、ランディングページがあり、条件/連絡先がある場合があります) SSGまたはSSRが必要なページ)。 CRAのようなものではそれらのことを合理的に行うことはできません。

私たちの何人かは、自分でコード分割を処理することに問題はありません

私たちの中には、webpack、react-dom / serverなどを自分で処理する能力が非常に高い人もいます。 Nextのこれまでの目標は、CRAのように、そのような排出をますます少なくすることであるように思われました。

正直なところ、ルートベースのコード分割を手動で行う(直接インポートではなく、React.lazyまたは代替ライブラリを介してルートコンポーネントを使用するように変更することを確認してください)は、カスタムWebPack構成を手動で管理したり作成したりすることからはほど遠い方法です。 react-dom/serverした独自のSSRハンドラー。

WebPack構成全体またはカスタムSSRサーバーを手動で記述したくない(つまり、Next.jsのような広く使用されているフレームワークを使用したい)が、react-routerを使用してルートベースのコードを手動で実行することは問題ありません-分割。 特に、自動ルートベースコード分割をオプトインすると、使用している広く使用されているルーターライブラリが失われ、ルーターを使用すると、広く使用されているどのルーターとも大きく異なるAPIで必要になる可能性のある多くの機能が失われます。

react-routerをカスタムサーバーを作成する必要のないNextJSと統合する方法を探しているとき、私はいつもこの問題に遭遇するので、自分で試してみることにしました。

react-router v6(ベータ版)を使用して、カスタム_app作成します。

// _app.js || _app.tsx
import * as React from 'react'
import App from 'next/app'
import NextRouter from 'next/router'

export default class CustomApp extends App {
    render() {
        const { Component, pageProps } = this.props

        if (process.browser) {
            const { Router } = require('react-router-dom')
            const { createMemoryHistory } = require('history')
            const history = createMemoryHistory({
                initialEntries: [this.props.router.asPath],
            })

            history.listen(function ({ action, location }) {
                const url = {
                    hash: location.hash,
                    pathname: location.pathname,
                    search: location.search,
                }
                switch (action) {
                    case 'PUSH':
                        return NextRouter.push(url)
                    case 'REPLACE':
                        return NextRouter.replace(url)
                    default:
                        return void 0
                }
            })

            return (
                <Router location={history.location} navigator={history} action={history.action}>
                    <Component {...pageProps} />
                </Router>
            )
        } else {
            const { StaticRouter } = require('react-router-dom/server')
            return (
                <StaticRouter location={this.props.router.asPath}>
                    <Component {...pageProps} />
                </StaticRouter>
            )
        }
    }
}

なぜ

NextJSで_オプションですべてのルートをキャッチ_を管理するのは簡単ではないので(例: /foo/[[...bar]].js )、この種のページにreact-routerを使用できる方法を模索しています。 他にもさまざまな理由があるかもしれませんが、それが私の主な関心事であり、 react-routerは、特に現在ベータ版であるv6で優れたAPIを提供します。

使い方

それはちょうど、カスタム作成MemoryRouterの代わりにBrowserRouter私たちはルータルータ&NextJS NextJSを持つことにより、ブラウザの履歴まで混乱しないように。 PUSHREPLACEのメモリ履歴の変更をリッスンするので、 react-routerフックまたはLinkを使用してナビゲートできますが、内部では次のようになります。 NextJSルーターメソッド.pushおよび.replace呼び出します。

NextJSルーターメソッドを呼び出す必要があります。そうしないと、ルートの変更によってNextJS get*Propsメソッドが実際にトリガーされません。 つまり、NextJS Linkを使用したshallowオプションと同様に機能します。 react-routerLinkを使用することの欠点は、 prefetchがないことです。 ただし、代わりにNextJS Link使用することもでき、 react-routerはルートの変更に対応できます。

これのすばらしい点は、NextJS dynamicおよびreact-routerルートを活用して、次のようなことを実行できることです。

// /foo/[[...bar]].js
import * as React from 'react'
import { Route, Routes } from 'react-router-dom'
import dynamic from 'next/dynamic'

const Home = dynamic(() => import('src/views/Home'))
const About = dynamic(() => import('src/views/About'))
const Navigation = dynamic(() => import('src/views/Navigation'))

export default function Root() {
    return (
        <>
            <Navigation />
            <Routes>
                <Route path="/foo/" element={<Home />} />
                <Route path="/foo/about" element={<About />} />
            </Routes>
        </>
    )
}

とにかく、これが誰かに役立つことを願っています。 私はこれを本番環境で使用したことがなく、このコードは私が持っている地元の遊び場からのものなので、おそらく改善できることがありますが、それは始まりです。

Next.js9.5以降でのReactルーターの使用

あなたがNext.js 9.5以降を使用している場合、これを行うための正しい方法はである書き換え。 _カスタムサーバーを使用しないでください_! これを行う方法の詳細なチュートリアルがここにあります: https

基本的な考え方:

  1. カスタムアプリを作成する( /pages/_app.tsx

  2. 戻るnull場合typeof window === "undefined" 。 これは、react-routerがSSRステップ中にエラーをスローしないようにするために必要です。

// pages/_app.tsx

import { AppProps } from 'next/app';

function App({ Component, pageProps }: AppProps) {
  return (
    <div suppressHydrationWarning>
      {typeof window === 'undefined' ? null : <Component {...pageProps} />}
    </div>
  );
}

export default App;

suppressHydrationWarning属性は、サーバーでレンダリングされたコンテンツがクライアントでレンダリングされたコンテンツと一致しない場合にReactがスローする警告を防ぐためのものです。

  1. ホームページへのすべてのルートを書き換えます
// next.config.js

module.exports = {
  async rewrites() {
    return [
      // Rewrite everything else to use `pages/index`
      {
        source: '/:path*',
        destination: '/',
      },
    ];
  },
};

その後、通常のようにReactルーターを使用できます! リンクされたチュートリアルにはさらに多くのコンテキスト/説明がありますが、これで開始できます。 https://vriad.com/essays/building-a-spa-with-nextjs

@colinhacks素晴らしいソリューションはそれが機能することを確認できます。 考えるべきことは、アプリをapp.jsやroutes.jsなどの独自のページに移動することです。 次に、

// next.config.js

module.exports = {
  async rewrites() {
    return [
      {
        source: '/app/:path*',
        destination: '/app',
      },
    ];
  },
};

考えてみれば、あなたの解決策は私が見つけた最高のものです。

このページは役に立ちましたか?
0 / 5 - 0 評価