次のレイアウトを行う方法.js

この記事はもともと私のウェブサイトに掲載されました.https://sampotter.me/tech/how-not-to-do-layouts-in-nextjs ]
次のレイアウトの処理.JSは奇妙なことです.
シンプルで永続的なレイアウトはbrilliant React framework . しかし、単一ページアプリケーション(SPA)の主な特徴です.それで、なぜ、次はそうしましたか.JSチームは、この重要なウェブ・ページを暗い角で基本的に隠しておくことに決めます?正直なところ、私は何の考えも持っていない.多分、彼らはそれが優先順位でないと思いました?または初心者の次の学習のためのエントリにいくつかのタイプの障壁.JS ?誰が知っている.
この記事は次のように述べます.

なぜ永続的なレイアウトが良いのか

コモンネクスト.JSレイアウトパターン

なぜそれらのパターンが動作しないのか

次に、いくつかの大きな解決策で素晴らしい記事を参照します.
私がここで解決をしていない理由は、私が必要としないからです.私は正直です、これはこの記事を書く際の私の2回目の試みです.私の最初の試みは無意味でした.「次のJSで永続的なレイアウトをする方法」と題されて、基本的に、あなたが一つのGoogle検索から見つけるすべてのポストの融合です.この問題の解決策は十分に文書化されている.なぜ問題が発生しますが、それはタッドより強迫的です.私も、問題の本当に徹底的な理解がうまくそれを解決することに関してあなたをうまくセットアップすると思います.

なぜ永続的なレイアウトが良いのか
どのような場合でも、永続的なレイアウトを意味するのですか?ほとんどのページには、いくつかの種類のレイアウトがあります.つまり、上部にナビゲーションバーがあるでしょう.すべてのページに共通のコンポーネントは、レイアウトの一部(この場合NavbarとFooterのような)で、通常レイアウトコンポーネントに抽象化されます.これは、開発者の生活を簡単に行うことができます.
では、永続ビットは何を意味しますか?これは、ユーザーが1つのページから次のページに移動する方法について懸念しています.ページレイアウトコンポーネントを再マウントすることは避けてください.そして、それが個々のページ内容を再マウントすることについて心配するだけです.
良いレイアウト持続性は感謝のない特徴です、レイアウトがページ航法の向こう側に固執しないとき、あなたはそれに気がつくだけです.あなたが見るかもしれない悪い永続性の最も一般的な例は以下の通りです.

サイドナビゲーションバーのスクロール位置を失う

ナビゲーションバーの検索入力がその値を失う

初期の“フェードイン”アニメーションの再実行理由なし

開発者はしばしばスクロール位置、アニメーション状態、および他の不要なものを決定しない複雑な状態ハンドラでこれらの問題と戦う.これらは通常、Webアプリケーションの機能を損なうことがない悪いUXの問題だけです.彼らは、サイトが実際には、Webアプリであるという感覚を奪い、すべての状態を失い、全体のページを実行する伝統的なウェブサイト上で彼らのように感じるようにユーザーを残して何かを行うたびに更新されます.
要するに、レイアウト持続性はユーザーのための「クリーナー」で、開発者のためにより保守的です.

動作しない一般的なアンチパターン
これらを通して読んでいる間、あなたがあなたがあなたの次で使っていたパターンを見るならば.JSアプリ、明らかにひどい開発者です.冗談です.私は私の次のいくつかの時点でそれらをすべて使用しているので、私はこれらの反パターンを知っている.jsジャーニー.

各ページコンポーネントでレイアウトを配置する

const AboutPage = () => (
  <Layout>
    <p>This is an about page.</p>
  </Layout>
);

export default AboutPage;

高次成分の使用

const withLayout = Component => props => (
  <Layout>
    <Component {...props} />
  </Layout>
);

const AboutPage = () => <p>This is an about page</p>;

export default withLayout(AboutPage);

デフォルトのエクスポート

const AboutPage = () => <p>This is an about page</p>;

export default (
  <Layout>
    <AboutPage />
  </Layout>
);

これらのパターンのどれもレイアウト持続性を作成しません.
問題は、それぞれの場合、ページコンポーネントファイル内の指定されたページのレイアウト責任を処理していることです.なぜこれが問題なのか説明しましょう.

