Server-side rendered data fetch in Next.js #4 Building an Online Business

This is a series where we're building an online business from SCRATCH - ⌨️ code, 🗺 marketing, 💰 business - EVERYTHING. 🤗

See it from start here:

Code from the episode

React prototyping episode on componentDidMount and populating components with data

Fun Fun Function has several videos on async await. Here's a few:

The editor is called Visual Studio Code and is free

DevTips is a weekly show for designers, marketers, web devs, frontenders etc who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗.

[rafaelgrube]

I'm glad the show came back! Thank you!

[bla]

It is still a good idea to have Agencies component and pass actual data (via props) to it instead of poluting Index component (which is technically container handling data fetching)

[sprintwithcarlos]

Thanks David, great implementation and very well explained, good job!!!

[sprintwithcarlos]

Great! Let's get this business started!

[andresmontoya]

Awesome! Would be great if you talk about next-offline to create PWA apps with Nextjs :)

[JogandocomFaria]

how should be it using react hooks and redux saga ?

[cristianrosescu]

Can you implement a search filter using an input field that looks through the agencies records to find the record that matches the agency’s name as the user types

[NipunShakya]

From SEO perspective, which one was I’ll be better? SSR or CSR?

[daslafdev]

I've had that CanvasRenderingContext2D autocomplete thingy pop up several times this week so far, lol

[remoteJobs]

What if I never wanted to display agencies list on home page, I want to display agencies on agency page. Technically dynamic different content on different pages, How would i achieve that? Of course, that should be server side rendered.

[Blondynification]

You might use destructuring for instance: `return { agencies: agencies }` should be `return { agencies }` or `const agencies = this.props.agencies` should be `const { agencies } = this.props`. Otherwise great job !

[kasperstenbom]

I noticed directly that you were Swedish. Accent is strong David, haha. I like it tho' very charming.

[stephenjames]

Use something like prettier with first on save. No more manual formatting.

[BrianDriesenga]

What is the difference between isomorphic-fetch and isomorphic-unfetch?

[levanhaobpable]

Hello! I fetch data from two api, but this page is render before success two api, how to render wait success api . Thanks!

[tempatbelajarbersama]

please !, make it playlist, in order to be structured

[c_u_ler]

key="{agency.id}" should be key={agency.id} or key={index} while using the second argument provided by map.

[igordumencic]

Instead of returning { agencies: agencies } you can just return { agencies }

[cacurazi]

Great tut!

What's the song??!!