最近、サーバー側レンダリングが再び話題になっています.jsは多くの企業が望んでいる技術です.Next.学習整理js.

Next.jsとは何ですか。

Next.jsはフレームワークであり、Reactでサーバ側レンダリングを簡単に実現できます.React自体はサーバ側レンダリングも可能であるが,実装の複雑さや複雑さなど多くの問題がある.Next.jsは、これらの問題を簡単に解決するのに役立ちます.次のステップです.jsによりSPAの利点とSSRの利点を持ち去ることができる.

Next.js主な機能

コード剥離と単純ルーティング

既存のReactプロジェクトでは、初期レンダリング時にすべての構成部品が劣化します.この方式の欠点は,規模が拡大するにつれて初期負荷時間が増加することである.Next.jsはサーバ側レンダリングとコードジャンプを自動的に提供するため、必要なページのみをレンダリングし、パフォーマンスを向上させる.次へ.jsが要求する構造に従って符号化する.(作成したファイルは、ページフォルダに小文字でルーティングするパスの名前として使用する必要があります.)
またreact-routerのに似たnext/linkを用いて簡単なページルーティングを行うこともできる.react-routerはto="を使用し、next/linkはhrefとasを使用します.
ex)

<Link href="/detail">
    <div> detail로 이동 </div>
</Link>

next/routerモジュールを使用すると、既存の反応と同じです.ルーティングはpushを使用して行うことができ、このモジュールは以下に説明するプリフェッチもサポートする.

プリデータの読み込み

Next.jsで最も比重の大きい機能.getInitialiPropsメソッドを使用してnext v 9からgetStaticProps、getStaticPaths、getServer SidePropsに分けることをお勧めします.

getInitialProps

import axios from 'axios';

class GetInitial extends React.Component {
    static async getInitialProps ({req}) {
        const response = await axios.get('https://url~.com');
        return {
            data: response.data
        }
    }

    render() {
        const { data } = this.props;
        
        return (
        	<div> {this.props.data} </div>
        );
    }
}

export default GetInitial;

クラス構成部品が起動すると、getInitialiPropsメソッドを使用してレンダリング前に外部データを受信できます.このようにして、受信されたプリデータは、クラス要素のprops値として使用することができる.
componentDidMountと似ていると考えられますが、これはレンダリング回数に差があります.
ComponentDidMount:初期レンダリング後、ComponentDidMount後の状態変化で再レンダリングします.
getInitialiProps:プリデータ設定が完了したらレンダリングします.
nextv 9<=の方法は、「静的生成」か「サーバ側レンダリング」かに分けられます.
[静的作成]getStaticProps/getStaticPaths

プロジェクト構築時にhtmlファイルを生成します.

は、すべての要求(構築時にユーザ要求で作成するものを再利用する)

に再利用する.

のパフォーマンスを理由にnext.js推奨静的作成

ユーザーが要求することなく静的に事前に作成できるページに適しています.

[サーバ側レンダリング]getServerSideProps
各リクエストはhtml

を生成する

は常に最新の

を保持する.

は、常に最新のデータを表示する必要があるページに適しています.

Prefetching

プリフェッチはプリデータパッチをサポートします.は、構成部品をプリフェッチ方法に設定できます.デフォルトはtrueです.

<Link href="/detail" prefetch={true | false}>
    <div> detail로 이동 </div>
</Link>

このリンクのプリフェッチリンクのhtmlタグがビューポートに表示されている場合は、Nextとなります.jsは、リンクコンポーネントにリンクされたページのコードを事前にインポートし、プリデータパッチを行います.
learn:
https://nextjs.org/docs/getting-started