なぜこれらのパターンが動作しないのか
この説明をアナロジーで始めさせてください.
あなたの各ファイルを考える/pages ディレクトリとしてディレクトリ.段ボール箱.あなた/about.js ファイルは箱です、そして、あなたもそうです/dashboard.js も.各箱のラベルは、最初のボックスのラベルは言うAbout そして、2番目のボックスのラベルは言うDashboard . 次.JSは、あなたがそれらのファイルの各々の中に書いたすべてのコードを取り、適切にラベルをつけられた箱にそれを置きます.
今、ユーザーが/about to /dashboard , 次.JSは、それがページを更新する必要があると反応します.基本的に、反応は各箱のラベルを見ますAbout ボックスは、新しく要求されたとそれを置き換えるDashboard ボックス.
反応は、箱の中にあるものを知りません、それは気にかけません.すべての反応は、各ボックスのラベルを見て、そのように新たに要求された1つを入れて周りに交換することです
ユーザーの準備をします.
どのように、これは我々のレイアウト持続性を破滅させますか?上記の3つのパターンの各々でよく、すべてのそれらの箱の内容は、A<Layout> コンポーネント.しかし、Responseが気にかけないので、レイアウトが最初の箱が捨てられて、スクロール位置を放棄して、方法に沿って入力値を削除して、新しい箱が適当になるので、すぐに再マウントされる前に、レイアウトはDOMからアンインストールされます.
今、私は反応の条件でこのバックを置くことができます.
我々が話していた各々の物理的な箱は、本当にちょうど成分です.そして、コードが包まれて、ボックスに投げられる代わりに、それはちょうどより大きいページ構成要素に入れられる子供コンポーネントです.一緒に置くすべてのコンポーネントは、コンポーネントツリーとして知られているものを作成します.
このプロセスはreconciliation , あるいは、「拡散」と呼ばれることもある.ユーザーがナビゲーションするときに、プロセス全体を実行しましょう/about to /dashboard .
ユーザーがページを見ている間、コンポーネントツリーは次のようになります.

// App component tree while looking at the About page
<App>
  <AboutPage>
    <Layout>
      <p>This is an about page</p>
    </Layout>
  </AboutPage>
<App>

次に.JSは、ページを更新するために反応します/dashboard , 反応は新しい木を構築する必要があります.このプロセスはrendering , この関数は、ルートコンポーネントを呼び出すApp() それが本質的に関数であるので、すべての後続の子要素を呼び出しても、次のようなことで終わります.

// App component tree for the newly requested Dashboard page
<App>
  <DashboardPage>
    <Layout>
      <p>This is a dashboard page</p>
    </Layout>
  </DashboardPage>
<App>

一度反応は2つのレンダリングツリーを持って、次に何が異なるかを決定する必要がありますので、それは我々のアプリに必要なものを更新することができます.これは和解ビット、「拡散」ビット、「ボックススワッピング」ビットです.ルートコンポーネントからの起動<App> ), 反応は木の下の道を横断します.そして、構成要素が道の各々のステップで異なるかどうかチェックします.一度反応が最初の違いになる<AboutPage> and <DashboardPage> コンポーネントは、全体をこすります<AboutPage> ツリーとそれをスワップ<DashboardPage> ツリーあなたは今どのように我々の<Layout> このドラマに巻き込まれる.Responseは、レイアウトコンポーネントを気にかけず、上記の2つのページコンポーネントをスワップします.
うまくいけば、私たちのレイアウトコンポーネントを永続化する解決はより明白になり始めています.レイアウトを破棄して再マウントするのを防ぐために、ページコンポーネントの外側に配置する必要があります.つまり、レイアウトコンポーネントの子であるページコンポーネントが必要です.このように:

// About page component tree
<App>
  <Layout>
    <AboutPage>
      <p>This is an about page</p>
    </AboutPage>
  </Layout>
</App>

// Dashboard component tree
<App>
  <Layout>
    <DashboardPage>
      <p>This is a dashboard page</p>
    </DashboardPage>
  </Layout>
</App>

我々の構成要素木がこのように設定されるならば、2つの木の間の遭遇を反応させる最初の違いはまだページ構成自体です、しかし、我々<Layout> もはや彼らのスワップでもつれてしまう.これが永続性を生み出すものです.

解決策
ここで、ページコンポーネントとレイアウトコンポーネントの順序を入れ替える必要があることをよく知っています.約束通り、私はこのトピックに関する私のお気に入りの記事にあなたを転送するつもりです、そして、あなたが必要とする唯一の記事.
Persistent Layout Patterns in Next.js - Adam Wathan
アダムはあなたにいくつかの大きな解決策を与えるだけでなく、彼は別の視点と問題がなぜ起こるの説明を提供します.あなたがまだ彼の記事を読んだ後にまだ混乱しているならば、私にTwitterまたは何かにDMを送ってください.どこで、あなたは私を見つけるでしょう.
それはそれです.任意のフィードバックをしている場合は、他の反パターンの提案、またはちょうどチャットしたい.また、私に自由に感じてください.
サム