- Erstelle eine Datei
MerkButtonClientOnly.tsx
- Importiere und binde
MerkButton mit dynamic aus next/dynamic ein () => import('./MerkButton').then((module) => module.MerkButton)
- Setze
ssr: false
- Erstelle eine Lade-Animation (z.B.
<span aria-busy="true">Laden...</span>)
- Ersetze in
/app/vorlesungen/[id]/page.tsx den bisherigen MerkButton durch MerkButtonClientOnly
https://nextjs.org/docs/app/guides/lazy-loading#skipping-ssr
MerkButtonClientOnly.tsxMerkButtonmit dynamic ausnext/dynamicein() => import('./MerkButton').then((module) => module.MerkButton)ssr: false<span aria-busy="true">Laden...</span>)/app/vorlesungen/[id]/page.tsxden bisherigenMerkButtondurchMerkButtonClientOnlyhttps://nextjs.org/docs/app/guides/lazy-loading#skipping-ssr