## Next.js を学ぶ How Next.js Works 7-11

[Nao000]

Next.js を学ぶ How Next.js Works 7-11

How Next.js Works https://nextjs.org/learn/foundations/how-nextjs-works

7-11

Originally posted by @Nao000 in https://github.com/Nao000/my-learn-golang-echo/issues/19#issuecomment-1532708169

[Nao000]

７． ビルドとランタイムのはなし ８． サーバとクライアントのはなし ９． レンダリングのはなし 　　サーバーサイドレンダリング　＝＞　プレレンダリング 　　静的サイト生成　　　　　　　＝＞　プレレンダリング 　　クライアントレンダリング 　　それらの違い １０． ネットワークのはなし 　　オリジンサーバ、 CDN、エッジ 　　エッジは　キャッシングとコード実行　ができるらしい 　　CDN は エッジの一部らしい １１． おわり

[Nao000]

https://nextjs.org/learn/foundations/how-nextjs-works/rendering

On the client, the HTML is used to show a fast non-interactive page, while React uses the JSON data and JavaScript instructions to make components interactive (for example, attaching event handlers to a button). This process is called hydration.

HTML が表示されます　＝＞　React が JSON データと JavaScript を使ってコンポーネントをインタラクティブにする

この過程を　ハイドレーション （ hydration ）っていうらしい

[Nao000]

https://nextjs.org/learn/foundations/how-nextjs-works/rendering

The beauty of Next.js is that you can choose the most appropriate rendering method for your use case on a page-by-page basis, whether that's Static Site Generation, Server-side Rendering, or Client-Side Rendering. To learn more about which rendering method is right for your specific use case, see the data fetching docs.

Next.js はページ単位で SSR, SSG, CSR, を選択できるらしい