[OZの製作所NINJA]appjs構造の変更

16005 ワード
project テキストリンク

構造を変更する理由


ログインレジストリを変更する時です.HeaderコンポーネントでコンソールをuseEffect(의존성 빈배열)に撮影し、ログインリダイレクトエラーをキャプチャしたことがありますが、ページが変更されるたびに常に撮影されます.
最初は再レンダリングされていたので、撮れると思いますが、よく考えてみるとuseEffect(依存性空配列)`が再レンダリングされるわけではありません.useEffect(의존성 빈배열)初回マウント時のみ撮影.ページごとにタイトルとツイッターを再インストールするのではなく、最初に_app.jsをロードしたときにタイトルツイッターをマウントし、マウントしません.
  • _app.js 
    •     <>
      <Head>
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
        />
        <style>{fontFace}</style>

        {/* Open Graph */}
        <meta property="og:type" content="website" />
        <meta property="og:title" content={title} />
        <meta property="og:description" content={description} />
        <meta property="og:url" content="https://ozjejakso.com" />
        <meta
          property="og:image"
          content="https://ozjejakso.com/image/ogImg.png"
        />

        {/* Twitter Card */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:site" content="@ozjejakso" />
        <meta name="twitter:creator" content="@ozjejakso" />
        <meta name="twitter:title" content={title} />
        <meta name="twitter:description" content={description} />
        <meta name="twitter:url" content="https://ozjejakso.com" />
        <meta
          name="twitter:image"
          content="https://ozjejakso.com/image/twitCardImg.png"
        />

        <title>{title}</title>
        <meta name="description" content={description} />
      </Head>
      <GlobalStyle />
      <ThemeProvider theme={Theme}>
        <Component {...pageProps} />
      </ThemeProvider>
    </>
    ページが変更されると、ページコンポーネントはpropsになります.コンポーネントから渡されます.console.logとしてマークしようとすると、commuty pageがパラメータとして渡されます.

    このような環境で渡された構成部品にヘッダーが含まれている場合、ヘッダーは実際に変更されていない場合でも再マウントされます.=>問題があると判断して最適化する

    ホットスポットの整理

  • ヘッダーとフッターに違いはありません.したがって、ページ変更のために再マウントする必要はありません.

    • 解決する


    方法1:AppLayoutに必要なpropsをサーバ側から返す


    辞書の知識

  • community Component
    • 次のgetStaticPropsの場合:ページをレンダリングするために必要なデータは、ユーザーが要求する前に構築時に使用できます.
    データはheadress CMSからインポートされます.
    データは公開キャッシュできます(ユーザー指定ではありません).
    ページは事前にレンダリング(SEO用)する必要があり、getStaticPropsは非常に速いです.CDNにキャッシュできるHTMLファイルとJSONファイルを生成し、パフォーマンスを向上させます.
    これにより、構築時に静的ページが生成されます.pageでのみ使用可能で、構築するgetStaticPropsに対して返されるpropsプリレンダリングページに基づいています.したがって、ページを非常に迅速に開くことができます.
  • getStaticProps
    • getServerSidePropsはいつ使用しますか?
    getServerSidePropsを使用する必要があります.ページを事前にレンダリングする必要があるのは、誰かのデータ要求時に抽出する必要がある場合だけです.TTFB(Time to First byte)は、getStaticPropsサーバがすべてのリクエストに対して結果を計算する必要があり、他の構成がなく、結果をCDNでキャッシュできないため、遅い.プリレンダリングデータが不要な場合は、クライアントからデータをインポートすることを考慮します.詳細については、ここをクリックしてください.
  • SEOヒント
    • たとえば、この方法はユーザーダッシュボードページに適用されます.ダッシュボードは専用ユーザー固有のページなのでSEOは関係なく、事前にページをレンダリングする必要もありません.getServerSidePropsSEOに適しています.構築時にリクエストしてクライアントに渡すため、より高速です.プリレンダリングが必要なデータがある場合はstatic propsを使用します(構築時に1回しか実行されないことを知っておく必要があります!)構築時に静的HTMLを実行して生成するため、クエリーパラメータやHTTPヘッダなどの要求時にのみ使用可能なデータは受信されません.getStaticPropsと一緒に使用します.
    📛 getStaticPath&getStaticPathはgetStaticPropsと一緒に使用できません.
    ▼▼開発モードでは要請を続けるが、生産モードでは一度だけ!(構築時)

    インプリメンテーション

  • 既存コード
    • import React from 'react';

import Component from '../components/aboutus';
import AppLayout from '../components/common/AppLayout';
import wrapper from '../store/configureStore';

const AboutUsPage = () => {
  return (
    <AppLayout focusText="About us">
      <Component />
    </AppLayout>
  );
};
  • 実装コード
    • 
import React from 'react';

import Component from '../components/aboutus';
import AppLayout from '../components/common/AppLayout';
import wrapper from '../store/configureStore';

const AboutUsPage = () => {
  return (
      <Component />
  );
};

export const getStaticProps = () => {
  return { props: { layoutProps: { focuseText: 'About us' } } };
};
export default AboutUsPage;
    getServerSidePropsでは、getStaticPropsに入る必要があるAppLayoutを予め返す.propsは、情報を変更する必要がなく、構築時にクラダンに一度情報を提供する必要があるため使用されています.
    次はappjsコード.
            <AppLayout {...pageProps.layoutProps}>
          <Component {...pageProps} />
        </AppLayout>
    すべてのページのgetStaticPropsから返される値は、getServerSideProps | getStaticPropsの_app.jsに転送されます.
    (オルブルーのように…??!)

    サスペンス

    pagePropsの_app.jsページコンポーネントの内部に包む必要があるかどうかは不明です.Layout,エクスポート時に囲む
    Layout包囲AppLayout
    ボイラープレートを調べたところ、ほとんどのLayoutが素子内で使用されていました.ページごとに異なるレイアウトを適用するからかもしれません.しかし、私たちのプロジェクトはすべてのページが同じレイアウトを維持しています.(レイアウトの範囲はタイトルプロペラのみを含む)

    n/a.結論


    今月から新機能開発を始める.これはベンダーナビゲーションと呼ばれる機能ですが、セキュリティ上、パブリケーションには含まれません.新機能ページが実装された時点で、そのページに適用されるレイアウト(既存のComponentか他のレイアウトか)はまだ確定していないので、最小ワイヤフレームが現れた後、今日の内容を再適用したいと思います!

    Reference

  • https://velog.io/@bigbrothershin/Next.js-Layout-%EC%A0%81%EC%9A%A9-%EC%A0%9C%EC%99%B8%ED%95%98%EA%B8%B0
  • https://rinae.dev/posts/a-complete-guide-to-useeffect-ko
    • Linux EMACSの簡単な使用
    [ZeroMQ] multipart message