Next jsとCRAの違い

最大の根本的な違いは、CRAがクライアントであり、Next jsがサーバ側であることです.
CRAの欠点は以下の通りです.

が点滅しています.

Client sideの場合、最初の画面はサーバから取得した情報に再構成されます.これは、最初のインポートとリフレッシュのたびに点滅(点滅)する現象と同じです.この問題を解決するために,開発者はcacheなど多様な方法を用いる必要がある.

SEOは難しい

SEOエンジンはCRAサイトで空のhtmlドームしか見えません.これはSEOを不可能にする.
もちろん、それを克服するために、中にmetaタグを入れる方法があります.しかし、各ページにこのラベルを設定しなければならないので、開発者はうんざりしています.

Next jsは、サーバ側の管理によってこれらの問題をすべて解決します.いくつかの便利な利点があります.

pre-rendering
事前にサーバにログインし、クライアントに渡します.だから点滅しないのもSEOにいい

file-based routing
CRAの場合は、routerを管理する必要があります.しかし、Next jsは、ファイル構成を使用してルーティングを簡略化する.

news/sometルーティングおよびnews/1、news/2などのパラメータを有するルーティングは、ファイル構造によって解決される.コードが少なく、サービスの構造を理解するのも直感的です.

サーバとデータベースの結合
サーバ側の管理であるため、nodejsロジックとデータベースを簡単に使用できます.特にauth管理に便利です.

次はapiフォルダ内のハンドルです.
///api/new-meetup
//POST/api/new-meetup

async function handler(req, res) {
  if (req.method === 'POST') {
    const data = req.body;

    const client = await MongoClient.connect(
      'url'
    );
    const db = client.db();

    const meetupsCollection = db.collection('meetups');

    const result = await meetupsCollection.insertOne(data);

    client.close();

    res.status(201).json({ message: 'Meetup inserted!' });
  }
}

export default handler;

node jsを使ったことがある人はreqを使うことができます.body、res.statusなどはよく知っているはずです.nextjsはapiを作成し,サービス内部で利用できる.
また、CRAであれば、非同期サーバ部をuseEffect部で処理する.したがって,サーバapi部分とdomを実現する際に用いられる論理は混在する.しかしnextjsは2つの方法でそれぞれサーバ上で処理し,情報を取得してprerenderingを行う.
getStaticPropsメソッド

// posts will be populated at build time by getStaticProps()
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries.
export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
    revalidate: 10,
  }
}

export default Blog

構築時に実行します.サーバ側からデータを受信し、propsとしてページに配置します.useEffectを別途受け取る必要はありません.useEffect Dindencyで受けるストレスを考えると便利です
getServerSidePropsメソッド

function Page({ data }) {
  // Render data...
}

// This gets called on every request
export async function getServerSideProps(context) {
  // Fetch data from external API
  const req = context.req;
  
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

export default Page

GetServersizedPropsは、リクエストが発生するたびに正常に動作します.
req,resなどを用いることができ,authに関連する論理の管理が容易である.
リクエストごとに新しいものが受信されると考えられます.
欠点は、getStaticPropsがキャッシュになり、一度だけ受信すればよいのに対し、getServer Sidepropsは毎回再取得する必要があることです.
上記の内容だけを見ると、従来のCRA方式とは全く違います.userEffectを用いた非同期処理に比べてnextjsはより系統的に見え,副作用を低減できる.