Debugging SSR in Next.js Apps like a Pro
summary
Adds an npm script called debug that runs Next.js with Node inspection, then connects via Chrome DevTools (chrome://inspect) to attach to the server process, open the server-side new.js file and set breakpoints. Finds the bug: the fetch returned a Response object so code needs data = await response.json() (renamed variable from response), fixes it and the page renders the returned array. Demonstrates debugging SSR end-to-end and that it works.
AI-written summary · about
related talks
27mSSR & SSG in NextJS
30mJust another ECMAScript Trait Syntax ProposalStop breaking the web and start building server-rendered web apps using next.js
44mServer Side Rendering from the trenches
30mServer Side Rendering: Scared Eyes, Working Hands
32mUnderstand the hard parts of Nuxt
53mBeyond console.log
36mNext.js by Example
28mModern Web Debugging