Next.js は条件付きレンダリングとレンダリングされていない HTML のプリレンダリングをサポートしていますか?

Question

Next.js は、特定のボタンがクリックされた場合にのみ表示されるページ上の HTML を事前レンダリングしますか?たとえば、タブがある場合、まだ表示されていないタブのコンテンツがレンダリングされますか?

Answer 1

Next.js だけでなく React でも、コンポーネントを条件付きで表示/非表示にする方法、特に CSS または JavaScript によって非表示にされている場合に依存します。以下に例を示します:

リーリー

1. 最初の例では、isVisible プロパティが false に設定されている場合、空のフラグメントがレンダリングされます。空のフラグメントでは HTML は生成されません。

2. 2 番目の例では、属性に基づいて CSS の display プロパティを変更しただけで、生成された HTML は表示されずに HTML に含まれます。